How to fit two button within a row ? Flutter

Question

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

Answer 1

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,
                 ),
               ),
             );
          },
        ),


  ]),

Answer 2

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

Answer 3

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: () {},
                  ),
                ),
              ],
            )