How to create an app with GetX architect in Flutter.
Tags: flutter, dart, getx, programming
Published: 2022-08-20 04:37:42

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.

## Why choose GetX?

If Flutter is already a framework then why should you  choose a micro-framework(GetX) for cross-app development in Flutter? So here are some benefits that GetX is providing.

**Performance** 

GetX provides high performance and minimum consumption of resources. GetX does not use Streams or ChangeNotifier.

**Decoupling** 

Business logic is separated from UI, and even dependencies can be separated using GetX Bindings.

**Internationalization** 

GetX provides i18n out of the box allowing you to write applications with various language support.

**State Management**

GetX is its intuitive state management feature. State management in GetX can be achieved with little or no boilerplate.

**Route Management**

GetX provides API for navigating within the Flutter application. This API is simple and with less code needed.

**Dependency Management**

GetX provides a smart way to manage dependencies in your Flutter application like the view controllers. GetX will remove any controller not being used at the moment from memory automatically.

**Validation**

GetX provides validation methods for performing input validation in your Flutter applications, so no need to install any extra package for validation.

**Storage**

GetX provides a fast, extra light, and synchronous key-value in memory, which backs up data to disk at each operation. It is written entirely in Dart and easily integrates with the core GetX package.

**Change Theme**

While we are using GetX we don’t need to use any higher level widget than the “GetMaterialApp” widget and also we don’t need to use the “ThemeProvider” widget for changing themes.

## STEP 1

Start a new Flutter project. 

```dart
flutter create your_project_name
```
## STEP 2

Add GetX package to pubspec.yaml


![GetX package](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xdsehazuiyjavi1drqbm.png)

## STEP 3

Make your app structure like the below image.

![App Structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g2tz4fjbec2rvxg2eabr.png)

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.

```dart
//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.

```dart
//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.

```dart
//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.

```dart
//app_routes.dart

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

```dart
//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.

```dart
//main.dart

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. For a better understanding, you can also check out the short movie app I made in GetX by clicking on the link below.

Link: https://github.com/socialmad/movie-app

I hope you like this article.
The article is sponsored by: [UniqueApps](https://uniqueapps.net/)