Kizat Suleimenov
Kizat Suleimenov

Reputation: 177

how to build Navigator() if use Getx?

if we use MaterialApp, we build like this:

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

and now, how to build if we use Getx?

Upvotes: 2

Views: 1925

Answers (2)

Abdulaziz Alnahhas
Abdulaziz Alnahhas

Reputation: 128

From GetX documentation in github, I found this:

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")
            ),
          ),
        ),
      );
    }
  }
),

I think it is useful for your question

Upvotes: 0

Loren.A
Loren.A

Reputation: 5575

Routing in GetX can be setup like so. Note Page1.id is after putting static const id = 'page_1 in Page1 so you don't have to use raw strings.

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

or like this

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()),
      ],
    );
  }
}

You can setup the list of routes on another page if you don't want to clutter up your GetMaterialApp with all your routes.

Then when you want to navigate you can do it like this

Get.to(Page2());

Upvotes: 1

Related Questions