Basic Routing in GetX

Last time I have introduced GetX implementation and the components of GetX. You may have a question in your head about the routing/paging between pages, and how to switch the pages in GetX. So today I am going to tell you about the basic routing pages using GetX. It is the simplest way to switch the page, so the beginners using GetX can do page transitions with a few lines of code!

Prerequisites

In my Flutter project, I have 3 folders, which are counter_get, get_jump_one and page_zero, and all of them include a page. And of course, we have main.dart, which is the entry point of the app. The directory tree is as follows.

Directory Tree of My Project

Implementation

Since we need to have a helper to manage the paging stuff in our project, we are going to open a file called RouteConfig.dart, which includes all of the pages and the routing function. Keep in mind that this is only applicable in GetX, as we use the function in GetX library.

RouteConfig.dart

class RouteConfig {
  static const String main = "/";
  static const String firstPage = "/firstPage";
  static const String secondPage = "/secondPage";

  static final List<GetPage> getPages = [
    GetPage(name: main, page: () => CounterGetPage(), transition: Transition.rightToLeft),
    GetPage(name: firstPage, page: () => GetJumpOnePage(),transition: Transition.rightToLeft),
    GetPage(name: secondPage, page: () => PageZeroPage(),transition: Transition.rightToLeft),
  ];
}

Three pages have been named as main, firstPage, and secondPage in the above codes, while GetPage is the routing in GetX (get_route). Create a list of GetPage to insert all of the pages of the project, mapping with the names and the page view.dart file. For example, I have named the class CountGetPage in counter_get/view.dart and I want this page as my main page, so I need to map CountGetPage to the page parameter when I create a GetPage object. Besides, you can add a page transition to each page if you want to, and I have added right to left transition in this example.

For the last step, go to main.dart and change the routing method as GetMaterialApp in MyApp class.

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      initialRoute: RouteConfig.main,
      getPages: RouteConfig.getPages,
    );
  }
}

Remember to include the initialRoute, which is the first page you want to display when entering the app, and getPages for the list of pages that we have already created in RouteConfig. It is an essential step, if you forget to include these parameters, your page routing will not be successful.

How to change my page in some trigger points?

That’s simple. You can just add a line of code in your trigger point, like a button in the view layer, to go to another page.

IconButton(onPressed: ()=>Get.toNamed(RouteConfig.firstPage),
    icon: Icon(Icons.add)
)

In this example, an IconButton is added to one of the page’s view layer files. I want to change the page when the user clicks this IconButton to firstPage, so Get.toNamed(RouteConfig.firstPage) is used and RouteConfig will help me push the page to firstPage.

Conclusion and Review GetX

GetX makes the coding process more convenient and it is like a gold finger in Flutter. If you want to make your project easier for development, you can use GetX. However, people would say GetX is an anti-pattern and ruined the original structure of Flutter, I think that you can use other state management such as BLoC that I have mentioned in the previous article if you want to build a good and comprehensive project. Both state managements are very popular in Flutter, if you have time, there is no harm to learn both of them! Clap for support and happy hacking~