Flutter GetX Tutorial - Create Counter application with GetX

Published October 21, 2021

Getx is a flutter framework which will be used to manage the StateManagment, dependency management, navigation controller. In this flutter application we will create First flutter application with GetX framework

Let's get started

Step 1: Create a Flutter application
This will create basic flutter counter application. Here we are implementing Counter application with GetX, so let clean the default code

Now we need to divide our application into different packages.

Let's create two packages called views and controllers.

GetX is a framework which will seperate UI from Business logic, it will contains differnt controllers for each views. So we have created two separate packages for Views and controllers.

Now lets create a stateless widget inside views package

import 'package:flutter/material.dart';
import 'package:flutter_getx/controllers/myhomepage_controller.dart';
import 'package:get/get.dart';

class MyHomePage extends StatelessWidget {
  final String title;
  final MyHomePageController controller = Get.put(MyHomePageController());
  MyHomePage({ required this.title});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have Incremented counter value to :',
            ),
            Text(
              '0',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: null,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

Now add this newly created widget in main dart file and run the application

You can see the screen with Increment buttons, but when you tap on button the value of counter will not increase, because we were not added logic to increment value.

So let's add our business logic inside getX Controller

What is GetxController?
GetxController class which we can inherit to create controller classes for the each individual views of application. For our current app, we have one view so we will create a controller for that view

So our controller default code will be like this

import 'package:get/get.dart';

class MyHomePageController extends GetxController {
  
}

let's add count variable

In GetX when we want to update the values of variable we need to make them as observable. To make variable in GetX we just need to add .obs for the variable

final count = 0.obs;

So when the value of count changes will reflect on its usage state

Let's add increment method within the controller

increment() => count.value++;

We are done with our controller, now move to view file and add controller to the view

final MyHomePageController controller = Get.put(MyHomePageController());

Now we have our controller instance inside view, In GetX to mark a part of your UI to be rebuilt when a state variable changes, we will wrap that widget part with the Obx widget

So let's add our Text widget inside Obx

Obx(() => Text('0',
    style: Theme.of(context).textTheme.headline4,),)

Now remove static value with dynamic count value from controller instance

Obx(() => Text('${controller.count.value}', style: Theme.of(context).textTheme.headline4,),)

Now call increment method on FloatingAction Button

Now the complete code for Getx Counter example will be like below

myhomewidget.dart

import 'package:flutter/material.dart';
import 'package:flutter_getx/controllers/myhomepage_controller.dart';
import 'package:get/get.dart';

class MyHomePage extends StatelessWidget {
  final String title;
  final MyHomePageController controller = Get.put(MyHomePageController());
  MyHomePage({ required this.title});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have Incremented counter value to :',
            ),
        Obx(() => Text('${controller.count.value}',
            style: Theme.of(context).textTheme.headline4,),)
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: controller.increment,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

controller class

import 'package:get/get.dart';

class MyHomePageController extends GetxController {
  final count = 0.obs;
  increment() => count.value++;
}

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_getx/views/myhome_widget.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
    home: MyHomePage(title:"Flutter GetX Tutorial"),
    );
  }
}

Conclusion: In this flutter example we covered how to implement GetX framework inside flutter for Counter application.

Article Contributed By :

3048 Views

Projects By category