How to use GetX with navigation drawer

[daleffe]

Hi, I'm new to Flutter development and I'm using GetX on my first project.

I created a 'Menu' module that has its controller, binding and view, being responsible for displaying the Navigation Drawer.

My question is: how to correctly inject the HomeView / HomePage widget into the flow? It seems to me that, as I am doing, the onReady, onInit, etc. methods are not being loaded.

To facilitate understanding I will expose parts of the project:

The main.dart file:

import 'package:flutter/material.dart';
import 'package:get/get.dart';

import 'app/utils/dependency_injection.dart';

import 'app/routes/pages.dart';
import 'app/routes/routes.dart';
import 'app/theme/default.dart';

void main() {
  DependencyInjection.init();

  runApp(
    GetMaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'VS OS Mobile',
      getPages: Pages.routes,
      initialRoute: Routes.SPLASH,
      theme: defaultTheme,
      //darkTheme: darkTheme,
    ),
  );
}

My pages and routes and are defined in app/routes/pages.dart:

import 'package:get/get.dart';

import '../modules/splash/binding.dart';
import '../modules/splash/view.dart';
import '../modules/menu/binding.dart';
import '../modules/menu/view.dart';
import '../modules/home/binding.dart';
import '../modules/home/view.dart';
import '../modules/settings/binding.dart';
import '../modules/settings/view.dart';
import '../modules/server/binding.dart';
import '../modules/server/view.dart';

import 'routes.dart';

class Pages {
  static final routes = [
    GetPage(
      name: Routes.SPLASH,
      page: () => SplashView(),
      binding: SplashBinding(),
    ),
    GetPage(
      name: Routes.MENU,
      page: () => MenuView(),
      binding: MenuBinding(),
    ),
    GetPage(
      name: Routes.HOME,
      page: () => HomeView(),
      binding: HomeBinding(),
    ),
    GetPage(
      name: Routes.SETTINGS,
      page: () => SettingsView(),
      binding: SettingsBinding(),
    ),
    GetPage(
      name: Routes.SERVER,
      page: () => ServerView(),
      binding: ServerBinding(),
    )
  ];
}

The SPLASH route will redirect directly to MENU and then the fragment will be showed according to selected option:

import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:get/get.dart';

import 'controller.dart';

import '../../settings/metric.dart';

import '../../../app/routes/routes.dart';

class MenuView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {    
    return GetBuilder<MenuController>(
      builder: (_) => Scaffold(
        appBar: AppBar(
          title: Text(_.title),
          actions: [
            (_.selectedIndex == 1)
                ? Padding(
                    padding: EdgeInsets.only(right: 20.0),
                    child: GestureDetector(
                      onTap: () {
                        Get.toNamed(Routes.SERVER);
                      },
                      child: Icon(
                        Icons.add,
                        size: 26.0,
                      ),
                    ),
                  )
                : SizedBox.shrink(),
          ],
        ),
        drawer: Drawer(
          child: ListView(
            padding: EdgeInsets.zero,
            children: [
              DrawerHeader(
                padding: EdgeInsets.symmetric(
                  vertical: CustomMetrics.PTiny,
                ),
                child: Column(
                  children: [
                    Center(
                      child: Image(
                        image: AssetImage("assets/logo.png"),
                        fit: BoxFit.contain,
                        height: 96,
                        width: 96,
                      ),
                    ),
                    Text(
                      "Vigisoft",
                      style: TextStyle(
                        fontWeight: FontWeight.w400,
                        fontStyle: FontStyle.italic,
                      ),
                    ),
                    Text(
                      "www.vigisoft.com.br",
                      style: TextStyle(
                        fontWeight: FontWeight.w300,
                      ),
                    ),
                  ],
                ),
              ),
              ListTile(
                leading: FaIcon(FontAwesomeIcons.clipboardList),
                selected: _.isSelectedIndex(0),
                title: Text(
                  'Service Orders',
                ),
                onTap: () {
                  _.setSelectedIndex(0);
                  Get.back();
                },
              ),
              ListTile(
                leading: FaIcon(FontAwesomeIcons.cog),
                selected: _.isSelectedIndex(1),
                title: Text(
                  'Settings',
                ),
                onTap: () {
                  _.setSelectedIndex(1);
                  Get.back();
                },
              ),
            ],
          ),
        ),
        body: _.getPage(),
      ),
    );
  }
}

Let's look to the getPage() function:

Widget getPage() {
    switch (selectedIndex) {
      case 0:
        return HomeView();
      case 1:
        return SettingsView();
      default:
        return HomeView();
    }
  }

When i tap the Settings menu option the GETX console shows me: [GETX] "HomeController" deleted from memory, then i go back to Home, console shows: [GETX] "SettingsController" deleted from memory.

How to do, when loading HomeView, its respective controller/binding is loaded and I can use OnReady, etc?

If there's also another more suitable approach, I am grateful, as I am starting with Flutter / Getx.

[eduardoflorence]

@daleffe, in your HomeBinding(), SettingsBinding() and ServerBinding(), instantiate your controller using the permanent property. Example:
Get.put(HomeController(), permanent: true)

[daleffe]

@eduardoflorence, the OnReady method isn't yet being called ... I'll put the bindings here too...

import 'package:get/get.dart';

import 'controller.dart';

class HomeBinding implements Bindings {
  @override
  void dependencies() {
    //Get.lazyPut<HomeController>(() => HomeController(), fenix: true);
    Get.put(HomeController(), permanent: true);
  }
}

My HomeController has the following content:

import 'package:get/get.dart';

class HomeController extends GetxController {
  @override
  void onReady() {
    print("ready home");

    super.onReady();
  }

  @override
  void onInit() {
    print("init home");
    super.onInit();
  }

  @override
  void onClose() {
    print("close home");
    super.onClose();
  }
}

The prints aren't displayed when the application is run and I only see the message that the "HomeController/SettingsController" is deleted from memory (when the navigation drawer pages are switched), but not that it has been initialized and so on.

[eduardoflorence]

I prepared an example for you the way I work with Drawer:

import 'package:flutter/material.dart';
import 'package:get/get.dart';

void main() {
  runApp(GetMaterialApp(
    navigatorKey: Get.key,
    initialRoute: '/home',
    getPages: [
      GetPage(
        name: '/home',
        page: () => Home(),
        binding: HomeBinding(),
      ),
      GetPage(
        name: '/page1',
        page: () => Page1(),
        binding: Page1Binding(),
      ),
      GetPage(
        name: '/page2',
        page: () => Page2(),
        binding: Page2Binding(),
      ),
    ],
  ));
}

class MainDrawer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        padding: EdgeInsets.zero,
        children: <Widget>[
          DrawerHeader(
            child: Text('Drawer Header'),
            decoration: BoxDecoration(
              color: Colors.blue,
            ),
          ),
          ListTile(
            title: Text('Home'),
            tileColor: Get.currentRoute == '/home' ? Colors.grey[300] : null,
            onTap: () {
              print(Get.currentRoute);
              Get.back();
              Get.offNamed('/home');
            },
          ),
          ListTile(
            title: Text('Item 1'),
            tileColor: Get.currentRoute == '/page1' ? Colors.grey[300] : null,
            onTap: () {
              Get.back();
              Get.offNamed('/page1');
            },
          ),
          ListTile(
            title: Text('Item 2'),
            tileColor: Get.currentRoute == '/page2' ? Colors.grey[300] : null,
            onTap: () {
              Get.back();
              Get.offNamed('/page2');
            },
          ),
        ],
      ),
    );
  }
}

class HomeBinding extends Bindings {
  @override
  void dependencies() {
    Get.put(HomeController(), permanent: true);
  }
}

class Home extends GetView<HomeController> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("APP DRAWER")),
      body: Center(
        child: Text('Home'),
      ),
      drawer: MainDrawer(),
    );
  }
}

class HomeController extends GetxController {
  @override
  void onInit() {
    print('>>> HomeController init');
    super.onInit();
  }

  @override
  void onReady() {
    print('>>> HomeController ready');
    super.onReady();
  }
}

class Page1Binding extends Bindings {
  @override
  void dependencies() {
    Get.lazyPut(() => Page1Controller());
  }
}

class Page1 extends GetView<Page1Controller> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Page 1')),
      drawer: MainDrawer(),
      body: Center(
        child: Text(controller.title),
      ),
    );
  }
}

class Page1Controller extends GetxController {
  final title = 'Page 1';

  @override
  void onInit() {
    print('>>> Page1Controller init');
    super.onInit();
  }

  @override
  void onReady() {
    print('>>> Page1Controller ready');
    super.onReady();
  }

  @override
  void onClose() {
    print('>>> Page1Controller close');
    super.onClose();
  }
}

class Page2Binding extends Bindings {
  @override
  void dependencies() {
    Get.lazyPut(() => Page2Controller());
  }
}

class Page2 extends GetView<Page2Controller> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Page 2')),
      drawer: MainDrawer(),
      body: Center(
        child: Text(controller.title),
      ),
    );
  }
}

class Page2Controller extends GetxController {
  final title = 'Page 2';

  @override
  void onInit() {
    print('>>> Page2Controller init');
    super.onInit();
  }

  @override
  void onReady() {
    print('>>> Page2Controller ready');
    super.onReady();
  }

  @override
  void onClose() {
    print('>>> Page2Controller close');
    super.onClose();
  }
}

[daleffe]

Thanks @eduardoflorence works like a charm.

[DominusKelvin]

Hey. So I tried your implementation but it doesn't seem to work for me as I keep getting this error

[nosadaniel]

works for me