GetX in Flutter :A Complete Guide

Step-by-Step Guide to Integrate GetX in Flutter

GetX is a powerful state management, dependency injection, and navigation package for Flutter. It simplifies app development by reducing boilerplate code and improving performance.

Step-by-Step Guide to Integrate GetX in Flutter

1. Install GetX Package

Add the following dependency in pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  get: ^4.6.6

2. Set Up GetX in Your Flutter App

Replace MaterialApp with GetMaterialApp in main.dart:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'GetX App',
      home: HomePage(),
    );
  }
}

3. Create a GetX Controller

import 'package:get/get.dart';

class CounterController extends GetxController {
  var count = 0.obs;

  void increment() {
    count++;
  }
}

4. Use GetX Controller in UI

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

class HomePage extends StatelessWidget {
  final CounterController counterController = Get.put(CounterController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("GetX Counter")),
      body: Center(
        child: Obx(() => Text(
              "Count: ${counterController.count}",
              style: TextStyle(fontSize: 24),
            )),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: counterController.increment,
        child: Icon(Icons.add),
      ),
    );
  }
}

5. Navigation Using GetX

Get.to(SecondPage()); // Navigate to another page
Get.off(SecondPage()); // Replace the current page
Get.offAll(SecondPage()); // Remove all previous pages from the stack
Get.back(); // Go back to the previous page

6. Show Snackbars, Dialogs & BottomSheets

Get.snackbar("Title", "This is a GetX Snackbar", snackPosition: SnackPosition.BOTTOM);

Get.defaultDialog(
  title: "Dialog",
  middleText: "This is a GetX Dialog",
  confirm: ElevatedButton(onPressed: () => Get.back(), child: Text("OK")),
);

Get.bottomSheet(
  Container(
    color: Colors.white,
    child: Wrap(
      children: [
        ListTile(
          leading: Icon(Icons.light_mode),
          title: Text("Light Mode"),
          onTap: () => Get.changeTheme(ThemeData.light()),
        ),
        ListTile(
          leading: Icon(Icons.dark_mode),
          title: Text("Dark Mode"),
          onTap: () => Get.changeTheme(ThemeData.dark()),
        ),
      ],
    ),
  ),
);

7. Use Dependency Injection

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

8. Use GetX for State Management

Obx(() => Text("Count: ${counterController.count}"));

GetBuilder(
  builder: (controller) => Text("Count: ${controller.count}"),
);

Conclusion

GetX is an efficient and lightweight package for Flutter developers that simplifies state management, dependency injection, and routing. It reduces boilerplate code and improves performance. By following these steps, you can seamlessly integrate GetX into your Flutter application and enhance app development efficiency.