Is setting height and width of buttons considered hard coding? - flutter

Question

I am trying to improve the UI of my Xylophone app. So at first, all the buttons were expanded vertically and stretched horizontally. But now I want to have different sizes of buttons and their sizes must change in a decreasing order. This is what it looks like:
But I feel like I am not doing it right! Is this considered hard coding?
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: SafeArea(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
child: FlatButton(
child: Text(
'A',
style: TextStyle(
fontSize: 30,
color: Colors.white,
),
),
color: Colors.red,
onPressed: () {
playSound(1);
},
),
),
SizedBox(
height: 5,
),
Expanded(
child: Padding(
padding: const EdgeInsets.only(
left: 8.0,
right: 8.0,
),
child: FlatButton(
child: Text(
'B',
style: TextStyle(
fontSize: 30,
color: Colors.white,
),
),
color: Colors.orange,
onPressed: () {
playSound(2);
},
),
),
),
SizedBox(height: 5.0,),
Expanded(
child: Padding(
padding: const EdgeInsets.only(
left: 16.0,
right: 16.0,
),
child: FlatButton(
child: Text(
'C',
style: TextStyle(
fontSize: 30,
color: Colors.white,
),
),
color: Colors.yellow,
onPressed: () {
playSound(3);
},
),
),
),
SizedBox(height: 5.0,),
Expanded(
child: Padding(
padding: const EdgeInsets.only(
left: 24.0,
right: 24.0,
),
child: FlatButton(
child: Text(
'D',
style: TextStyle(
fontSize: 30,
color: Colors.white,
),
),
color: Colors.green,
onPressed: () {
playSound(4);
},
),
),
),
SizedBox(
height: 10,
),
Expanded(
child: Padding(
padding: const EdgeInsets.only(
left: 32,
right: 32,
),
child: FlatButton(
child: Text(
'E',
style: TextStyle(
fontSize: 30,
color: Colors.white,
),
),
color: Colors.teal,
onPressed: () {
playSound(5);
},
),
),
),
SizedBox(
height: 7.0,
),
Expanded(
child: Padding(
padding: const EdgeInsets.only(
left: 40.0,
right: 40.0,
),
child: FlatButton(
child: Text(
'F',
style: TextStyle(
fontSize: 30,
color: Colors.white,
),
),
color: Colors.blue,
onPressed: () {
playSound(6);
},
),
),
),
SizedBox(
height: 10,
),
Expanded(
child: Padding(
padding: const EdgeInsets.only(
left: 48.0,
right: 48.0,
),
child: FlatButton(
child: Text(
'G',
style: TextStyle(
fontSize: 30,
color: Colors.white,
),
),
color: Colors.purple,
onPressed: () {
playSound(7);
},
),
),
),
],
),
),
),
);
}

Answer 1

You can use the flutter_screenutil package or set measurements as a percentage of the device's screen size width/height like so:
#override
Widget build(BuildContext context) {
final height = MediaQuery.of(context).size.height;
final width = MediaQuery.of(context).size.width;
return Column(children:[
SizedBox(height: 0.05*height,),
Expanded(
child: Padding(
padding: const EdgeInsets.only(
left: 0.1*width,
right: 0.1*width,
),]
);
}

Answer 2

I'd suggest that you store the properties in a list, then iterate over this list to create the children dynamically.
This will also allow you to set the size based on the current index (which is also the id of the sound you want to play).
This will separate your data from the code that creates the children, and should make it easy to change.