CODEWITHSUNDEEP
flutterdartflutter-layout
Liam Hemphill
Liam Hemphill

Reputation: 75

How to fit two button within a row ? Flutter

I am new to flutter and I was wondering if someone can help me with my row of buttons. They both work outside of the row but not within it. I have attached the code below please let me know if you can help or need more information.

 Expanded(
              child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: <Widget>[
                IconButton(
                icon: Icon(Icons.edit),
                )
                      floatingActionButton: FloatingActionButton(
                        child: Icon(Icons.add),
                        onPressed: () async {
                          Navigator.push(
                            context,
                            MaterialPageRoute(
                              builder: (context) => StudyPage(
                                title: 'Add a study',
                                selected: 0,
                              ),
                            ),
                          );
                        },
                      ),
        ],
            )
          ],
            ),

Upvotes: 1

Views: 2960

Answers (3)

Esmaeil Ahmadipour
Esmaeil Ahmadipour

Reputation: 1192

I little modified your (Row) code as follows and now it works.

Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: <Widget>[

    IconButton(
      icon: const Icon(Icons.edit),
      onPressed: () {},
    ),

        FloatingActionButton(
          child: const Icon(Icons.add),
          onPressed: () async {
             Navigator.push(
               context,
               MaterialPageRoute(
                 builder: (context) => StudyPage(
                   title: 'Add a study',
                   selected: 0,
                 ),
               ),
             );
          },
        ),


  ]),

Upvotes: 2

Tuan
Tuan

Reputation: 2433

First. Expanded only work when place inside Colum/Row children.

  • Expanded will take all space of parent Colum/Row and expand Colum/Row size it possible.
  • If you want Colum/Row to max size, try add mainAxisSize: MainAxisSize.max to Colum/Row instead.

Second. Your code look like has error when floatingActionButton not is a Widget when you place in Colum/Row children, it is a props of Scaffold. Try to replace it by a valid button like IconButton/ElevatedButton/etc.... Your IconButton missing onPressed too.

Example:

            Row(
              mainAxisSize: MainAxisSize.max,
              children: [
                Expanded( // Place `Expanded` inside `Row`
                  child: ElevatedButton(
                    child: Text('First button'),
                    onPressed: () {}, // Every button need a callback
                  ),
                ),
                Expanded( // Place 2 `Expanded` mean: they try to get maximum size and they will have same size
                  child: ElevatedButton(
                    child: Text('Second button'),
                    onPressed: () {},
                  ),
                ),
              ],
            )

enter image description here

Upvotes: 0

Adil Naseem
Adil Naseem

Reputation: 1461

As far as I know, you can try this

Row(children:[
    Expanded(
      child:
            IconButton(
                icon: Icon(Icons.edit),
                )),
     Expanded(
      child:
            IconButton(
                icon: Icon(Icons.edit),
                )),
     
    ]);

if it solve your problem, kindly accept it as an answer so that others will get help

Upvotes: 1

Related Questions