DEV Community

MD Sarfaraj for This is Learning

Posted on

How to create an app with GetX architect in Flutter.

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.


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


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


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.


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


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.


Start a new Flutter project.

flutter create your_project_name
Enter fullscreen mode Exit fullscreen mode


Add GetX package to pubspec.yaml

GetX package


Make your app structure like the below image.

App Structure

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

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


import 'package:get/get.dart';
class HomeController extends GetxController {
Enter fullscreen mode Exit fullscreen mode

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.


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

class HomeBinding extends Bindings {
  void dependencies() {
    Get.lazyPut(() => HomeController());
Enter fullscreen mode Exit fullscreen mode

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


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

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


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


class AppRoutes {
  static const home = '/home';
Enter fullscreen mode Exit fullscreen mode

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 = [
      name: AppRoutes.home,
      page: () => HomePage(),
      binding: HomeBinding(),
Enter fullscreen mode Exit fullscreen mode


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.
  Widget build(BuildContext context) {
    return GetMaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch:,
      initialBinding: HomeBinding(),
      home: HomePage(),
      getPages: AppPages.pages,
Enter fullscreen mode Exit fullscreen mode

All is done now run your app.


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.


I hope you like this article.
The article is sponsored by: UniqueApps

Top comments (1)

yourmdsarfaraj profile image
MD Sarfaraj

Thank you so much, Tamas, for your wonderful comment.
Yes, GetX is a lightweight microframework for Flutter, and it is good for managing large projects. But before jumping into GetX, developers need to be proficient in Flutter.

As a developer, I built many apps on GetX that made my life easier in terms of managing the codes.