Flutter: How to add space between two buttons in a row - flutter

Question

I created two container in a row and want it in center of the screen so i used padding for it, but they more are close to each other, i want to add space between them. here is the snap of output.
Code:
Padding(
padding: EdgeInsets.fromLTRB(40, 250, 30, 0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
new Flexible(
flex: 2,
child: Container(
decoration: BoxDecoration(
color: Colors.pink,
borderRadius: BorderRadius.all(Radius.circular(3))),
height: 50,
width: 190,
child: Center(
child: Column(
children: <Widget>[
FlatButton(onPressed: (){}, child: Text("in",style:TextStyle(fontSize: 20))),
],
),
),
),
),
new Flexible(
flex: 2,
child: Container(
decoration: BoxDecoration(
color: Color(int.parse(presentcolor)),
borderRadius: BorderRadius.all(Radius.circular(3))),
height: 50,
width: 190,
child: Center(
child: Column(
children: <Widget>[
FlatButton(onPressed: (){}, child: Text("out",style:TextStyle(fontSize: 20))),
],
),
),
),
),

Answer 1

Use a Spacer or a SizedBox between 2 widgets.
Other option is to set mainAxisAlignment of Row to MainAxisAlignment.spaceBetween.

Answer 2

I started using the Gap package for adding spaces between widgets in rows or columns. Basically you just specify how big the space should be, so an 8px gap would be Gap(8).
Row(
children: [
widget1(),
Gap(8),
widget2(),
]);
The syntax is easy to use and there are special widgets like the MaxGap or SliverGap for specific use cases.

Answer 3

for centering this you can use Center() widget instead of padding and for putting space between the two you can add margin for the first one from the left. the code will be like this:
Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
new Flexible(
flex: 2,
child: Container(
margin: EdgeInsets.only(right: 20),
decoration: BoxDecoration(
color: Colors.pink,
borderRadius: BorderRadius.all(Radius.circular(3))),
height: 50,
width: 190,
child: Center(
child: Column(
children: <Widget>[
FlatButton(onPressed: (){}, child: Text("in",style:TextStyle(fontSize: 20))),
],
),
),
),
),
new Flexible(
flex: 2,
child: Container(
decoration: BoxDecoration(
color: Color(int.parse(presentcolor)),
borderRadius: BorderRadius.all(Radius.circular(3))),
height: 50,
width: 190,
child: Center(
child: Column(
children: <Widget>[
FlatButton(onPressed: (){}, child: Text("out",style:TextStyle(fontSize: 20))),
],
),
),
),
),
you can change righ margin to the suitable value for you.

Answer 4

This is the easiest way to add "Text" containing 4 spaces or or however many spaces you like:
Row(
children: [
Flexible(),
Text(" "),
Flexible(),
]);