I have been utilizing Flutter for a few days and I am struggling to make my buttons change in dimension. At present, I am utilizing two ElevatedButtons with CircleBorder shapes, inside a row inside a column that additionally accommodates a daily ElevatedButton. What I want is for the buttons to all increase to take up the complete width of the row with only a little bit of margin across the edges. Thanks.
I’ve used the colors simply to spotlight the realm taken up by the container, row and buttons respectively.
That is the form of format I am making an attempt to go for:
residence.dart:
class MyHomePage extends StatelessWidget {
const MyHomePage({tremendous.key});
@override
Widget construct(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: const Textual content("Choose Holes"),
),
physique: Container(
colour: Colours.lightGreenAccent,
little one: const Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
kids: <Widget>[
SizedBox(height: 30),
HoleSelectionButtons(),
GoButton()
],
),
),
);
}
}
buttons.dart:
class HoleSelectionButtons extends StatelessWidget {
const HoleSelectionButtons({tremendous.key});
@override
Widget construct(BuildContext context) {
// TODO: Change dimension and format of buttons
return Container(
colour: Colours.redAccent,
little one: const Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
kids: <Widget>[
HoleButton(holes: 9),
HoleButton(holes: 18),
],
),
);
}
}
class HoleButton extends StatelessWidget {
const HoleButton({
required this.holes,
tremendous.key,
});
last int holes;
@override
Widget construct(BuildContext context) {
return Container(
colour: Colours.blueAccent,
little one: Shopper<AppState>(
builder: (context, state, little one) => ElevatedButton(
type: ElevatedButton.styleFrom(
form: const CircleBorder(),
backgroundColor: state.holeCount() == holes ? Colours.blue : Colours.gray,
// TODO: Make this come from the theme, or at the very least make it a greater color
),
onPressed: () {
state.setHoleCount(holes);
},
little one: Textual content(holes.toString()),
),
),
);
}
}