This is what I want to do. Form is a Column with a few TextField-s that have to be in the middle of the screen. Footer is another Column with a single Text widget but positioned at the bottom of the screen. Both columns are in a Stack. It looks fine when Form is small but if its height is more than screen height (for example, when the keyboard is open) I cannot scroll to view the whole Form and Footer appears above everything.
Scaffold(
body: Container(
padding: EdgeInsets.all(20.0),
constraints: BoxConstraints.expand(),
child: Center(
child: Stack(
children: <Widget>[
Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
// Form
),
Column(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.stretch,
// Footer
),
],
),
),
),
);
So I decided to put them in ListView instead of Stack. The scrolling problem is already fixed but now positioning is not correct - they are on the top. How to put Form into the center and Footer at the bottom?
Scaffold(
body: Container(
padding: EdgeInsets.all(20.0),
constraints: BoxConstraints.expand(),
child: Center(
child: ListView(
children: <Widget>[
Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
// Form
),
Column(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.stretch,
// Footer
),
],
),
),
),
);
Related
I'm trying to make a widget on the very bottom of the screen (above the bottomnavbar).
I added MainAxisAlignment.spaceBetween to the column, but it seems like the Column in the SingleChildScrollView is shrinking to fit. How can I make _BottomOne all the way on the bottom?
Column(children: [
_StayOnTopWidget(),
Expanded(
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
_FirstOne(),
_BottomOne(),
],
),
),
)
]),
Expanded widget should be the parent of _BottomOne, which will take remaining space will align itself at the bottom
Column(children: [
_StayOnTopWidget(),
SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
_FirstOne(),
Expanded(
child:
_BottomOne(),
),
],
),
)
]),
I have a Card widget in a ListView widget and the card has the following code structure to it:
return Card(
child: Row(
// crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Image(
image: AssetImage('assets/images/my-img.jpg'),
width: 150,
),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween, // THIS HAS NO EFFECT
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(content.title),
Text(content.description),
],
),
Row(
// crossAxisAlignment: CrossAxisAlignment.baseline,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
children: <Widget>[
Icon(Icons.accessibility),
Text('cool')
],
),
Text('something else'),
],
)
],
),
),
],
),
);
I'm trying to make the column in the row have a spaceBetween alignment since right now it the column is vertically centered. I tried adding a CrossAxisAlignment.stretch to the Row widget, but I get an error:
BoxConstraints forces an infinite height
You could add a SizedBox between the Column and Row.
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(content.title),
Text(content.description),
],
),
//Sized Box
SizedBox(height: //whatever double),
Row(
crossAxisAlignment: CrossAxisAlignment.baseline,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
children: <Widget>[
Icon(Icons.accessibility),
Text('cool')
],
),
Text('something else'),
],
)
Columns take all the available height. Consider wrapping the Column inside Expanded with a Container of fixed height.
To make a Column take as much space as possible, set mainAxisSize: MainAxisSize.min. However all the widgets are packed up and all Alignments will have no effect.
So probably what you are looking for is to set the height of the Row with the the maximum height of its children widgets. This can be achieved by wrapping the Row with IntrinsicHeight.
Card(
child: IntrinsicHeight(
child: Row(
// ...
),
),
),
I am quite a newbie in Flutter.
I tried several pieces of stuff but I failed at the end.
I have a row and this row contains two different columns.
My question is I am trying to add Container which matches the parent until other columns height into the first column.
I already tried widgets like Flex, Expanded etc. And I got infinity error. Since the first column has no idea about other columns size.
Widget _buildProgressVideoCall() {
return Row(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
CircleAvatar(
child: Image.asset(
ImageAssets.videocall,
scale: 3.0,
),
radius: 22,
SizedBox(height: 16),
Expanded(child: Container(
child: Image.asset(
ImageAssets.progressDots,
repeat: ImageRepeat.repeatY,
)))
],
),
Expanded(
flex: 1,
child: Padding(
padding: EdgeInsets.only(left: 16),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[ // Fixed Height Widgets Buttons etc.
],
),
),
),
],
);
}
If I have your setup right try doing this I might not have it quite right let me know if I misunderstand what you want.
Row(
children: <Widget>[
Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[],
),
Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(),
],
)
],
),
I want to expand a column horizontally while keeping the children (an icon and a text) in the center.
When I use CrossAxisAlignment.center it doesn't mathes its parents width. So I tried CrossAxisAlignment.stretch.
Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.help),
Text('Please help!'),
],
),
Here the text was aligned left even though the icon is centerd.
I do not understand this and a solution would be highly appreciated.
have you tried wrapping column in a container and setting width to double.infinity?
Container(
width: double.infinity,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.help),
Text('Please help!'),
],
),
)
I found a hack might not the exact solution but works for me.
there might be other solutions
Added a SizedBox box widget with width because we need to center horizontally.
Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.help),
Text('Please help!'),
SizedBox(
width: double.infinity, // it will take entire available device width
height: 0,
)
],
),
Another way.
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Row(
children: <Widget>[
Expanded(
child: Container(),
),
Icon(
Icons.help,
color: Colors.white,
),
Expanded(
child: Container(),
),
],
),
Row(
children: <Widget>[
Expanded(
child: Container(),
),
Text('Please help!'),
Expanded(
child: Container(),
),
],
)
],
)
The right way to do is:
Center( // it helps column stretch
child: Column(
mainAxisAlignment: MainAxisAlignment.center, // it helps child stay in center
children: ...,
)
)
So I want to create this:
| 12 5 300 |
| monkeys baboons chimpanzees |
Basically, put the widgets in a Row and use mainAxisAlignment: MainAxisAlignment.spaceAround on the numbers. The problem is, the text is disrupting the spacing, and since 'chimpanzees' is longer, it causes the 5 baboons to be off center. What is the best way to have the spaceAround only align the numbers, then center the text underneath the numbers?
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Column(
children: <Widget>[
Text('12'),
Text('monkeys'),
],
),
Column(
children: <Widget>[
Text('5'),
Text('baboons'),
],
),
Column(
children: <Widget>[
Text('300'),
Text('chimpanzees'),
],
),
],
),
You can try to use Expanded() to have same width for the Row() children. No need to use spaceAround.
Row(
children: <Widget>[
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('12'),
Text('monkeys'),
],
),
),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('5'),
Text('baboons'),
],
),
),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('300'),
Text('chimpanzees'),
],
),
),
],
),
Try this
mainAxisAlignment: MainAxisAlignment.spaceEvenly,