Expand multiple widgets to full width in a row in Flutter? - flutter

Question

I'm trying to get a button in Flutter to expand to its parent width and dynamically expand as more widgets are added. For example, if there are two buttons in a row, they will expand to 50% width each, for three buttons 33% etc.
I tried width: Double.infinite which works for a single button. Understandably, this would not work for multiple buttons since the width is unconstrained and Flutter does not know how to size the element.
I tried all sorts of properties, SizedBox, crossAxisAlignment, Expanded but they don't seem to work.
What I am trying to achieve would be something similar to this: https://bulma.io/documentation/columns/basics/ - a flex based column layout.
App.dart
class App extends StatelessWidget {
Widget build(BuildContext context) {
return MaterialApp(
// theme: WhisperyTheme,
// theme: ThemeData(fontFamily: "Overpass"),
home: Scaffold(
body: Center(
child: Column(
children: <Widget>[
LongButton(
onTap: () => null,
text: "Primary Button",
),
Row(
children: <Widget>[
LongButton(
onTap: () => null,
text: "Secondary Button",
),
LongButton(
onTap: () => null,
text: "Secondary Button",
),
],
)
],
),
),
),
);
}
}
Button.dart
#override
Widget build(BuildContext context) {
return Container(
constraints: BoxConstraints(maxHeight: 40.0),
margin: EdgeInsets.all(15),
height: 40.0,
decoration: BoxDecoration(border: Border.all(width: 1.5)),
child: Material(
color: Colors.transparent,
child: InkWell(
onTap: _onTap,
child: Center(
child: Text(_text),
),
),
),
);
}

Answer 1

You can wrap your button with Flexible widget, its default flex parameter is 1, so the space will be divided equally between all the widgets:
Row(
children: <Widget>[
Flexible(
child: LongButton(
onTap: () => null,
text: 'Secondary Button',
),
),
Flexible(
child: LongButton(
onTap: () => null,
text: 'Secondary Button',
),
),
],
)