I've been toying with lists in flutter, and everything is fine. I'm starting to understand the logic of the whole thing.
Now I wanted to do a simple layout like that :
My problem is that I can't find a way to make the first row. I tried to tell Row to let its two children take half and no less no more, but I didn't really find a way. (The inside thing will eventually be buttons.)I tried several things to no avail. Here is the layout I started from :
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 50.0),
),
Row(
children: <Widget>[
Padding(
padding: EdgeInsets.only(
top: buttonPaddingTop,
left: buttonPaddingSide,
right: buttonPaddingSide),
child: ButtonTheme(
child: FlatButton(
onPressed: () {},
color: Colors.grey,
child: const Text('LARGE TEXT',
overflow: TextOverflow.ellipsis,
style: TextStyle(fontSize: buttonFontSize)),
),
),
),
Padding(
padding: EdgeInsets.only(
top: buttonPaddingTop,
left: buttonPaddingSide,
right: buttonPaddingSide),
child: ButtonTheme(
child: FlatButton(
onPressed: () {},
color: Colors.grey,
child: const Text('LARGE TEXT',
overflow: TextOverflow.ellipsis,
style: TextStyle(fontSize: buttonFontSize)),
),
),
),
],
),
]),
),
);
}
Should I continue trying like this, or should I try another object than Row to arrange the layout ?
Expanded takes as much space as available in this case horizontally. That means if you would use 2 Expanded widgets inside your Row, the space will be divided by half.
Try this:
Column(
children: <Widget>[
Row(
children: <Widget>[
Expanded(
child: Text('first half'),
),
Expanded(
child: Text('second half'),
),
],
),
Row(
children: <Widget>[
Expanded(
child: Text('first half'),
),
Expanded(
child: Text('second half'),
),
],
),
Row(
children: <Widget>[
Expanded(
child: Text('full width'),
)
],
),
],
)
Make sure you read more about Flutter widgets, for example watch this video (and other ones in this series):
https://www.youtube.com/watch?v=_rnZaagadyo
Related
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>[]
)
here is the UI that I'm trying to build
but this is the output
I tried alignment also , but that also didn't working
but when setting a fixed height this is working fine
but I can't fill this using the fit parameter,
here is the code
Scaffold(
backgroundColor: kDarkTheme,
body: SafeArea(
child: Column(
children: [
const SizedBox(height: 10),
Row(
//code for top button
),
const SizedBox(height: 150),
Stack(
children: [
Center(
child: CircleAvatar(
radius: radiusSize + 5,
backgroundColor: kDarkCounterColor,
child: CircleAvatar(
backgroundColor: kDarkTheme,
radius: radiusSize,
),
),
),
Center(
child: Padding(
padding: const EdgeInsets.only(top: 35),
child: Text(
'39',
style: GoogleFonts.italiana(
fontSize: 120, color: kDarkCounterColor),
),
),
),
],
),
const SizedBox(height: 15),
const Text(
'Tap To Count',
style: TextStyle(
fontFamily: 'Helvatica',
color: Color(0xff656158),
),
),
Expanded(
child: Align(
alignment: Alignment.bottomRight,
child: SvgPicture.asset(
kDarkThemeImage,
)),
)
],
),
))
this is the code
then the first error appears again. how could I fix this?
You are using the Expanded widget on a column that doesn't have a set size. Try adding MainAxisSize attribute to your column, like this:
Column(
mainAxisSize: MainAxisSize.max, // Add this like
children: [
...
This will make your column fit the whole available size on the previous widget (a scaffold for the whole screen). Then the expanded widget will fill the remaining space not used by the other widgets inside the column.
I am making layout for flutter application
What I want to do is
-----------------------
|[i] [text] |
| |
Icon should be the left (padding 5px)
And text should be the center of screen.
At first I should use the Column
However my layout is not the same proportion
It might be simple though , how can I make it??
Stack() is one of the many options that you can use. Something like this:
Stack(
children:<Widget>[
Padding(
padding: EdgeInsets.only(left: 5),
child: Icon(Icons.info),
),
Align(
alignment: Alignment.topCenter,
child: Text("I'm on the top and centered."),
),
],
),
One way you can do this is something like this..
Widget build(BuildContext context) {
return Column(
children: [
Padding(
padding: EdgeInsets.all(5),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Icon(Icons.info),
Text('text'),
Opacity(opacity: 0, child: Icon(Icons.info)),
],
),
),
Padding(
padding: EdgeInsets.all(5),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Icon(Icons.info),
Text('second text'),
Opacity(opacity: 0, child: Icon(Icons.info)),
],
),
),
],
);
}
Result:
I might be late, but I want this answer to be there, if some one would find it better for the development purposes in future time.
We can make a reusable widget, which we can use it inside the main widget. The widget will accept text, and icon to be passed when called
// IconData is the data type for the icons
Widget myWidget(String text, IconData icon) => Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
children: [
// this will be used a left-padding param
SizedBox(width: 20.0),
// using it here
Icon(icon, size: 28.0, color: Colors.greenAccent),
SizedBox(width: 5.0),
// this will take the remaining space, and then center the child
Expanded(child: Center(child: Text(text)))
]
);
To use in the main Widget, just do like this:
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
// calling our widget here
myWidget('FirstText', Icons.alarm),
SizedBox(height: 20.0), // this is used as a top margin
myWidget('SecondText', Icons.notifications)
]
)
If you wanna check out the sources which I used, please see:
Expanded class
SizedBox class
The result you will get is this:
This was an answer I gave a while ago for this same issue, but the other situation was vertical (a Column) instead of horizontal (a Row). Just swap the Row and Columns out for a Column and Rows in this example and you'll get the idea.
My code has grey added in order to show the difference between the two approaches.
A Stack will work, but it's overkill for this, this kind of problem is part of why we have Expandeds and Flexibles. The trick is to use three Flexibles (2 Expandeds and a Spacer). Put the Spacer on top. It and the bottom Expanded must have the same flex value in order to center the middle Expanded.
import 'package:flutter/material.dart';
class CenteringOneItemWithAnotherItemInTheColumn extends StatelessWidget {
const CenteringOneItemWithAnotherItemInTheColumn({
Key key,
}) : super(
key: key,
);
/// Adjust these values as needed
final int sameFlexValueTopAndBottom = 40; // 40%
final int middleFlexValue = 20; // 20%
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Column Alignment Question'),
),
body: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Spacer(),
const Text(
'Cent',
style: TextStyle(
fontSize: 64,
),
),
const Spacer(),
const Text(
'Bot',
style: TextStyle(
fontSize: 64,
),
),
],
),
Column(
children: <Widget>[
/// The key is to have the Spacer and the bottom Expanded
/// use the same value for flex. That will cause the middle
/// child of the Column to be centered vertically.
Expanded(
flex: sameFlexValueTopAndBottom,
child: Container(
width: 100,
color: Colors.grey[300],
),
),
Expanded(
flex: middleFlexValue,
child: const Align(
alignment: Alignment.center,
child: Text(
'Cent',
style: TextStyle(
fontSize: 64,
),
),
),
),
Expanded(
flex: sameFlexValueTopAndBottom,
child: Container(
color: Colors.grey[300],
child: const Align(
alignment: Alignment.bottomCenter,
child: Text(
'Bot',
style: TextStyle(
fontSize: 64,
),
),
),
),
),
],
),
],
),
);
}
}
Hi I am new to Flutter and I came across this error that is in the title I looked here as well but nothing seems to help, the layout looks just fine when I star the app however I am getting an error which drives me crazy. One of the solutions that I found was to add resizeToAvoidBottomPadding: false which I did but the error is still present.
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomPadding: false,
body: Stack(
children: <Widget>[
Container(
padding: EdgeInsets.symmetric(horizontal: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
flex: 3,
child: SizedBox(),
),
_title(),
SizedBox(
height: 50,
),
_displayUserNameAndPassword(),
SizedBox(
height: 20,
),
_submitButton(),
Container(
padding: EdgeInsets.symmetric(vertical: 10),
alignment: Alignment.centerRight,
child: Text('Forgot Password ?',
style:
TextStyle(fontSize: 14, fontWeight: FontWeight.w500)),
),
_divider(),
_facebookButton(),
Expanded(
flex: 2,
child: SizedBox(),
),
],
),
),
Align(
alignment: Alignment.bottomCenter,
child: _createAccountLabel(),
),
],
),
);
}
You need to use ListView instead of Column.
In column when keyboard appears for text field it caused renderflexed overflow error.
Thanks
I'm attempting to layout some buttons in a flutter app towards the bottom of the screen as seen here:
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
centerTitle: true,
),
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('images/foo.jpeg'),
fit: BoxFit.cover),
),
child: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 10),
child: _buttonsOne(),
),
Expanded(
child: Text(''),
),
Padding(
padding: EdgeInsets.only(bottom: 10),
child: _buttonsTwo(),
),
],
),
),
);
Counter buttons is setup thusly:
Widget _buttonsTwo() {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
_oneButton(),
_twoButton(),
_threeButton(),
_fourButton()
],
);
}
My problem is two of the buttons are using glyphs that cause them to be just right of center. Prior to attempting this layout I structured raised buttons with columns so that I could use an Align to pull these icons to the left a bit, as seen here for one of the buttons:
Widget _threeButton() {
return RaisedButton(
onPressed: () {},
elevation: 10,
color: Colors.red,
textColor: Colors.white,
padding: EdgeInsets.all(10.0),
child: Column(
children: <Widget>[
Align(
alignment: Alignment(-0.4, 0),
child: Icon(
Class.icon_name,
size: 30,
),
),
Text(
_fooCount.toString(),
style: TextStyle(fontSize: 25),
)
],
),
);
}
And here's the result I'm getting:
As you can see, the icons for the two rightmost buttons are still a little to the right. I've tried using RaisedButton.icon to no avail as it causes the icons to overlap the text, even restructuring them in a row to try and make wider buttons. What am I missing?
Try using Transform widget instead of Align and translate the X axis:
Transform(
transform: Matrix4.identity()..translate(-7.0),
child: Icon(
FiveRingsDB.conflict_political,
size: 30,
),
),
Text(
_militaryCount.toString(),
style: TextStyle(fontSize: 25),
)