Есть ли способ переключаться с одной страницы на другую?

Question

Я разрабатываю приложение с использованием флаттера, мне нужно отобразить первую страницу, и я создал дополнительные страницы. Моя проблема в том, что я не знаю, как отображать вторую страницу, когда вы нажимаете на элемент. Пример: я создал сетку из 8 блоков, и каждое поле должно отображать уникальную страницу при нажатии. т.е. элемент 1 возвращает страницу 1, элемент 2 возвращает страницу 2, элемент 3 возвращает страницу 3 ... et c.

вот захват первой страницы

Answer 1

Вы можете добиться этого с помощью следующего примера кода. С помощью навигатора вы можете go перейти на следующую страницу и отобразить ее.

class NavigatorPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: GridView.builder(
          itemCount: 4,
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
          itemBuilder: (BuildContext context, int index) {
            return GestureDetector(
              onTap: () => nextPage(context, index),
              child: Card(
                ...
              ),
            );
          },
        ),
      ),
    );
  }

  void nextPage(BuildContext context, int index) {
    if (index == 0) {
      Navigator.push(context, MaterialPageRoute(builder: (context) => Page1()));
    } else if (index == 1) {
      Navigator.push(context, MaterialPageRoute(builder: (context) => Page2()));
    }
    ...
  }
}

Answer 2

На первом экране напишите этот код.

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (BuildContext context) {
      return SecondScreen()
    );
  },
);

Вы должны импортировать второй экран в файл дротика первого экрана.

Answer 3

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

Обычно хорошей практикой является использование именованных маршрутов ( учебник здесь ), но вам не нужно использовать именованные маршруты для использования навигатора. В вашем примере вы можете указать следующее в аргументе onPressed для каждого элемента:

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (BuildContext context) {
      return PageTwo()
    );
  },
);