Как нажать на каждый элемент BoxDecoration, извлеченный из списка

Question

Я не уверен, смогу ли я реализовать то, что я хочу, с помощью способа настройки кода.

У меня есть домашний экран, наверху которого я объявил ListView, получение информации из файла list.dart. Этот экран с горизонтальной прокруткой дает мне 5 изображений и текст в каждом из них.

Я хотел бы вставить onPressed, указывающий на другие экраны в соответствии с информацией, переданной в этом списке.

Пример: чат, прямо на экран чата.

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Stack(children: <Widget>[
      Container(
        width: double.infinity,
        height: MediaQuery.of(context).size.height * 4 / 7,
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            colors: [Color(0xff40dedf), Color(0xff0fb2ea)],
          ),
        ),
      ),
      Positioned(
        top: 100,
        left: 20,
        child: Container(
          height: 100,
          width: MediaQuery.of(context).size.width,
          child: ListView.builder(
            scrollDirection: Axis.horizontal,
            itemCount: categoryData.length,
            itemBuilder: (context, index) {
              bool isSelected = true;
              if (index == 0) {
                isSelected = true;
              }
              return Row(
                children: <Widget>[
                  Column(
                    children: <Widget>[
                      Container(
                        width: 65,
                        height: 65,
                        decoration: BoxDecoration(
                            color: isSelected
                                ? Colors.transparent
                                : Colors.transparent,
                            borderRadius: BorderRadius.circular(16),
                            border: Border.all(
                              color: Colors.white,
                              width: 1,
                            ),
                            boxShadow: isSelected
                                ? [
                                    BoxShadow(
                                        color: Color(0x14000000),
                                        blurRadius: 10)
                                  ]
                                : null),
                        child: Center(
                          child: Image.asset(categoryData[index].imageUrl),
                        ),
                      ),
                      SizedBox(
                        height: 10,
                      ),
                      Text(
                        categoryData[index].name,
                        style: TextStyle(color: Colors.white, fontSize: 15),
                      ),
                    ],
                  ),
                  SizedBox(
                    width: 20,
                  )
                ],
              );
            },
          ),
        ),
      ),
    ]));
  }
}

Это List.dart, из которого вы получаете информацию:

class MyList {
  final String name;
  final String count;
  final String imageUrl;

  MyList({this.imageUrl, this.name, this.count});
}

А это переменная, используемая для конфигурации:

List<MyList> categoryData = [
  new MyList(imageUrl: "assets/page1/usuario.png", name: "Perfil", count: "1"),
  new MyList(
      imageUrl: "assets/page1/entregas.png", name: "Entregas", count: "2"),
  new MyList(imageUrl: "assets/page1/msg.png", name: "Chat", count: "3"),
  new MyList(
      imageUrl: "assets/page1/configurações.png",
      name: "Configuração",
      count: "4"),
  new MyList(imageUrl: "assets/page1/sair.png", name: "Sair", count: "5"),
];

Answer 1

Вы можете использовать GestureDetector как родительский для каждого Container, созданного вами в качестве кнопки. Документация показывает, что GestureDetector может иметь объявленную функцию onTap, где вы можете определить свой собственный лог маршрутизации c.

Тогда вы можете иметь переключатель case , созданный для определения того, на какой экран необходимо направить приложение, или даже для использования параметра name вашей переменной categoryData.

ListView.builder(
            scrollDirection: Axis.horizontal,
            itemCount: categoryData.length,
            itemBuilder: (context, index) {
              bool isSelected = true;
              if (index == 0) {
                isSelected = true;
              }
              return Row(
                children: <Widget>[
                  Column(
                    children: <Widget>[
                      // Here you add a GestureDetector
                      GestureDetector(
                        onTap: () {
                          // Here you add your navigation logic
                        },
                        child: Container(
                          width: 65,
                          height: 65,
                          decoration: BoxDecoration(
                              color: isSelected
                                  ? Colors.transparent
                                  : Colors.transparent,
                              borderRadius: BorderRadius.circular(16),
                              border: Border.all(
                                color: Colors.white,
                                width: 1,
                              ),
                              boxShadow: isSelected
                                  ? [
                                      BoxShadow(
                                          color: Color(0x14000000),
                                          blurRadius: 10)
                                    ]
                                  : null),
                          child: Center(
                            child: Image.asset(categoryData[index].imageUrl),
                          ),
                        ),
                      ),
                      SizedBox(
                        height: 10,
                      ),
                      Text(
                        categoryData[index].name,
                        style: TextStyle(color: Colors.white, fontSize: 15),
                      ),
                    ],
                  ),
                  SizedBox(
                    width: 20,
                  )
                ],
              );
            },
          ),

Примечание : Вы должны всегда называть свои переменные класса UpperCamelCase во Flutter. Попробуйте изменить имя класса list на более декларативное;)