How to fill the row with two buttons? - dart

Question

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

Answer 1

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

Answer 2

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

Answer 3

You can wrap each button with Expanded.
Row(
children : <Widget>[
Expanded(
child: Button(
child: Text("Clear")
)
),
Expanded(
child: Button(
child: Text("Filter")
)
),
])

Answer 4

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