как построить Navigator(), если использовать Getx?

Question

если мы используем MaterialApp, строим так:

      Navigator(
                key: naviKey,
                onGenerateRoute: (routeSettings) => MaterialPageRoute(
                  builder: (context)=>Container(),
                ),
              )

а теперь как строить, если мы используем Getx?

Answer 1

Так можно настроить маршрутизацию в GetX. Примечание Page1.id после помещения static const id = 'page_1 в Page1 поэтому вам не нужно использовать необработанные строки.

      class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      home: Page1(),
      routes: {
        Page1.id: (context) => Page1(),
        Page2.id: (context) => Page2(),
      },
    );
  }
}

или как это

      class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      home: Page1(),
      getPages: [
       GetPage(name: Page1.id, page: () =>  Page1()),
       GetPage(name: Page1.id, page: () =>  Page1()),
      ],
    );
  }
}

Вы можете настроить список маршрутов на другой странице, если не хотите загромождать GetMaterialApp со всеми вашими маршрутами.

Затем, когда вы хотите перемещаться, вы можете сделать это так

      Get.to(Page2());

Answer 2

Из документации GetX на github я нашел это:

      Navigator(
  key: Get.nestedKey(1), // create a key by index
  initialRoute: '/',
  onGenerateRoute: (settings) {
    if (settings.name == '/') {
      return GetPageRoute(
        page: () => Scaffold(
          appBar: AppBar(
            title: Text("Main"),
          ),
          body: Center(
            child: TextButton(
              color: Colors.blue,
              onPressed: () {
                Get.toNamed('/second', id:1); // navigate by your nested route by index
              },
              child: Text("Go to second"),
            ),
          ),
        ),
      );
    } else if (settings.name == '/second') {
      return GetPageRoute(
        page: () => Center(
          child: Scaffold(
            appBar: AppBar(
              title: Text("Main"),
            ),
            body: Center(
              child:  Text("second")
            ),
          ),
        ),
      );
    }
  }
),

Я думаю, что это полезно для вашего вопроса