Code:
new Container(
alignment: FractionalOffset.center,
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
new FlatButton(
child: new Text('Don\'t have an account?', style: new TextStyle(color: Color(0xFF2E3233))),
),
new FlatButton(
child: new Text('Register.', style: new TextStyle(color: Color(0xFF84A2AF), fontWeight: FontWeight.bold),),
onPressed: moveToRegister,
)
],
),
),
And here is the result:
https://www.dropbox.com/s/sxklyutyvbbura8/Screenshot_20181104-150928.png?dl=0
How to fix that the two FlatButton
elements are side by side without space between the center of the screen width?
This question is related to
flutter
dart
flutter-layout
Row(
children: <Widget>[
Flexible(
child: TextFormField()),
Container(width: 20, height: 20),
Flexible(
child: TextFormField())
])
This works for me, there are 3 widgets inside row: Flexible, Container, Flexible
MainAxisAlignment
start - Place the children as close to the start of the main axis as possible.
end - Place the children as close to the end of the main axis as possible.
center - Place the children as close to the middle of the main axis as possible.
spaceBetween - Place the free space evenly between the children.
spaceAround - Place the free space evenly between the children as well as half of that space before and after the first and last child.
spaceEvenly - Place the free space evenly between the children as well as before and after the first and last child.
Example:
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text('Row1'),
Text('Row2')
],
)
You can use Spacers if all you want is a little bit of spacing between items in a row. The example below centers 2 Text widgets within a row with some spacing between them.
Spacer creates an adjustable, empty spacer that can be used to tune the spacing between widgets in a Flex
container, like Row
or Column
.
In a row
, if we want to put space between two widgets such that it occupies all remaining space.
widget = Row (
children: <Widget>[
Spacer(flex: 20),
Text(
"Item #1",
),
Spacer(), // Defaults to flex: 1
Text(
"Item #2",
),
Spacer(flex: 20),
]
);
I believe the original post was about removing the space between the buttons in a row, not adding space.
The trick is that the minimum space between the buttons was due to padding built into the buttons as part of the material design specification.
So, don't use buttons! But a GestureDetector instead. This widget type give the onClick
/ onTap
functionality but without the styling.
See this post for an example.
To make an exact spacing, I use Padding
. An example with two images:
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Expanded(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Image.asset('images/user1.png'),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Image.asset('images/user2.png'),
),
)
],
),
There are many ways of doing it, I'm listing a few here:
Use SizedBox
if you want to set some specific space
Row(
children: <Widget>[
Text("1"),
SizedBox(width: 50), // give it width
Text("2"),
],
)
Use Spacer
if you want both to be as far apart as possible.
Row(
children: <Widget>[
Text("1"),
Spacer(), // use Spacer
Text("2"),
],
)
Use mainAxisAlignment
according to your needs:
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly, // use whichever suits your need
children: <Widget>[
Text("1"),
Text("2"),
],
)
Use Wrap
instead of Row
and give some spacing
Wrap(
spacing: 100, // set spacing here
children: <Widget>[
Text("1"),
Text("2"),
],
)
Just add "Container(width: 5, color: Colors.transparent)," between elements
new Container(
alignment: FractionalOffset.center,
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
new FlatButton(
child: new Text('Don\'t have an account?', style: new TextStyle(color: Color(0xFF2E3233))),
),
Container(width: 5, color: Colors.transparent),
new FlatButton(
child: new Text('Register.', style: new TextStyle(color: Color(0xFF84A2AF), fontWeight: FontWeight.bold),),
onPressed: moveToRegister,
)
],
),
),
Source: Stackoverflow.com