Создание представления сетки с несколькими интерактивными элементами (категориями)

Question

Я хочу создать сетку с множественным выбором из двенадцати категорий. У меня проблемы с созданием интерактивной и некликабельной части. Кроме того, как сделать так, чтобы пользователь мог выбирать более одной категории? Как вы можете видеть в приведенном ниже коде, у меня есть около двенадцати категорий в сетке, которые я хочу, чтобы пользователь щелкнул в зависимости от своих интересов, поэтому необходим множественный выбор.

@override
Widget build(BuildContext context) {
  return new Scaffold(
    appBar: AppBar(
      title: const Text('Interests'),
    ),
    resizeToAvoidBottomPadding: false,
    body: GridView.count(
      padding: const EdgeInsets.all(30),
      childAspectRatio: (6 / 1),
      crossAxisSpacing: 10,
      mainAxisSpacing: 10,
      // Create a grid with 1 columns.
      crossAxisCount: 1,
      children: <Widget> [
        Container(
          padding: const EdgeInsets.all(8),
          child: const Text('Food & Drinks'),
          color: Colors.teal[100],
        ),
        Container(
          padding: const EdgeInsets.all(1),
          child: const Text('Sport'),
          color: Colors.teal[200],
        ),
        Container(
          padding: const EdgeInsets.all(8),
          child: const Text('Fitness'),
          color: Colors.teal[300],
        ),
        Container(
          padding: const EdgeInsets.all(8),
          child: const Text('Animals'),
          color: Colors.teal[100],
        ),
        Container(
          padding: const EdgeInsets.all(1),
          child: const Text('Parent hang'),
          color: Colors.teal[200],
        ),
        Container(
          padding: const EdgeInsets.all(8),
          child: const Text('Film'),
          color: Colors.teal[300],
        ),
        Container(
          padding: const EdgeInsets.all(8),
          child: const Text('Explore'),
          color: Colors.teal[100],
        ),
        Container(
          padding: const EdgeInsets.all(1),
          child: const Text('Nature'),
          color: Colors.teal[200],
        ),
        Container(
          padding: const EdgeInsets.all(8),
          child: const Text('Gaming'),
          color: Colors.teal[300],
        ),
        Container(
          padding: const EdgeInsets.all(8),
          child: const Text('Music'),
          color: Colors.teal[100],
        ),
        Container(
          padding: const EdgeInsets.all(1),
          child: const Text('Art'),
          color: Colors.teal[200],
        ),
        Container(
          color: Colors.green,
          padding: const EdgeInsets.all(8),
          child: Center( 
            child: Text('Culture events', style: TextStyle(color: Colors.black)
          ),
        ]
      )
    ); 
  }    
}

Answer 1

Вы можете попробовать использовать этот плагин из пакетов Flutter:

drag_select_grid_view

Answer 2

Вам нужно окружить каждый Container символом Inkwell (если вы хотите эффект пульсации при щелчке) или GestureDetector (если вам просто нужно простое нажатие).

После этого, вам необходимо инициализировать структуру, которая отслеживает, был ли элемент нажат или нет. Например, массив логических значений, который имеет соответствующий индекс как true, если щелкнуть соответствующий элемент.

В методе onTap() вашего окружения Inkwell / GD установите значение в структуре, которую вы создали выше. Кроме того, добавьте индикацию выбора, например, инвертируйте цвета текста и фона, или измените цвет фона, если элемент выбран, а не не выбран.