GetX New Version and Features

Here we will see some GetX latest features. One of the new features covered in GetX 4.6 is that route disposal when you go to a new screen.

Make sure you have installed the latest version of GetX 4.6.6

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      initialRoute: "/first",
      getPages: [
        GetPage(
            participatesInRootNavigator: true,
            name: '/first',
            page: () => const First()),
        GetPage(
          name: '/second',
          page: () => const Second(),
          transition: Transition.downToUp,
        ),
        GetPage(
          name: '/third',
          page: () => const Third(),
        ),
      ],
      debugShowCheckedModeBanner: false,
    );
  }
}

class FirstController extends GetxController {
  @override
  void onClose() {
    print('on close first');
    super.onClose();
  }
}

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

  @override
  Widget build(BuildContext context) {
    print('First rebuild');
    Get.put(FirstController());
    return Scaffold(
      appBar: AppBar(
        title: const Text('page one'),
        leading: IconButton(
          icon: const Icon(Icons.more),
          onPressed: () {
            print('THEME CHANGED');
            Get.changeTheme(
                Get.isDarkMode ? ThemeData.light() : ThemeData.dark());
          },
        ),
      ),
      body: Center(
        child: SizedBox(
          height: 300,
          width: 300,
          child: ElevatedButton(
            onPressed: () {
              Get.toNamed('/second?id=123');
            },
            child: const Text('next screen'),
          ),
        ),
      ),
    );
  }
}

class SecondController extends GetxController {
  final textEdit = TextEditingController();
  @override
  void onClose() {
    print('on close second');
    textEdit.dispose();
    super.onClose();
  }
}

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

  @override
  Widget build(BuildContext context) {
    final controller = Get.put(SecondController());
    print('second rebuild');
    return Scaffold(
      appBar: AppBar(
        title: Text('page two ${Get.parameters["id"]}'),
      ),
      body: Center(
        child: Column(
          children: [
            Expanded(
                child: TextField(
                  controller: controller.textEdit,
                )),
            SizedBox(
              height: 300,
              width: 300,
              child: ElevatedButton(
                onPressed: () {},
                child: const Text('next screen'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.red,
      appBar: AppBar(
        title: const Text('page three'),
      ),
      body: Center(
        child: SizedBox(
          height: 300,
          width: 300,
          child: ElevatedButton(
            onPressed: () {},
            child: const Text('go to first screen'),
          ),
        ),
      ),
    );
  }
}