Считается ли установка высоты и ширины кнопок жестким кодированием?

Question

Я пытаюсь улучшить пользовательский интерфейс своего приложения Xylophone. Итак, сначала все кнопки были расширены по вертикали и растянуты по горизонтали. Но теперь я хочу, чтобы кнопки были разных размеров, и их размеры должны изменяться в порядке убывания. Вот как это выглядит:

Но мне кажется, что я делаю это неправильно! Считается ли это жестким кодированием?

  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

Я бы посоветовал вам сохранить свойства в списке, а затем перебирать этот список для динамического создания дочерних элементов. Это также позволит вам установить размер на основе текущего индекса (который также является идентификатором звука, который вы хотите воспроизвести).

Это отделит ваши данные от кода, который создает дочерние элементы, и должен облегчить изменение.

Answer 2

Вы можете использовать пакет flutter_screenutil или установить измерения в процентах от ширины / высоты экрана устройства, например:

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