How To Create The Flutter App With Getx Architect

In today's article, I am going to share the steps for how to create the Flutter app with GetX architect. Let's start.

What is GetX?

GetX is a lightweight and powerful solution for Flutter. The solution combines high-speed state management with intelligent dependency injection, as well as route management.

Check out the following blog for more information:

Link: https://www.c-sharpcorner.com/blogs/getx-in-flutter

STEP 1

Start a new Flutter project. 

Click on "Create New Flutter Project"

Choose "Flutter Application" and click Next

Choose your project name, the flutter SDK path location, and your project location, then click Next

Give the app package name and click on Finish.

Now a new flutter project is created.

STEP 2

Add GetX dependencies to pubspec.yaml

Link: https://pub.dev/packages/get#about-get

STEP 3

There will be three files per page. A controller, a binding, and a page/view.

Controller

The GetxController class takes care of all your logic and makes your fields observable.

home_controller.dart

import 'package:get/get.dart';
class HomeController extends GetxController {
}

Binding

Bindings can be used to initialize your controllers, repositories, APIs, and whatever else you need without having to call them directly from the view page.

home_binding.dart

import 'package:flutter_getx/app/modules/home_controller.dart';
import 'package:get/get.dart';

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

Page/View

You use this page to display your design in your app.

home_page.dart

import 'package:flutter/material.dart';
import 'package:flutter_getx/app/modules/home_controller.dart';
import 'package:get/get.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetBuilder<HomeController>(
      builder: (controller) => Scaffold(
        appBar: AppBar(
          title: const Text('Home'),
        ),
        body: const Center(
          child: Text('Hello World!'),
        ),
      ),
    );
  }
}

STEP 4

In GetX before navigating from one screen to another we require routes. So let's create routes.

app_routes.dart

class AppRoutes {
  static const home = '/home';
}

app_pages.dart

import 'package:flutter_getx/app/modules/home_binding.dart';
import 'package:flutter_getx/app/modules/home_page.dart';
import 'package:flutter_getx/app/routes/app_routes.dart';
import 'package:get/get.dart';

class AppPages {
  static final List<GetPage> pages = [
    GetPage(
      name: AppRoutes.home,
      page: () => HomePage(),
      binding: HomeBinding(),
    ),
  ];
}

STEP 5

Now change your MaterialApp widget with GetMaterialApp in main.dart and initialize your page.

import 'package:flutter/material.dart';
import 'package:flutter_getx/app/modules/home_binding.dart';
import 'package:flutter_getx/app/modules/home_page.dart';
import 'package:flutter_getx/app/routes/app_pages.dart';
import 'package:get/get.dart';

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

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(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      initialBinding: HomeBinding(),
      home: HomePage(),
      getPages: AppPages.pages,
    );
  }
}

All is done now run your app.

Conclusion

This is a simple step-by-step guide to show you how to create your app in Flutter GetX. Check out the below links to find out more about GetX's features.

Also, I created a small movie app in GetX that you can check out for better understanding.

References

• https://github.com/socialmad/flutter-getx
• https://github.com/socialmad/movie-app
• https://chornthorn.github.io/getx-docs/index
• https://www.smashingmagazine.com/2021/01/getx-package-flutter-applications/