How do I make Flutter table stretch vertically - flutter

I am new to Flutter and I cannot make my table take all the available space vertically.
Here is the code:
home: Scaffold(appBar: AppBar(),
body: Table(
children: [
TableRow(
children: [
TextButton(onPressed: () {}, child: Text('1')),
TextButton(onPressed: () {}, child: Text('2')),
]
)
]
)
)
This is what I see right now:

Filling the space vertically is not as straight forward and not a default behaviour as it is for the horizontal part. It's because you usually don't want that behaviour: most of the time you want the content itself to determine the space vertically and make a view scrollable if it's too much content (and therefore not enough space available). There are also cases for horizontally scrollable elements, but thats special behaviour then.
If you insist on forcing to fill the space vertically, you need to do that manually. In this case, you have to determine the available space and set the heights of your elements. Best way to determine the available space is making use of the LayoutBuilder widget which gives you that information and updates its subtree if this information changes (since it's a builder widget).
Here you can see a rough and simplified solution using this approach and your example (I enabled the borders so its also visible:
LayoutBuilder(
builder: (context, constraints) => Table(
border: TableBorder.all(),
children: [
TableRow(
children: [
SizedBox(
height: constraints.maxHeight / 2,
child: Align(
child: ElevatedButton(
onPressed: () {},
child: Text('1'),
),
),
),
SizedBox(
height: constraints.maxHeight / 2,
child: Align(
child: ElevatedButton(
onPressed: () {},
child: Text('2'),
),
),
),
],
),
TableRow(
children: [
SizedBox(
height: constraints.maxHeight / 2,
child: Align(
child: ElevatedButton(
onPressed: () {},
child: Text('3'),
),
),
),
SizedBox(
height: constraints.maxHeight / 2,
child: Align(
child: ElevatedButton(
onPressed: () {},
child: Text('4'),
),
),
),
],
),
],
),
),

I ended up giving up on using Table and instead used Column and Row widgets. Here is my new code:
Column(
children: [
Expanded(
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(child: TextButton(
child: Text('1'),
onPressed: () {},
)),
Expanded(child: TextButton(
child: Text('2'),
onPressed: () {},
)),
]),
),
]
);

Related

Flutter - make button fill the entire container

I am very new to Flutter and I trying to make button fill the entire parent container. I want to create two buttons each of them 50% of device height and 100% width using two Flexible with flex parameters.
This is What I have:
Flexible(
flex: 1,
child: Container(
color: Color.fromARGB(255, 20, 20, 20),
alignment: Alignment.center,
child: ElevatedButton(
child:Text('$_counter1'),
onPressed: _pop1,
),
),
),
Everyday I create websites using CSS and HTML and here in Flutter everything works completly diferent. It's hard to understand the code at the begining. With CSS I cloud only add 100% width and height and done but here I am little bit lost.
This is What I am trying to get:
With flutter, you can use Column, Expanded
Column(
children: [
Expanded(
flex: 1,
child: Container(
color: const Color.fromARGB(255, 20, 20, 20),
alignment: Alignment.center,
child: ElevatedButton(
child: Text('Button 1'),
onPressed: (){},
),
),
),
Expanded(
flex: 1,
child: Container(
color: Colors.green,
alignment: Alignment.center,
child: ElevatedButton(
child: Text('Button 2'),
onPressed: (){},
),
),
),
],
)
you are almost right. Flexible takes only the needed space. if you want to takes all space available like 100% then you need to add another properties for Flexible :
https://stackoverflow.com/a/52646036/12838877
Flexible(
fit: FlexFit.tight,
child: Foo(),
);
or is just shorthand with Expanded
Flexible(
fit: FlexFit.tight,
child: Foo(),
);
for comparison : reff
as you can see, Flexible will only take as minimum space needed.
and by default expanded will take 100% available space.
if you want to modify, you just change the flex value
You could combine Column with cross axis alignment strech to achieve this.
Like so:
Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(
child: Container(
color: Colors.grey,
child: TextButton(
onPressed: () {},
child: Text(
'Button 1',
style: Theme.of(context).textTheme.headline2!.copyWith(
color: Colors.grey.shade700,
),
),
),
),
),
Expanded(
child: Container(
color: Colors.grey.shade700,
child: TextButton(
onPressed: () {},
child: Text(
'Button 2',
style: Theme.of(context).textTheme.headline2!.copyWith(
color: Colors.grey,
),
),
),
),
),
],
Running example:
https://dartpad.dev/?enchanted-pomelo-5708

Flutter: How to have Container/Column with fix height

The layout have uses column with Text and Image. The data change based from a list and some text/image are nil. How to make the container takes the same height when only one data is present?
Thanks.
body: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Container(
color: Colors.red,
child: Column(
children: [
Text(
'This is Container/Column1. It have two widgets, Text and Image. How to make the height of the container same even if one the the widget is removed/null?',
),
Image.asset('assets/index.jpg')
],
),
),
Container(
color: Colors.green,
child: Column(
children: [
Text('This is Container/Column2. This will have additional widgets.'),
SizedBox(
width: double.maxFinite,
child: TextButton(
onPressed: () {},
style: TextButton.styleFrom(
backgroundColor: Colors.white,
),
child: Text('Next Button',
),),),],),),],),
first approach: add a fixed height to your container
Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Container(
// this will give the container a fixed height of 0.4 from the screen height
height: MediaQuery.of(context).size.height * 0.4,
color: Colors.red,
child: Column(
children: [
Text(
'This is Container/Column1. It have two widgets, Text and Image. How to make the height of the container same even if one the the widget is removed/null?',
),
Image.asset('assets/index.jpg')
],
),
),
Container(
color: Colors.green,
child: Column(
children: [
Text('This is Container/Column2. This will have additional widgets.'),
SizedBox(
width: double.maxFinite,
child: TextButton(
onPressed: () {},
style: TextButton.styleFrom(
backgroundColor: Colors.white,
),
child: Text(
'Next Button',
),
),
),
],
),
),
],
),
second approach: if one of them is null add a SizedBox() with your prefered height
Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Container(
height: MediaQuery.of(context).size.height * 0.4,
color: Colors.red,
child: Column(
children: [
someCondition ? Text(
'This is Container/Column1. It have two widgets, Text and Image. How to make the height of the container same even if one the the widget is removed/null?',
) : SizedBox(height : 40)
someCondition ? Image.asset('assets/index.jpg') : SizedBox(height : 40)
],
),
),
Container(
color: Colors.green,
child: Column(
children: [
Text('This is Container/Column2. This will have additional widgets.'),
SizedBox(
width: double.maxFinite,
child: TextButton(
onPressed: () {},
style: TextButton.styleFrom(
backgroundColor: Colors.white,
),
child: Text(
'Next Button',
),
),
),
],
),
),
],
);
One way is to wrap column with Expanded. Second is to have fixed height for contained. If you have this problem with ListView inside another widget and have problems, use shrinkWrap as true inside a ListView. And again for your problem (which person above failed to understand) is that you need or fixed value for height or use Expanded (as much space as possible) or Flexible (least space possible).

Space Multiple Images Horizontally (Flutter)

I'm trying to space 5 small images horizontally in flutter, but I can't seem to find a simple answer. Maybe I'm just stressed that I can't learn by asking questions... Here's what I have:
body: Center(
child: Row(
children: <Widget> [
Expanded(
child: FlatButton(
onPressed: null,
child: Image.asset('assets/button1.png'),
),
),
],
),
))));
Where would I place the next button code? Thank you for understanding!
Row(
children: <Widget> [
Expanded(
child: FImage.asset('assets/image1.png'),
),
Expanded(
child: Image.asset('assets/image2.png'),
),
Expanded(
child:Image.asset('assets/image3.png'),
Expanded(
child: Image.asset('assets/image4.png'),
),
Expanded(
child: Image.asset('assets/image5.png'),
),
]
That is one way to render 5 images horizontally. I don't know why you had these FlatButton() widgets there.
But remember that Row() widget in general puts widgets horizontally in a row.
There is also the Column() widget whereas it puts its' children widgets vertically, like being in a column.
I think this is what you are looking for
Row(
children: <Widget> [
Expanded(
child: FlatButton(
onPressed: null,
child: Image.asset('assets/button1.png'),
   ),
),
Expanded(
child: FlatButton(
onPressed: null,
child: Image.asset('assets/button1.png'),
   ),
),
Expanded(
child: FlatButton(
onPressed: null,
child: Image.asset('assets/button1.png'),
   ),
),
Expanded(
child: FlatButton(
onPressed: null,
child: Image.asset('assets/button1.png'),
   ),
),
Expanded(
child: FlatButton(
onPressed: null,
child: Image.asset('assets/button1.png'),
   ),
),
]

Flutter: persistentFooterButtons with equally dynamic size widgets

I want to create a persistentFooterButtons with 3 FlatButton.icon
to equally take the whole width of the Screen, and customize itself with different screen sizes, i tried many approaches like Wrap,Expanded, i couldn't make it work, i even tried
final screenSize = MediaQuery.of(context).size;
Container(
width: screenSize.width /3 ,
child: FlatButton.icon(
onPressed: null,
icon: Icon(Icons.search),
label: Text("search")),
),
but the text always overflows on the right side of the screen.
So, Any ideas how this might go?
**Edit**
i found this approach which is very helpful
persistentFooterButtons: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
FlatButton(
onPressed: () {},
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
new Icon(Icons.lightbulb_outline),
new Text('Idea'),
],
),
),
FlatButton(
onPressed: () {},
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
new Icon(Icons.lightbulb_outline),
new Text('Idea'),
],
),
),
FlatButton(
onPressed: () {},
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
new Icon(Icons.lightbulb_outline),
new Text('Idea'),
],
),
),
],
),
],
The only problem is that mainAxisAlignment property doesn't make any changes, so the three buttons are sided together
See here
Any help?
For create a persistentFooterButtons you need to use bottomNavigationBar.
And For create 3 flatButton with equal size, you need to use flex attribute inside Expanded Widget.
Scaffold(
body: Container(
color: Colors.white,
child: Center(child: Text("Flutter"),),
),
bottomNavigationBar: new Container(
padding: EdgeInsets.all(0.0),
child: Row(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Expanded(
flex: 1,
child: FlatButton.icon(
onPressed: () {
},
icon: Icon(Icons.search),
label: Text("Search"),
),
),
Expanded(
flex: 1,
child: FlatButton.icon(
onPressed: () {
},
icon: Icon(Icons.search),
label: Text("Search"),
),
),
Expanded(
flex: 1,
child: FlatButton.icon(
onPressed: () {
},
icon: Icon(Icons.search),
label: Text("Search"),
),
),
],
),
),
);

How can I display buttons side-by-side in Flutter?

I would like to display both of my buttons next to each other horizontally. So far I can only display them from top to bottom.
With the following code, what would I have to change ?
new Container(
child: new Column(
children: <Widget>[
new RaisedButton(
child: new Text("LogIn"),
color: Colors.blueAccent[600],
onPressed: null,
),
new RaisedButton(
child: new Text("SignUp"),
color: Colors.blueAccent[600],
onPressed: null,
),
],
),
),
Column is for items vertically arranged (hence a column), you are looking for Row. Just replace Column with Row, the rest of the code is fine. You can also use an Expanded if you want to fill all the available space.
Wrap(
children: <Widget>[
RaisedButton(
...
),
RaisedButton(
...
),
RaisedButton(
...
),
],
),
If you have a column with text in it, and you want two buttons below that text right next to eachother you can use ButtonTheme.bar
Below is some of Flutter's starting code with it. You could plug it in to the starter to see it in action:
Just paste this after the second new text (the one with $counter in it)
new ButtonTheme.bar(
child: new ButtonBar(
alignment: MainAxisAlignment.center,
children: <Widget>[
new RaisedButton(
onPressed: _incrementCounter,
child: new Icon(Icons.add),
color: Colors.green,
),
new RaisedButton(
onPressed: _decrementCounter,
child: new Icon(Icons.remove),
color: Colors.red,
),
],
),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
"Rahul Srivastava",
),
Text(
"Varanasi, India",
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
FlatButton(
onPressed: () {
var player = AudioCache();
player.play('abc.mp3');
},
child: Text('Play')),
FlatButton(
onPressed: () {
var player = AudioCache();
player.play('abc.mp3');
},
child: Text('Pause')),
],
)
],
),
Do something like this
new Column(children: <Widget>[
new Button(
...
...
),
new Button(
...
...
)
])
Just replace Column with that Row in your code It will work.
Although I want to add some extra stuff here suppose that you have Column wrapped inside a row then how will you achieve that displaying of buttons side by side?
Simple just change Column to row n row to column as follows:
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
child: ...
),
child: ..
),
child: ..
)
],
),