Question 74834 in Flutter Question posted in
The official Flutter documentation can be found here.

Create 2 side-by-side buttons in Flutter

I have a layout that would like to build the following layout:

+-------------------------------+ # wrapped in Scaffold
|           Button 1            |
+-------------------------------+
SizedBox(height: 15)
+-------------------------------+
|           Button 2            |
+-------------------------------+
SizedBox(height: 15)
+-------------------------------+
|           Button 3            |
+-------------------------------+
SizedBox(height: 15)
+-------------+ +---------------+ # wrapped in Wrap
|   Button 4  | |   Button 5    |
+-------------+ +---------------+
Spacer()

All the buttons are ElevatedButton. Here are the codes (I only show the related Scaffold body part):

return Scaffold(
    appBar: AppBar(...), // omitted
    body: SafeArea(
        minimum: const EdgeInsets.all(16.0),
        child: Center(
            child: Column(
                mainAxisSize: MainAxisSize.max,
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                    ElevatedButton(), // Button 1
                    SizedBox(height: 15),
                    ElevatedButton(), // Button 2
                    SizedBox(height: 15),
                    ElevatedButton(), // Button 3
                    SizedBox(height: 15),
                    Wrap(
                        children: [
                            ElevatedButton(style: ButtonStyle(
                                minimumSize: MaterialStateProperty.all<Size>(Size(MediaQuery.of(context).size.width * 0.5, 50)),
                            )), // Button 4
                            ElevatedButton(style: ButtonStyle(
                                minimumSize: MaterialStateProperty.all<Size>(Size(MediaQuery.of(context).size.width * 0.5, 50)),
                            )), // Button 5
                        ]
                    ),
                ]
            )
        )

Currently while using Wrap, the layout has become:

+-------------------------------+
|           Button 1            |
+-------------------------------+

+-------------------------------+
|           Button 2            |
+-------------------------------+

+-------------------------------+
|           Button 3            |
+-------------------------------+

+-------------+ 
|   Button 4  | 
+-------------+ 
+-------------+ 
|   Button 5  | 
+-------------+ 
Spacer()

I tried to replace Wrap with Row, but it shows A RenderFlex overflowed by 32 pixels on the right.. I know it’s due to the Safe Area on each side. Is there a way to let the layout calculate the width of each smaller button automatically (and leave a small gap between the Buttons 4 & 5)?

while using Row, the layout has become:

+-------------------------------+
|           Button 1            |
+-------------------------------+

+-------------------------------+
|           Button 2            |
+-------------------------------+

+-------------------------------+
|           Button 3            |
+-------------------------------+

+---------------+ +---------------+ # wrapped in Row
|   Button 4    | |   Button 5    |
+---------------+ +---------------+ # overflowed on the right by 32px
Spacer()
Tags:

3

Answers


  1. 0

    You can use Expanded widget

    SizedBox(
  height: 50,
  child: Row(
    children: [
      Expanded(
        child: ElevatedButton(
          child: Text("4"),
          onPressed: null,
        ),
      ),
      Expanded(
        child: ElevatedButton(
          child: Text("5"),
          onPressed: null,
        ),
      )
    ],
  ),
),

    Also you should avoid using MediaQuery for response design when ever possible, Use LayoutBuilder if needed.

    More about layout/adaptive-responsive.

    Login or Signup to reply.
  2. 0

    Replace your column with this :

    Column(
                        mainAxisSize: MainAxisSize.max,
                        mainAxisAlignment: MainAxisAlignment.start,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          ElevatedButton(onPressed: () {  }, child: null,), // Button 1
                          const SizedBox(height: 15),
                          ElevatedButton(onPressed: () {  }, child: null,), // Button 2
                          const SizedBox(height: 15),
                          ElevatedButton(onPressed: () {  }, child: null,), // Button 3
                          const SizedBox(height: 15),
                          Row(
                              children: [
                                Expanded(
                                  child: ElevatedButton(style: ButtonStyle(
                                    minimumSize: MaterialStateProperty.all<Size>(Size(MediaQuery.of(context).size.width * 0.5, 50)),
                                  ), onPressed: () {  }, child: null,),
                                ), //
                                const SizedBox(width: 7),// Button 4
                                Expanded(
                                  child: ElevatedButton(style: ButtonStyle(
                                    minimumSize: MaterialStateProperty.all<Size>(Size(MediaQuery.of(context).size.width * 0.5, 50)),
                                  ), onPressed: () {  }, child: null,),
                                ), // Button 5
                              ]
                          ),
                        ]
                    )
    Login or Signup to reply.
  3. 0

    If you want the last two buttons in the row to have equal width and occupy the full width of the row, you can use Expanded widget instead of minimumSize property of ButtonStyle.

    Here’s the updated code:

    Row(
  children: [
    Expanded(
      child: ElevatedButton(
        onPressed: () {},
        child: const Text('Button 4'),
      ),
    ),
    const SizedBox(width: 10),
    Expanded(
      child: ElevatedButton(
        onPressed: () {},
        child: const Text('Button 5'),
      ),
    ),
  ],
),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search