I place thee IconButtons in the first Expanded. But they takes too much space around them. How to place them closer to each other?
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
IconButton(
iconSize: 10,
icon: FaIcon(FontAwesomeIcons.plus),
onPressed: null,
),
IconButton(
iconSize: 10,
icon: FaIcon(FontAwesomeIcons.asterisk),
onPressed: null,
),
IconButton(
iconSize: 10,
icon: FaIcon(FontAwesomeIcons.hashtag),
onPressed: null,
),
],
),
),
Expanded(...),
Expanded(...),
],
)
],
);
You could use RawMaterialButtons, then you use the BoxConstraints to set the size around it, look this aswer: https://stackoverflow.com/a/54963347/2831595
You can try this:
AspectRatio(
aspectRatio: 1,
child: IconButton(
icon: Icon(Icons.ac_unit),
onPressed: () {},
),
);
Related
I want create this layout
layout
4 buttons align to left and Text and edit button align to center
so in web there will be some space
I tried flexible with FlexFit but did not get result as i want (text and edit buton in middle)
EDIT:
I manage to "hack" bad solution
expected layout
but this cause overflowed warning
Row(
children: [
Flexible(
flex: 2,
child: Row(
children: [
IconButton(
onPressed: () => Get.offAllNamed(Verifications.ENDPOINT),
icon: const Icon(Icons.arrow_back)),
...buildNavButtons(),
],
),
),
const Spacer(
flex: 99,
),
Row(
children: [
GetBuilder<VerificationState>(builder: (_) {
return Text(_.verifications[verificationId]!.name);
}),
IconButton(onPressed: () {}, icon: const Icon(Icons.edit)),
],
),
const Spacer(
flex: 99,
),
],
),
EDIT 2:
use Stack widget code example in answer
If I understand what you want correctly, you should use Expanded. It fills the remaining space in a Row/Column :
Row(
children: [
Button(),
Button(),
Button(),
Expanded(
child: Center(
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Text(),
Button(),
]),
)
),
),
To create this layout you will require a row with 3 expanded widgets
Row(
children :[
Expanded(flex: 4, fit: FlexFit.tight,
child: Row(
//All 4 buttons here
)
),
Expanded(flex: 4, fit: FlexFit.tight,
child: Center(
//Text with icon here
)
),
Expanded(flex: 4, fit: FlexFit.tight,
child: Container()
),
]
)
we need to use Stack widget
Stack(
children: [
Row(
children: [
IconButton(
onPressed: () => Get.offAllNamed(Verifications.ENDPOINT),
icon: const Icon(Icons.arrow_back)),
...buildNavButtons(),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
GetBuilder<VerificationState>(builder: (_) {
return Text(_.verifications[verificationId]!.name);
}),
IconButton(onPressed: () {}, icon: const Icon(Icons.edit)),
],
)
],
),
I am new to flutter and I was wondering if someone can help me with my row of buttons. They both work outside of the row but not within it. I have attached the code below please let me know if you can help or need more information.
Expanded(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
IconButton(
icon: Icon(Icons.edit),
)
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: () async {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => StudyPage(
title: 'Add a study',
selected: 0,
),
),
);
},
),
],
)
],
),
I little modified your (Row) code as follows and now it works.
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
IconButton(
icon: const Icon(Icons.edit),
onPressed: () {},
),
FloatingActionButton(
child: const Icon(Icons.add),
onPressed: () async {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => StudyPage(
title: 'Add a study',
selected: 0,
),
),
);
},
),
]),
As far as I know, you can try this
Row(children:[
Expanded(
child:
IconButton(
icon: Icon(Icons.edit),
)),
Expanded(
child:
IconButton(
icon: Icon(Icons.edit),
)),
]);
if it solve your problem, kindly accept it as an answer so that others will get help
First. Expanded only work when place inside Colum/Row children.
Expanded will take all space of parent Colum/Row and expand Colum/Row size it possible.
If you want Colum/Row to max size, try add mainAxisSize: MainAxisSize.max to Colum/Row instead.
Second. Your code look like has error when floatingActionButton not is a Widget when you place in Colum/Row children, it is a props of Scaffold. Try to replace it by a valid button like IconButton/ElevatedButton/etc.... Your IconButton missing onPressed too.
Example:
Row(
mainAxisSize: MainAxisSize.max,
children: [
Expanded( // Place `Expanded` inside `Row`
child: ElevatedButton(
child: Text('First button'),
onPressed: () {}, // Every button need a callback
),
),
Expanded( // Place 2 `Expanded` mean: they try to get maximum size and they will have same size
child: ElevatedButton(
child: Text('Second button'),
onPressed: () {},
),
),
],
)
I am building the app where my widget tree starts with Scaffold and as for body parameter, I assign the column widget. Within the column widget, I want the first 3 buttons sitting side by side, which work fine and next Expanded Widget which takes whole screen and third again 2 buttons sitting side by side. However, the thing is that, the third row widget is not visible on the screen of the phone. Can someone explain why it happens?
Scaffold(
appBar: AppBar(
title: const Text("My Work Timer"),
),
body: Column(
mainAxisSize: MainAxisSize.min,
children: [
Row(
children: [
Padding(padding: EdgeInsets.all(defaultPadding)),
Expanded(
child: ProductivityButton(
color: const Color(0xff009688),
text: "Work",
size: 3,
onPressed: () {}),
),
Padding(padding: EdgeInsets.all(defaultPadding)),
Expanded(
child: ProductivityButton(
color: const Color(0xff607D8B),
text: "Short Break",
size: 3,
onPressed: () {}),
),
Padding(padding: EdgeInsets.all(defaultPadding)),
Expanded(
child: ProductivityButton(
color: const Color(0xff455A64),
text: "Long Break",
size: 3,
onPressed: () {}),
),
Padding(padding: EdgeInsets.all(defaultPadding)),
],
),
Expanded(
child: Text("Hello"),
),
Row(
children: [
Padding(padding: EdgeInsets.all(defaultPadding)),
Expanded(
child: ProductivityButton(
color: const Color(0xff212121),
size: 2,
text: "Stop",
onPressed: () {},
)),
Padding(padding: EdgeInsets.all(defaultPadding)),
Expanded(
child: ProductivityButton(
color: const Color(0xff009688),
size: 2,
text: "Restart",
onPressed: () {},
)),
Padding(padding: EdgeInsets.all(defaultPadding)),
],
)
],
),
);
regards
The icons need to be centred within the Icon buttons otherwise when the two are centred together in the middle of the row, they appear slightly off centre to the right.
Row(
children: <Widget>[
IconButton(
alignment: Alignment.center,
icon: Icon(Icons.arrow_left,
color: Color(0xFFF89CC0), size: 42),
onPressed: () {},
),
IconButton(
alignment: Alignment.topLeft,
icon: Icon(Icons.arrow_right,
color: Color(0xFFF89CC0), size: 42),
onPressed: () {},
},
),
],
),
I have alignment parameters set which as you can see in the screenshot are completely ignored:
How can I get them to be in the centre of their button?
The problem is that IconButtons have a default padding, so do it like this:
return Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
IconButton(
padding: EdgeInsets.all(0),
icon: Icon(Icons.arrow_left, color: Color(0xFFF89CC0), size: 42),
onPressed: () => {},
),
IconButton(
padding: EdgeInsets.all(0),
icon: Icon(Icons.arrow_right, color: Color(0xFFF89CC0), size: 42),
onPressed: () {},
),
],
);
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"),
),
),
],
),
),
);