CODEWITHSUNDEEP
dartflutter
Filip
Filip

Reputation: 2411

How to fill the row with two buttons?

How to make two buttons expand equally over the entire width of the Navigation Drawer?

Actual vs Required

Upvotes: 5

Views: 30672

Answers (4)

MosesAyo
MosesAyo

Reputation: 433

Container(
            height: 100,
            child: Row(
              children : <Widget>[
              Expanded(
                  child: RaisedButton(
                          onPressed: () {},
                          color: Color(0xff0000ff),
                          child: Text("Left Button", style: TextStyle(color: Colors.white),)
                        )
                      ),
              Expanded(
                  child: RaisedButton(
                          onPressed: () {},
                          color: Color(0xffd4d4d4),
                          child: Text("Right Button")
                        )
                      ),
              ])
          )

Upvotes: 1

Doc
Doc

Reputation: 11661

The main thing will be

        ListTile(
          title: Row(
            children: <Widget>[
              Expanded(child: RaisedButton(onPressed: () {},child: Text("Clear"),color: Colors.black,textColor: Colors.white,)),
              Expanded(child: RaisedButton(onPressed: () {},child: Text("Filter"),color: Colors.black,textColor: Colors.white,)),
            ],
          ),
        )

Result

Complete Code

class SO extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: <Widget>[
            DrawerHeader(
              child: Text('Drawer Header'),
              decoration: BoxDecoration(
                color: Colors.blue,
              ),
            ),
            ListTile(
              title: Text('Item 1'),
              onTap: () {
                // Update the state of the app
                // ...
              },
            ),
            ListTile(
              //contentPadding: EdgeInsets.all(<some value here>),//change for side padding
              title: Row(
                children: <Widget>[
                  Expanded(child: RaisedButton(onPressed: () {},child: Text("Clear"),color: Colors.black,textColor: Colors.white,)),
                  Expanded(child: RaisedButton(onPressed: () {},child: Text("Filter"),color: Colors.black,textColor: Colors.white,)),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}

Upvotes: 28

Devarsh Ranpara
Devarsh Ranpara

Reputation: 1122

This worked for me

Row(
              children: <Widget>[
                RaisedButton(
                  onPressed: () {
                    Route route =
                        MaterialPageRoute(builder: (context) => MinionFlare());
                    Navigator.push(context, route);
                  },
                  child: SizedBox(
                    width: MediaQuery.of(context).size.width * 0.4,
                    child: Text("Minion"),
                  ),
                ),
                RaisedButton(
                  onPressed: () {
                    Route route = MaterialPageRoute(
                        builder: (context) => EmojiRatingBar());
                    Navigator.push(context, route);
                  },
                  child: SizedBox(
                      width: MediaQuery.of(context).size.width * 0.4,
                      child: Text("Emoji")),
                ),
              ],
            ),

Upvotes: 1

Rjulcaa
Rjulcaa

Reputation: 123

You can wrap each button with Expanded.

Row(
children : <Widget>[
 Expanded(
    child: Button(
            child: Text("Clear")
           )
         ),
Expanded(
    child: Button(
            child: Text("Filter")
           )
         ),
])

Upvotes: 1

Related Questions