Simplify your Flutter code with GetX

We all love flutter right? What makes flutter soo lovable is the structure of the code. The readability of the code is so simple that even the newbies could understand it easily. But I have some complaints, to do some simple task you need to write long code

For example: Navigating from one screen to another the code looks something like this

Navigator.push(  
    context,  
    MaterialPageRoute(builder: (context) => HomeScreen()),  
  );

I know it might be freaking you out that to do this simple task you need to write this long code.

Now you know the drawback so let’s talk about the solution. We can overcome this problem by using GetX which is the micro-framework. Throughout this blog, I’m going to compare the normal flutter code and code using GetX. Before getting inside the blog let’s understand it with this meme

What is GetX?

GetX is a micro-framework that aims to provide some sweet code shorteners, state management, and route management. In Flutter to do anything you need some context but it’s not always possible to have, for example, what if you create a class that has some functions and in one of the functions you want to navigate from one screen to another but there’s no tree so there’s no context right but this thing can be solved using GetX as there’s no context required. When developing large projects GetX can be a superhero for you. One of my most favorite parts of GetX is local storage where you can store key-value pairs very easily as compared to any of the alternatives. All these things come under a single umbrella yet It is super Fast and Powerful.

Installing GetX in your project

Add this code to pubspec.yaml

dependencies:  
  get: ^4.1.4

Import it to the file

import 'package:get/get.dart';

The Comparison

Navigation

Flutter Code

Navigator.push(  
    context,  
    MaterialPageRoute(builder: (context) => HomeScreen()),  
  );

GetX Code

Get.to(HomeScreen());

Bottom Sheet

Flutter Code

showModalBottomSheet(  
    context: context,  
    builder: (context) {  
      return Column(  
        mainAxisSize: MainAxisSize.min,  
        children: <Widget>\[  
          ListTile(  
            leading: new Icon(Icons.*photo*),  
            title: new Text('Photo'),  
            onTap: () {  
              Navigator.*pop*(context);  
            },  
          ),  
          ListTile(  
            leading: new Icon(Icons.*music\_note*),  
            title: new Text('Music'),  
            onTap: () {  
              Navigator.*pop*(context);  
            },  
          ),  
          ListTile(  
            leading: new Icon(Icons.*videocam*),  
            title: new Text('Video'),  
            onTap: () {  
              Navigator.*pop*(context);  
            },  
          ),  
          ListTile(  
            leading: new Icon(Icons.*share*),  
            title: new Text('Share'),  
            onTap: () {  
              Navigator.*pop*(context);  
            },  
          ),  
        \],  
      );  
    });

GetX Code

Get.bottomSheet(  
    Column(  
      mainAxisSize: MainAxisSize.min,  
      children: <Widget>\[  
        ListTile(  
          leading: new Icon(Icons.*photo*),  
          title: new Text('Photo'),  
          onTap: () {  
            Navigator.*pop*(context);  
          },  
        ),  
        ListTile(  
          leading: new Icon(Icons.*music\_note*),  
          title: new Text('Music'),  
          onTap: () {  
            Navigator.*pop*(context);  
          },  
        ),  
        ListTile(  
          leading: new Icon(Icons.*videocam*),  
          title: new Text('Video'),  
          onTap: () {  
            Navigator.*pop*(context);  
          },  
        ),  
        ListTile(  
          leading: new Icon(Icons.*share*),  
          title: new Text('Share'),  
          onTap: () {  
            Navigator.*pop*(context);  
          },  
        ),  
      ],  
    ),  
    backgroundColor: Colors.*white*);

Alert Dialog

Flutter Code

showDialog(  
  context: context,  
  builder: (BuildContext context) {  
    return AlertDialog(  
      title: Text('Not in stock'),  
      content:  
          const Text('This item is no longer available'),  
      actions: [  
        MaterialButton(  
          child: Text('Ok'),  
          onPressed: () {  
            Navigator.*of*(context).pop();  
          },  
        ),  
      ],  
    );  
  },  
);

GetX Code

Get.defaultDialog();

Media Query

Flutter Code

MediaQuery.*of*(context).size.height

GetX Code

Get.height

Validation

GetX Code

GetUtils.isEmail(email_id)

Local Storage

GetX Code

void main() async {  
  await GetStorage.*init*();  
  runApp(MyApp());  
}

final doc = GetStorage();  
doc.write("name", "name");  
doc.read("name"),

ThemeData

Flutter Code

Theme.of(context).primaryColor

GetX Code

Get.theme.primaryColor

Switch Between Dark and Light Mode

GetX Code

onPressed: () {  
  if (Get.isDarkMode) {  
    Get.changeTheme(ThemeData.light());  
  } else {  
    Get.changeTheme(ThemeData.dark());  
  }  
},

Check Platform

Flutter Code

import 'dart:io';  
IO.Platform.isAndroid

GetX Code

GetPlatform.isAndroid

These were some of the uses of GetX in Flutter and there are many more which you could try out.

GetX is probably one of the best tools/packages for state management which I won’t cover in this blog as it is quite a big topic itself to discuss here but definitely, I’ll try writing a blog on the same in future

Here is a simple flutter application made with GetX.

Find out the code here: https://github.com/Anikets08/GetX

Thanks for your time. See you in the next one 👋

Let’s Connect

GitHub Twitter Instagram