Я пытаюсь создать Channel Rack, как мы можем найти в FlStudio для проекта. Пользователь должен иметь возможность добавлять «Шаги» или «Канал» в сетку, а каждая кнопка, составляющая сетку, должна изменять свой размер, чтобы занимать как можно больше места. Для этого я просто использовал два разных List.generate: один возвращает строки, а второй возвращает контейнеры. Вот код:
child: Column(
children: <Widget>[
//GRID ------------
Expanded(
child: FittedBox(
fit: BoxFit.fill,
child: Padding(
padding: EdgeInsets.fromLTRB(10, 40, 10, 25),
child: Column(
children: List.generate(countChanel, (indexChanel) {
return Row(
children: List.generate(countSteps, (indexBtn) {
return GestureDetector(
onTap: () {
chanelList[indexChanel].stepList[indexBtn].state = !chanelList[indexChanel].stepList[indexBtn].state;
setState(() {});
},
child: Container(
margin: EdgeInsets.all(4),
decoration: BoxDecoration(
color: (chanelList[indexChanel].stepList[indexBtn].state) ? Colors.blue[900] : Colors.grey[300],
border: Border.all(
color: tracker[indexBtn].onTime ? Colors.blue : Colors.black,
width: tracker[indexBtn].onTime ? 1 : 1,
),
),
child: FlatButton(), //TODO : Remplacer FlatButton par autre chose pour gagner en puissance de calcule
),
);
}),
);
}),
),
),
),
),
Вот результат с 5 каналами по 16 кнопок и 2 каналами по 4 кнопки:
Моя проблема в том, что я должен предоставить дочерний элемент для моего виджета-контейнера (в моем случае это FlatButton), иначе он не будет отображаться так, как мне нужно. Дело в том, что когда я делаю это, реактивность приложения намного медленнее, чем если бы я использовал текстовый виджет. Поэтому, если я нажму «Контейнер», потребуется некоторое время, прежде чем отобразится синий цвет (это очень заметно, если есть, скажем, 10 каналов и 32 шага).
Есть ли у кого-нибудь советы по улучшению реактивности? моего приложения? Я очень плохо знаком с OOP, поэтому он может объяснить, почему мой код такой плохой:)
Заранее благодарю за возможные ответы и хорошего дня