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
Related
Please see my code and scree shot below. I want locate Text("to be center") at center horizontally, but comparatively located right side as showen below.
I understand i'ts because I'm using expanded widget and set flex 1 & 4 and Text("to be center") are inclueded in latter block.
How can I located totally or relatively center but using expandede & flex property like this case ?
Also I understand I can adjust it by wrapping Text() with padding and set EdgeInsets.only(right:X) but I can not figure out if it is totally cenerized or not...
Row(
children: [
Expanded(
flex:1,
child:TextButton(
style: TextButton.styleFrom(
alignment: Alignment.centerLeft,
),
child: const Icon(
Icons.close,
color: MyStyle.textColor,
),
onPressed: () {
Navigator.of(context).pop();
},
),
),
Expanded(
flex:4,
child: Container(
alignment: Alignment.center,
decoration: const BoxDecoration(
),
child: Text("to be center",style: MyText(myFontSize: 15).style()),
)
),
],
),
Just use Spacer at the end inside Row
Row(
children: [
Expanded(
flex: 1,
child: TextButton(
style: TextButton.styleFrom(
alignment: Alignment.centerLeft,
),
child: const Icon(
Icons.close,
color: MyStyle.textColor,
),
onPressed: () {
Navigator.of(context).pop();
},
),
),
Expanded(
flex: 4,
child: Container(
alignment: Alignment.center,
decoration: const BoxDecoration(),
child: Text(
"to be center",
style: MyText(myFontSize: 15).style(),
),
),
),
// like this
const Spacer(),
],
),
Learn more about the Spacer widget
Try below code: refer layout
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
child: TextButton(
style: TextButton.styleFrom(
alignment: Alignment.centerLeft,
),
child: const Icon(
Icons.close,
),
onPressed: () {
Navigator.of(context).pop();
},
),
),
const Expanded(
child: Center(
child: Text(
'to be center',
),
),
),
const Expanded(child: SizedBox())
],
),
Result->
The simple solutions could be:
Use textAlign attribute of Text widget or
Wrap Text widget with Center widget inside Expanded widget or
You can even explore the widget IntrinsicWidth with Center widget.
I'm trying to make a footer and I want everything to appear Centered with even space between these three widgets in the below code.
Container(
margin: const EdgeInsets.symmetric(vertical: 20, horizontal: 40),
child: Row(
children: <Widget>[
const Expanded(
flex: 1,
child: Text(
'All Right Reserved',
style: TextStyle(fontSize: 10),
)),
Expanded(
flex: 3,
child: Row(
children: <Widget>[
FooterItem(
title: 'Twitter',
onTap: () {},
),
FooterItem(
title: 'Instagram',
onTap: () {},
),
FooterItem(
title: 'WhatsApp',
onTap: () {},
),
],
),
),
const Expanded(
flex: 1,
child: Text(
'All Right Reserved',
style: TextStyle(fontSize: 10),
)),
],
),
)
I tried using flex as seen in the above code but it doesn't align at the center and no even space as seen in the below screenshot. How to fix this?
You can remove all Expanded and use mainAxisAlignment in parent Row:
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[]
)
PopupMenuButton<String>(
///Icon
child: SizedBox(
child: Stack(
children: [
const Icon(
Icons.notifications_outlined,
),
Container(
child: Container(
child: Padding(
padding: const EdgeInsets.all(0.0),
child: Center(
child: Text(
''
),
),
),
),
)
],
),
),
onSelected: (value) {},
itemBuilder: (BuildContext context) {
///generating list on the fly
var myList = someList!.map((listItem) {
return PopupMenuItem<String>(
value: listItem.id.toString(),
child: SizedBox(
child: Column(
children: [
Text(
listItem.name!,
),
],
),
),
);
}).toList();
var closeButtonList = [
PopupMenuItem<String>(
child: Column(
children: [
Align(
alignment: Alignment.centerRight,
child: IconButton(
onPressed: Navigator.of(context).pop,
icon: const Icon(
Icons.close,
),
),
),
],
),
),
///appending list using spread operator
...myList
];
return closeButtonList;
},
This code works fine and displays a cross(close) icon as the first element of the list.
The problem is when I scroll the list, the icon get scrolled and disappears from the screen.
How can I make it fixed while the rest of the list is scrollable?
i wrote this code in flutter and i wanna know if i can make it better,
i did a lot of "work around" that i feel there's a better way to write it.
especially the buttons with the expanded between them, and the sizedbox.
the screen has text in the middle(getVerse), and and two buttons, one is bottom left and the other is bottom right.
the first expanded separate the text from the buttons, and the second expanded is to separate the two buttons
help is appreciated and thanks for your time.
Scaffold(
appBar: AppBar(
title: Text(
suras.elementAt(widget.index),
textAlign: TextAlign.right,
),
),
body: Column(
children: [
SizedBox(
height: 100,
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
getVerse(widget.index + 1, currentVerse),
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 24,
fontFamily: 'KFGQPC BAZZI Uthmanic Script',
),
),
),
Expanded(child: Container()),
Row(
children: [
ElevatedButton(
onPressed: () {
setState(() {
currentVerse++;
});
},
child: Text('not sure'),
),
Expanded(child: Container()),
ElevatedButton(
onPressed: null,
child: Text('sure'),
),
],
),
],
),
);
If you want that those 2 buttons to stay at the bottom you can use floatingActionButton in the Scaffold property. You can change the location of those buttons with the floatingActionButtonLocation.
Scaffold(
appBar: AppBar(
title: Text('MyApp'),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
ElevatedButton(
onPressed: () {},
child: Text('Not sure'),
),
ElevatedButton(
onPressed: () {},
child: Text('Sure'),
)
],
),
body: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'My Text',
textAlign: TextAlign.center,
),
),
),
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"),
),
),
],
),
),
);