So i have created a costume widget and i wanted to show it in a column, but whenever i put it in a column and run the application the widget doesn't show on the screen.
This is my costume Widget
#override
Widget build(BuildContext context) {
return new FractionallySizedBox(
widthFactor: 1,
heightFactor: 0.3,
child: Container(
child: new LineChart(linechartData()),
margin: EdgeInsets.fromLTRB(0, 10, 0, 0),
),
);
}
and this is my main.dart widget
class _HomePageState extends State<HomePage> {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: new Text("hello"),
),
body: new Container(
child: new Column(
children: [
new Container(child: new Text("hello")),
new Chart()],
)),
),
);
}
}
Ive tried to check if the problem is with the column widget by removing my costume widget from the column widget and by putting a text widget but the text widget shows fine the problem is when i add my costume widget inside it that everything desapears
You need to wrap your widget inside the Flexible one, like this:
class _HomePageState extends State<HomePage> {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: new Text("hello"),
),
body: new Container(
child: new Column(
children: [
new Flexible(child: Costume()),
new Chart()],
)),
),
);
}
}
CHeckout FractionallySizedBox (Flutter Widget of the Week) video
You can wrap the FractionallySizedBox with Expanded to get available height and then heightFactor will be used its child
body: Container(
child: Column(
children: [
Container(
child: new Text("hello"),
),
Expanded(
child: FractionallySizedBox(
widthFactor: 1,
heightFactor: 0.3,
child: Container(
),
),
)
],
),
),
Also you might be interested on LayoutBuilder
Related
Let's say that I want create a Flutter app. In my app I want to create a Row widget with the following children:
AspectRatio(aspectRatio: 1, child: Center(child: Text("I am text!"))
Image.asset("path/to/asset.png") with unknown aspect ratio
I want to display that Row while keeping both aspect ratios intact. How can I do that?
Here is my attempt:
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
#override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("This is my app")),
body: Container(
child: Row(children: [buildItem1(), buildItem2()]),
),
);
}
Widget buildItem1() {
return AspectRatio(
aspectRatio: 1,
child: Container(
color: Colors.red, child: Center(child: Text("This is my text"))));
}
Widget buildItem2() {
return Image.asset("path/to/my/asset.jpg");
}
}
And this is what being displayed:
I am trying to figure out a way to automatically shrink the row height such that both items would fit the screen.
If I use a fixed hight like that:
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("This is my app")),
body: Container(
height: 300,
child: Row(
mainAxisSize: MainAxisSize.min,
children: [buildItem1(), buildItem2()],
),
),
);
}
...
Than I get the following:
Which is better, but I want to fill the entire width of the screen.
Thanks for anyone who can help!
You can use Expanded on second widget, that will get the avialable space on row. Also for the image use fit: BoxFit.cover(better looks than width).
body: Container(
height: 300,
child: Row(
children: [buildItem1(), Expanded(child: buildItem2())],
),
),
Widget buildItem2() {
return Image.asset(
"assets/images/user.png",
fit: BoxFit.cover,
);
}
Now if you want full screen, I will prefer
Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(
child: Container(
color: Colors.red,
child: Center(
child: Text("This is my text"),
)),
),
Expanded(
child: Image.asset(
"assets/images/user.png",
fit: BoxFit.cover,
)),
],
),
Also LayoutBuilder on scaffold's body provide more options. Also check IntrinsicHeight.
I was able to display the child widgets in a grid using the GridView widget,
Widgets such as text and GridView widgets together on one screen
How can I display it?
For example
//sign_in_page.dart
class SignInPage extends StatelessWidget {
void _signInAnonymously() async {
final authResult=await FirebaseAuth.instance.signInAnonymously();
print('${authResult.user.uid}');
}
#override
Widget build(BuildContext context) {
List<Widget> list1=[
SizedBox(
width:50.0,
height:50.0,
child:Container(
color:Colors.blue,
),
),
SizedBox(
width:100.0,
height:100.0,
child:Container(
color:Colors.red,
),
),
SizedBox(
width:100.0,
height:100.0,
child:Container(
color:Colors.green,
),
),
SizedBox(
width:100.0,
height:100.0,
child:Container(
color:Colors.yellow,
),
),
];
return Scaffold(
appBar: AppBar(
title: Text('title'),
elevation: 10.0,
),
//body: buildContent(),
body:Column( //←This will give an error.
children: [
Text('Description of this GridView'),
GridView.count(
crossAxisCount: 3,
children: list1
),
],
),
backgroundColor: Colors.grey[300],
);
}
//main.dart
import 'package:flutter/material.dart';
import 'app/sign_in/sign_in_page.dart';
void main(){
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title:'title',
theme:ThemeData(
primarySwatch: Colors.indigo,
),
home:SignInPage(),
);
}
}
I want to display the text and grid view,
but when I try to display it using the Column widget as above,
I get an error.
Is there any suitable widget to use in this situation?
I guess You should wrap Your GridView.count() with an Expanded() to specify the height, like
Expanded(
child: GridView.count()
)
I have a fairly simple flutter app. It has a chat feature.
However, I have a problem with the chat feature.
It's made up of a widget does Scaffold and in it SingleChildScrollView - which has a message-list (container) and input-area (container). Code is attached.
Problem is: if I click on the input box, the keyboard opens and it pushes the message-list.
Pushing the message-list is an acceptable thing if you are already at the bottom of the message-list.
However, if the user scrolled up and saw some old messages, I don't want the message-list widget to be pushed up.
Also, I don't want the message-list to be pushed up if I have only a handful of messages (because that just makes the messages disappear when keyboard opens, and then I need to go and scroll to the messages that have been pushed [user is left with 0 visible messages until they scroll]).
I tried different approaches - like
resizeToAvoidBottomInset: false
But nothing seems to work for me, and this seems like it should be a straightforward behavior (for example, whatsapp act like the desired behavior).
My only option I fear is to listen to keyboard opening event, but I was hoping for a more elegant solution.
Here's my code:
#override
Widget build(BuildContext context) {
height = MediaQuery.of(context).size.height;
width = MediaQuery.of(context).size.width;
return Scaffold(
body: SingleChildScrollView(
child: Column(
children: <Widget>[
SizedBox(height: height * 0.1),
buildMessageList(), // container
buildInputArea(context), // container
],
),
),
);
Widget buildInputArea(BuildContext context) {
return Container(
height: height * 0.1,
width: width,
child: Row(
children: <Widget>[
buildChatInput(),
buildSendButton(context),
],
),
);
}
Widget buildMessageList() {
return Container(
height: height * 0.8,
width: width,
child: ListView.builder(
controller: scrollController,
itemCount: messages.length,
itemBuilder: (BuildContext context, int index) {
return buildSingleMessage(index);
},
),
);
}
This seems to work for me:
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
#override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
ScrollController _controller = ScrollController();
#override
Widget build(BuildContext context) {
SystemChrome.setEnabledSystemUIOverlays([]);
return MaterialApp(
title: 'Flutter Demo',
home: Scaffold(
body: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
buildMessageList(),
buildInputArea(context),
],
),
),
);
}
Widget buildInputArea(BuildContext context) {
return Row(
children: <Widget>[
Expanded(
child: TextField(),
),
RaisedButton(
onPressed: null,
child: Icon(Icons.send),
),
],
);
}
Widget buildMessageList() {
return Expanded(
child: ListView.builder(
shrinkWrap: true,
itemCount: 50,
controller: _controller,
itemBuilder: (BuildContext context, int index) {
return Padding(
padding: EdgeInsets.all(10),
child: Container(
color: Colors.red,
height: 20,
child: Text(index.toString()),
),
);
},
),
);
}
}
I think the problem is that you are using fixed sizes for all widgets. In this case it is better to use Expanded for the ListView and removing the SingleChildScrollView. That way the whole Column won't scroll, but only the ListView.
Try to use Stack:
#override
Widget build(BuildContext context) {
height = MediaQuery.of(context).size.height;
width = MediaQuery.of(context).size.width;
return Scaffold(
body: Stack(
children: <Widget>[
SingleChildScrollView(
child: Column(
children: <Widget>[
SizedBox(height: height * 0.1),
buildMessageList(),
],
),
),
Positioned(
bottom: 0.0,
child: buildInputArea(context),
),
],
),
);
}
Setting resizeToAvoidBottomInset property to false in your Scaffold should work.
You can use NotificationListener to listen to scroll notifications to detect that user is at the bottom of the message-list. If you are at the bottom you can then set resizeToAvoidBottomInset to true.
Something like this should work
final resizeToAvoidBottomInset = true;
_onScrollNotification (BuildContext context, ScrollNotification scrollNotification) {
if (scrollNotification is ScrollUpdateNotification) {
// detect scroll position here
// and set resizeToAvoidBottomInset to false if needed
}
}
#override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: this.resizeToAvoidBottomInset,
body: NotificationListener<ScrollNotification>(
onNotification: (scrollNotification) {
return _onScrollNotification(context, scrollNotification);
},
child: SingleChildScrollView(
child: Column(
children: <Widget>[
buildMessageList(), // container
buildInputArea(context), // container
],
),
),
),
);
}
this is technically already answered, and the answer is almost correct. However, I have found a better solution to this. Previously the author mentions that he wants to have a similar experience to WhatsApp. By using the previous solution, the listview would not be able to scrolldown to maxExtent when the sent button is pressed. To fix this I implemented Flex instead of Expanded, and use a singlechildscrollview for the input area
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
#override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
ScrollController _controller = ScrollController();
TextEditingController _textcontroller=TextEditingController();
List<String> messages=[];
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: Scaffold(
body: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Flexible(
child: ListView.builder(
shrinkWrap: true,
itemCount: messages.length,
controller: _controller,
itemBuilder: (BuildContext context, int index) {
print("From listviewbuilder: ${messages[index]}");
return Padding(
padding: EdgeInsets.all(10),
child: Container(
color: Colors.red,
height: 20,
child: Text(messages[index])
),
);
},
),
),
SingleChildScrollView(
child: Row(
children: <Widget>[
Expanded(
child: TextField(controller: _textcontroller),
),
RaisedButton(
onPressed: (){
Timer(Duration(milliseconds: 100), () {
_controller.animateTo(
_controller.position.maxScrollExtent,
//scroll the listview to the very bottom everytime the user inputs a message
curve: Curves.easeOut,
duration: const Duration(milliseconds: 300),
);
});
setState(() {
messages.add(_textcontroller.text);
});
print(messages);
},
child: Icon(Icons.send),
),
],
),
),
],
),
),
);
}
}
It's better to use flex because expanded as the documentation says, expands over available space, whereas flex would resize to the appropriate proportion. This way if you are going for the "WhatsApp experience" in which the listview scrolls down once you sent a message. The listview would resize when the keyboard pops up and you will get to the bottom, instead of it not going fully to the bottom.
I'm currently using Scaffold with BottomNavigationBar in a project and need to display a separated widget on top of all that.
Tried to create a Stack on the build return and put this widget and the Scaffold as the children, but the widget is simply not displayed (not showed at all)! There isn't any error messages either.
What could be wrong? Or there is any other approach? (calling AlertDialog won't work for this purpose).
Defining the Stack on the body of the Scaffold didn't work also, as it need a list for the BottomNavigationBar.
Widget build(BuildContext context) {
var Test = Center(
child: SizedBox(width: 100, height: 100,
child: Container(
color: Colors.blue,
child: Text("Test"),),),);
return Stack(
alignment: Alignment.center,
children: [
Test,
Scaffold(
appBar: ..... (rest of the code)
It is because your Scaffold is drawn over your Test widget. Stack takes multiple children and orders them from bottom to top. So the first item is the bottom-most and the last is the top-most. Try the following:
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
alignment: Alignment.center,
children: <Widget>[
Scaffold(
appBar: AppBar(title: Text('Hi')),
),
TestWidget(),
],
),
);
}
}
class TestWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
width: 100,
height: 100,
color: Colors.blue,
child: Center(
child: Text("Test"),
),
);
}
}
As #HBS mentioned, the problem was caused by the Stack ordering, but the fixing can be achieved just by changing the Widget order:
Widget build(BuildContext context) {
var Test = Center(
child: SizedBox(width: 100, height: 100,
child: Container(
color: Colors.blue,
child: Text("Test"),),),);
return Stack(
alignment: Alignment.center,
children: [
Scaffold(
appBar: ..... (rest of the code),
Test,
],
I'm a beginner and still learning flutter, please forgive me if am getting something wrong here.
So i have a Stack inside of which i have 2 Widgets. Widget1 and Widget2.
I want to center the Widget B right below Widget A.
NOTE: Widget 2 is larger than Widget1.
class MyWidgets extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
Widget1,
Positioned(
top: widget1PositionFromTop + widget1Size,
left: widget1PositionFromLeft,
child: FractionalTranslation(
translation: Offset(-0.5, 0.0),
child: Widget2,
),
)
],
);
}
}
The Problem is, if the Widget1's position from left is 0, or less than half the size of Widget2, the Widget2 is overflowed, and only half or a part of the Widget2 can be seen.
I want to know how can i only translate its position as long as there is space left, i mean if there is space left only for 0.3 of Widget2 then it will move only -0.3 not -0.5..
Thank you.
If you want this using Stack then
class SO extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Stack(
alignment: Alignment.bottomCenter,
children: <Widget>[
Container(width: 200, height: 200, color: Colors.red),
Container(width: 100, height: 100, color: Colors.blue),
],
),
);
}
}
which gives
Maybe you could use Column like
class SO extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(width: 200, height: 200, color: Colors.red),
Container(width: 100, height: 100, color: Colors.blue),
],
),
);
}
}
with the end result as