CODEWITHSUNDEEP
flutterbuttoncontainersspace
TimeToCode
TimeToCode

Reputation: 1838

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

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.

enter image description here

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))),
                          ],
                        ),
                      ),
                    ),
                  ),

Upvotes: 1

Views: 5205

Answers (5)

R M Vivek
R M Vivek

Reputation: 54

enter image description here[! Row( children: [ Expanded( child: ElevatedButton( onPressed: () {}, child: Text("Login",), ), ), SizedBox(width: 10,), Expanded( child: ElevatedButton( child: Text("Register"), onPressed: () {}, ), )

Upvotes: 0

Sapto Sutardi
Sapto Sutardi

Reputation: 456

This is the easiest way to add "Text" containing 4 spaces or or however many spaces you like:

Row(
  children: [
    Flexible(),
    Text("    "),
    Flexible(),
  ]);

Upvotes: 1

Benyamin
Benyamin

Reputation: 1154

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.

Upvotes: 1

Code on the Rocks
Code on the Rocks

Reputation: 17784

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.

Upvotes: 2

Tirth Patel
Tirth Patel

Reputation: 5746

Use a Spacer or a SizedBox between 2 widgets.

Other option is to set mainAxisAlignment of Row to MainAxisAlignment.spaceBetween.

Upvotes: 3

Related Questions