Функция вызова флаттера для каждого элемента в списке

Question

У меня есть сетка 2x2, которую я пытаюсь заполнить картами, где каждая карта имеет определенный стиль. Каждая карточка имеет название и маршрут, который при нажатии открывает другую страницу (маршрут). Я хотел бы указать «имя» карты и «имя страницы», к которому должен привести клик для каждого «имени» в индексе «имен».

Проблема в 1. Я не уверен, как сделать цикл for-each внутри виджета. 2. Не уверен, как заставить это работать для более чем одного параметра; название карты и название новой страницы.

Я уже попробовал несколько вариантов, 2 из которых показаны ниже.

class SubjectsPage extends StatefulWidget {

  @override
  _SubjectsPageState createState() => new _SubjectsPageState();
}

class _SubjectsPageState extends State<SubjectsPage> with TickerProviderStateMixin {

  @override
  Widget build(BuildContext context) {
    var names = ["one", "two", "three", "four"];
        return new Material(     
          child: new Container(
            child: new Center(
              child: GridView.count(
                crossAxisCount: 2,
                padding: EdgeInsets.fromLTRB(16.0, 128.0, 16.0, 16.0),
                childAspectRatio: 8.0 / 8.5,
                children: <Widget>[

                  //option 1
                  names.forEach((unit) => Cards(unit: unit,)),

                  //option 2
                  for (var i = 0; i < names.length; i++) {
                    Cards(unit: names[i])
                  }

            ],
          ), 
        ),
      ),
    );
  }
}

Ошибка для варианта 1 заключается в том, что «здесь выражение имеет тип« void »и поэтому не может использоваться».

Ошибка для варианта 2 заключается в том, что «тип элемента« Set »не может быть назначен типу списка« Widget »».

Answer 1

Да, вы не можете использовать forEach, но map.Вы можете отобразить строки в виджет, используя метод map.

Пример:

class SubjectsPage extends StatefulWidget {
  @override
  _SubjectsPageState createState() => new _SubjectsPageState();
}

class _SubjectsPageState extends State<SubjectsPage>
    with TickerProviderStateMixin {
  @override
  Widget build(BuildContext context) {
    var names = ["one", "two", "three", "four"];
    return Material(
      child: Container(
        child: Center(
          child: GridView.count(
            crossAxisCount: 2,
            padding: EdgeInsets.fromLTRB(16.0, 128.0, 16.0, 16.0),
            childAspectRatio: 8.0 / 8.5,
            children: names.map((String name) {
              return Cards(unit: name);
            }).toList(),
          ),
        ),
      ),
    );
  }
}

Или: Ваш второй вариант может быть выполнен как

class SubjectsPage extends StatefulWidget {
  @override
  _SubjectsPageState createState() => new _SubjectsPageState();
}

class _SubjectsPageState extends State<SubjectsPage>
    with TickerProviderStateMixin {
  @override
  Widget build(BuildContext context) {
    var names = ["one", "two", "three", "four"];
    return Material(
      child: Container(
        child: Center(
          child: GridView.count(
            crossAxisCount: 2,
            padding: EdgeInsets.fromLTRB(16.0, 128.0, 16.0, 16.0),
            childAspectRatio: 8.0 / 8.5,
            children: [
                for(String name in names) Cards(unit:name)
            ],
          ),
        ),
      ),
    );
  }
}

Надеюсь, что это поможет!