Is setting height and width of buttons considered hard coding?

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

@cmd_prompter: Well, nothing's wrong with it on the device I am running it, but if running on multiple devices there might be issues displaying the UI. — Gigili, Jun 17 '20 at 09:33

score 0 · Answer 1 · answered Jun 17 '20 at 09:41

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

score 0 · Answer 2 · answered Jun 17 '20 at 10:12

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.

Is setting height and width of buttons considered hard coding?

2 Answers2