GetX Installation & Setup: Complete Guide for Flutter

Name: GetX Installation & Setup: Complete Guide for Flutter
Availability: InStock
Author: Revochamp

Introduction

GetX is a powerful micro-framework for Flutter that combines state management, dependency injection, and navigation in one lightweight package. This guide will walk you through installing GetX in your Flutter project and setting up your first GetX-powered app.

Step 1: Add GetX to pubspec.yaml

Open your pubspec.yaml file and add the GetX dependency under dependencies:

YAMLRead-only

dependencies:
  flutter:
    sdk: flutter
  get: ^4.6.6  # Use the latest stable version

dependencies:
  flutter:
    sdk: flutter
  get: ^4.6.6  # Use the latest stable version

After adding, run flutter pub get in your terminal to install the package. You can also add GetX via command line: flutter pub add get.

Step 2: Import GetX

In any Dart file where you want to use GetX, import the package:

DARTRead-only

import 'package:get/get.dart';

import 'package:get/get.dart';

Step 3: Replace MaterialApp with GetMaterialApp

To enable all GetX features (navigation, snackbars, dialogs, etc.), replace MaterialApp with GetMaterialApp in your main.dart:

DARTRead-only

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'GetX Demo',
      home: HomePage(),
    );
  }
}

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'GetX Demo',
      home: HomePage(),
    );
  }
}

GetMaterialApp is a drop-in replacement for MaterialApp and adds GetX’s routing, internationalization, and other capabilities. It is required for features like Get.to(), Get.snackbar(), and Get.dialog().

Step 4: Create a Controller

A controller in GetX holds your business logic and reactive state. Create a class that extends GetxController:

DARTRead-only

class CounterController extends GetxController {
  var count = 0.obs; // Observable variable

  void increment() => count++;
  void decrement() => count--;
}

class CounterController extends GetxController {
  var count = 0.obs; // Observable variable

  void increment() => count++;
  void decrement() => count--;
}

Step 5: Use the Controller in Your View

In your widget, inject the controller using Get.put() and use Obx to react to changes:

DARTRead-only

class HomePage extends StatelessWidget {
  final controller = Get.put(CounterController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('GetX Counter')),
      body: Center(
        child: Obx(() => Text(
          'Count: ${controller.count}',
          style: TextStyle(fontSize: 24),
        )),
      ),
      floatingActionButton: Row(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          FloatingActionButton(
            onPressed: controller.decrement,
            child: Icon(Icons.remove),
          ),
          SizedBox(width: 10),
          FloatingActionButton(
            onPressed: controller.increment,
            child: Icon(Icons.add),
          ),
        ],
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  final controller = Get.put(CounterController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('GetX Counter')),
      body: Center(
        child: Obx(() => Text(
          'Count: ${controller.count}',
          style: TextStyle(fontSize: 24),
        )),
      ),
      floatingActionButton: Row(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          FloatingActionButton(
            onPressed: controller.decrement,
            child: Icon(Icons.remove),
          ),
          SizedBox(width: 10),
          FloatingActionButton(
            onPressed: controller.increment,
            child: Icon(Icons.add),
          ),
        ],
      ),
    );
  }
}

Step 6: Run Your App

Run flutter run and you’ll see a working counter app powered by GetX. Tap the buttons to see the UI update reactively.

Verifying the Installation

To ensure GetX is correctly installed, you can use Get.snackbar anywhere in your app. Add this line to a button’s onPressed:

DARTRead-only

Get.snackbar('Success', 'GetX is working!');

Get.snackbar('Success', 'GetX is working!');

If the snackbar appears, GetX is properly set up.

Alternative Installation Methods

Using Flutter CLI: Run flutter pub add get in your project terminal.
Using Git dependency: For the latest development version, reference the Git repository directly in pubspec.yaml:
```
dependencies:
  get:
    git:
      url: https://github.com/jonataslaw/getx.git
```
Specifying a specific version: Replace ^4.6.6 with any version you need (e.g., 4.6.5).

Common Issues & Solutions

Error: 'GetMaterialApp' not found – Make sure you imported package:get/get.dart and ran flutter pub get.
Build fails with version conflicts – Check your pubspec.lock for conflicting dependencies; sometimes upgrading all packages helps.
Hot reload not working properly – A full restart (hot restart) may be needed after adding GetX or making changes to the controller.
Null safety issues – GetX 4.x fully supports null safety. Ensure your Flutter SDK is >= 2.10.0.
GetX not recognized in IDE – Try restarting your IDE (VS Code / Android Studio) after flutter pub get.

Best Practices After Installation

Use bindings for dependency management – Instead of Get.put inside widgets, use Get.lazyPut inside bindings.
Organize controllers into modules – Group related controllers and views in feature folders.
Use GetView for cleaner widgets – Reduces repetitive Get.find calls.
Enable permanent: true only for global services – Avoid keeping controllers alive unnecessarily.

Next Steps

Now that GetX is installed and set up, you can explore more advanced features:

Key Takeaways

Add get: ^4.6.6 to pubspec.yaml and run flutter pub get.
Replace MaterialApp with GetMaterialApp.
Import package:get/get.dart.
Create controllers by extending GetxController and use .obs for reactive variables.
Inject controllers with Get.put() and listen to changes with Obx().
Verify installation with Get.snackbar.

Try it yourself

import 'package:flutter/material.dart';
import 'package:get/get.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      home: HomePage(),
    );
  }
}

class CounterController extends GetxController {
  var count = 0.obs;
  void increment() => count++;
}

class HomePage extends StatelessWidget {
  final controller = Get.put(CounterController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('GetX Counter')),
      body: Center(
        child: Obx(() => Text(
          'Count: ${controller.count}',
          style: TextStyle(fontSize: 32),
        )),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: controller.increment,
        child: Icon(Icons.add),
      ),
    );
  }
}

Test Your Knowledge

of 3

What widget should replace MaterialApp to enable all GetX features?

GetApp

GetMaterialApp

MaterialAppX

GetXApp

of 3

How do you make a variable reactive in GetX?

Use `Get.reactive()`

Use `.obs`

Use `Obx()` on the variable

Use `reactive` keyword

of 3

Which method is used to inject a controller in the view?

Get.inject()

Get.find()

Get.put()

Get.create()

Frequently Asked Questions

Do I need to use GetMaterialApp to use GetX?

Yes, GetMaterialApp is required for most GetX features like navigation, snackbars, and dialogs. If you only need state management, you can use GetX without it, but it's recommended to use GetMaterialApp for full functionality.

What is the latest version of GetX?

The latest stable version as of 2026 is 4.6.6. Always check pub.dev for the most recent version.

Can I use GetX with Cupertino?

Yes, GetX provides GetCupertinoApp for Cupertino-style apps. It works similarly to GetMaterialApp.

Does GetX work with Flutter web?

Yes, GetX fully supports Flutter web. The same installation steps apply.

How do I update GetX to the latest version?

Update the version in pubspec.yaml and run flutter pub get. Or run flutter pub upgrade get.

void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return GetMaterialApp( title: 'GetX Demo', home: HomePage(), ); } }

class HomePage extends StatelessWidget { final controller = Get.put(CounterController()); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('GetX Counter')), body: Center( child: Obx(() => Text( 'Count: ${controller.count}', style: TextStyle(fontSize: 24), )), ), floatingActionButton: Row( mainAxisAlignment: MainAxisAlignment.end, children: [ FloatingActionButton( onPressed: controller.decrement, child: Icon(Icons.remove), ), SizedBox(width: 10), FloatingActionButton( onPressed: controller.increment, child: Icon(Icons.add), ), ], ), ); } }

Try it yourself

import 'package:flutter/material.dart';
import 'package:get/get.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      home: HomePage(),
    );
  }
}

class CounterController extends GetxController {
  var count = 0.obs;
  void increment() => count++;
}

class HomePage extends StatelessWidget {
  final controller = Get.put(CounterController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('GetX Counter')),
      body: Center(
        child: Obx(() => Text(
          'Count: ${controller.count}',
          style: TextStyle(fontSize: 32),
        )),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: controller.increment,
        child: Icon(Icons.add),
      ),
    );
  }
}

Test Your Knowledge

of 3

What widget should replace MaterialApp to enable all GetX features?

GetApp

GetMaterialApp

MaterialAppX

GetXApp

of 3

How do you make a variable reactive in GetX?

Use `Get.reactive()`

Use `.obs`

Use `Obx()` on the variable

Use `reactive` keyword

of 3

Which method is used to inject a controller in the view?

Get.inject()

Get.find()

Get.put()

Get.create()

Frequently Asked Questions

Do I need to use GetMaterialApp to use GetX?

What is the latest version of GetX?

The latest stable version as of 2026 is 4.6.6. Always check pub.dev for the most recent version.

Can I use GetX with Cupertino?

Yes, GetX provides GetCupertinoApp for Cupertino-style apps. It works similarly to GetMaterialApp.

Does GetX work with Flutter web?

Yes, GetX fully supports Flutter web. The same installation steps apply.

How do I update GetX to the latest version?

Update the version in pubspec.yaml and run flutter pub get. Or run flutter pub upgrade get.

GetX Installation & Setup: Complete Guide for Flutter

Introduction

Step 1: Add GetX to pubspec.yaml

Step 2: Import GetX

Step 3: Replace MaterialApp with GetMaterialApp

Step 4: Create a Controller

Step 5: Use the Controller in Your View

Step 6: Run Your App

Verifying the Installation

Alternative Installation Methods

Common Issues & Solutions

Best Practices After Installation

Next Steps

Key Takeaways

Try it yourself

Test Your Knowledge

Frequently Asked Questions

Need help?

GetX Installation & Setup: Complete Guide for Flutter

GetX Installation & Setup: Complete Guide for Flutter

Introduction

Step 1: Add GetX to pubspec.yaml

Step 2: Import GetX

Step 3: Replace MaterialApp with GetMaterialApp

Step 4: Create a Controller

Step 5: Use the Controller in Your View

Step 6: Run Your App

Verifying the Installation

Alternative Installation Methods

Common Issues & Solutions

Best Practices After Installation

Next Steps

Key Takeaways

Try it yourself

Test Your Knowledge

Frequently Asked Questions

Need help?