State Management

Get has two different state managers: the simple state manager (we'll call it GetBuilder) and the reactive state manager (GetX/Obx)

Sample Diagram

Overview

GetX combines high-performance state management, intelligent dependency injection, and route management quickly and practically.

Installing

Add Get to your pubspec.yaml file:

dependencies:
  get:

Alternative

Using infinity_core module we comind all of everything into one

dependencies:
    infinity_core:
        git:
          url: http://gitlab.initcapp.com/app-dev/infinity_core.git

Counter App with GetX

I will demonstrate how to make a "counter" changing the state with each click

• Step 1: Add "Get" before your MaterialApp, turning it into GetMaterialApp

main.dart

void main() => runApp(GetMaterialApp(home: Home()));

Note: this does not modify the MaterialApp of the Flutter, GetMaterialApp is not a modified MaterialApp, it is just a pre-configured Widget. GetMaterialApp will create routes, inject them, inject translations, inject everything you need for route navigation

• Step 2: Create your business logic class and place all variables, methods and controllers inside it. You can make any variable observable using a simple ".obs".

controller.dart

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

• Step 3: Create your View, use StatelessWidget and save some RAM, with Get you may no longer need to use StatefulWidget.

home.dart

class Home extends StatelessWidget {

  @override
  Widget build(context) {

    // Instantiate your class using Get.put() to make it available for all "child" routes there.
    final Controller c = Get.put(Controller());

    return Scaffold(
      // Use Obx(()=> to update Text() whenever count is changed.
      appBar: AppBar(title: Obx(() => Text("Clicks: ${c.count}"))),

      // Replace the 8 lines Navigator.push by a simple Get.to(). You don't need context
      body: Center(child: ElevatedButton(
              child: Text("Go to Other"), onPressed: () => Get.to(Other()))),
      floatingActionButton:
          FloatingActionButton(child: Icon(Icons.add), onPressed: c.increment));
  }
}

class Other extends StatelessWidget {
  // You can ask Get to find a Controller that is being used by another page and redirect you to it.
  final Controller c = Get.find();

  @override
  Widget build(context){
     // Access the updated count variable
     return Scaffold(body: Center(child: Text("${c.count}")));
  }
}

This is a simple project but it already makes clear how powerful Get is. As your project grows, this difference will become more significant

Route management

If you are going to use routes/snackbars/dialogs/bottomsheets without context, GetX is excellent for you too, just see it:

Add "Get" before your MaterialApp, turning it into GetMaterialApp

main.dart

GetMaterialApp( // Before: MaterialApp(
  home: MyHome(),
)

//Navigate to a new screen
Get.to(NextScreen());

//Navigate to new screen with name
Get.toNamed('/details');

//To close snackbars, dialogs, bottomsheets
//or anything you would normally close with Navigator.pop(context);
Get.back();

//To go to the next screen and no option to go back 
to the previous screen (for use in SplashScreens, login screens, etc.)
Get.off(NextScreen());

//To go to the next screen and cancel 
//all previous routes (useful in shopping carts, polls, and tests)
Get.offAll(NextScreen());

Noticed that you didn't have to use context to do any of these things? That's one of the biggest advantages of using Get route management. With this, you can execute all these methods from within your controller class, without worries.

Dependency management

Get has a simple and powerful dependency manager that allows you to retrieve the same class as your Bloc or Controller with just 1 lines of code, no Provider context, no inheritedWidget:

di.dart

// Rather Controller controller = Controller();
Controller controller = Get.put(Controller());

Note: If you are using Get's State Manager, pay more attention to the bindings API, which will make it easier to connect your view to your controller.

Instead of instantiating your class within the class you are using, you are instantiating it within the Get instance, which will make it available throughout your App. So you can use your controller (or class Bloc) normally

Tip: Get dependency management is decoupled from other parts of the package, so if for example, your app is already using a state manager (any one, it doesn't matter), you don't need to rewrite it all, you can use this dependency injection with no problems at all

controller.fetchApi();

Imagine that you have navigated through numerous routes, and you need data that was left behind in your controller, you would need a state manager combined with the Provider or Get_it, correct? Not with Get.

You just need to ask Get to "find" for your controller, you don't need any additional dependencies:

//Yes, it looks like Magic, Get will find your controller, and will deliver it to you. You can have 1 million controllers instantiated, 
//Get will always give you the right controller.
Controller controller = Get.find();

And then you will be able to recover your controller data that was obtained back there:

Text(controller.textFromApi);

Binding with GetPage

In every each pages(screen) should be binding with the controller

app_pages.dart

static final List<GetPage> routes = [
  _page(
      name: MyPage.routeName,
      page: () => MyPage(),
      binding: BindingsBuilder(() {
        Get.lazyPut<MyController>(() => MyController());
      }),
      transition: Transition.cupertino,
    ),
    // your pages and controller binding 
  ];
  
 static GetPage _page({
    required String name,
    required GetPageBuilder page,
    bool fullscreenDialog = false,
    bool transparentRoute = false,
    bool opaque = true,
    Bindings? binding,
    Transition? transition,
    CustomTransition? customTransition,
    final List<GetMiddleware>? middlewares,
  }) {
    if (transparentRoute) {
      return TransparentRoute(
        name: name,
        binding: binding,
        transition: transition ?? Transition.downToUp,
        middlewares: [PageMiddleware(), ...?middlewares],
        page: () {
          Monitor.instance.putPage(name);
          return page();
        },
      );
    }
    return GetPage(
      name: name,
      opaque: opaque,
      fullscreenDialog: fullscreenDialog,
      binding: binding,
      customTransition: customTransition,
      transition: transition ?? Transition.rightToLeft,
      page: () {
        Monitor.instance.putPage("PageName: $name Transition: $transition");
        return page();
      },
      middlewares: [PageMiddleware(), ...?middlewares],
    );
  }

GetPage Middleware

The GetPage has now new property that takes a list of GetMiddleWare and run them in the specific order.

Note: When GetPage has a Middlewares, all the children of this page will have the same middlewares automatically.

Redirect

This function will be called when the page of the called route is being searched for

login_middleware.dart

class LoginMiddleware extends GetMiddleware {
  @override
  RouteSettings? redirect(String? routeName) {
    /// [previousRouteName] is the RouteName passing from arguments
    /// [args] is a value like arguments passing from other Page.
    ///
    // If user not login yet

    if (!Application.instance.isLogin) {
      String? previousRouteName = routeName;
      Object? args = Get.arguments;

      return RouteSettings(
        name: PageSignIn.routeName,
        arguments: MiddleWareRedirectArgs(arguments: args, routeName: previousRouteName),
      );
    }
    return null;
  }
}

onPageCalled

This function will be called when this Page is called before anything created you can use it to change something about the page or give it new page

GetPage onPageCalled(GetPage page) {
  final authService = Get.find<AuthService>();
  return page.copyWith(title: 'Welcome ${authService.UserName}');
}

OnBindingsStart

This function will be called right before the Bindings are initialize. Here you can change Bindings for this page.

List<Bindings> onBindingsStart(List<Bindings> bindings) {
  final authService = Get.find<AuthService>();
  if (authService.isAdmin) {
    bindings.add(AdminBinding());
  }
  return bindings;
}

OnPageBuildStart

This function will be called right after the Bindings are initialize. Here you can do something after that you created the bindings and before creating the page widget.

GetPageBuilder onPageBuildStart(GetPageBuilder page) {
  print('bindings are ready');
  return page;
}

OnPageBuilt

This function will be called right after the GetPage.page function is called and will give you the result of the function. and take the widget that will be showed.

OnPageDispose

This function will be called right after disposing all the related objects (Controllers, views, ...) of the page.

Other APIs

// give the current args from currentScreen
Get.arguments

// give name of previous route
Get.previousRoute

// give the raw route to access for example, rawRoute.isFirst()
Get.rawRoute

// give access to Routing API from GetObserver
Get.routing

// check if snackbar is open
Get.isSnackbarOpen

// check if dialog is open
Get.isDialogOpen

// check if bottomsheet is open
Get.isBottomSheetOpen

// remove one route.
Get.removeRoute()

// back repeatedly until the predicate returns true.
Get.until()

// go to next route and remove all the previous routes until the predicate returns true.
Get.offUntil()

// go to next named route and remove all the previous routes until the predicate returns true.
Get.offNamedUntil()

//Check in what platform the app is running
GetPlatform.isAndroid
GetPlatform.isIOS
GetPlatform.isMacOS
GetPlatform.isWindows
GetPlatform.isLinux
GetPlatform.isFuchsia

//Check the device type
GetPlatform.isMobile
GetPlatform.isDesktop
//All platforms are supported independently in web!
//You can tell if you are running inside a browser
//on Windows, iOS, OSX, Android, etc.
GetPlatform.isWeb


// Equivalent to : MediaQuery.of(context).size.height,
// but immutable.
Get.height
Get.width

// Gives the current context of the Navigator.
Get.context

// Gives the context of the snackbar/dialog/bottomsheet in the foreground, anywhere in your code.
Get.contextOverlay

// Note: the following methods are extensions on context. Since you
// have access to context in any place of your UI, you can use it anywhere in the UI code

// If you need a changeable height/width (like Desktop or browser windows that can be scaled) you will need to use context.
context.width
context.height

// Gives you the power to define half the screen, a third of it and so on.
// Useful for responsive applications.
// param dividedBy (double) optional - default: 1
// param reducedBy (double) optional - default: 0
context.heightTransformer()
context.widthTransformer()

/// Similar to MediaQuery.of(context).size
context.mediaQuerySize()

/// Similar to MediaQuery.of(context).padding
context.mediaQueryPadding()

/// Similar to MediaQuery.of(context).viewPadding
context.mediaQueryViewPadding()

/// Similar to MediaQuery.of(context).viewInsets;
context.mediaQueryViewInsets()

/// Similar to MediaQuery.of(context).orientation;
context.orientation()

/// Check if device is on landscape mode
context.isLandscape()

/// Check if device is on portrait mode
context.isPortrait()

/// Similar to MediaQuery.of(context).devicePixelRatio;
context.devicePixelRatio()

/// Similar to MediaQuery.of(context).textScaleFactor;
context.textScaleFactor()

/// Get the shortestSide from screen
context.mediaQueryShortestSide()

/// True if width be larger than 800
context.showNavbar()

/// True if the shortestSide is smaller than 600p
context.isPhone()

/// True if the shortestSide is largest than 600p
context.isSmallTablet()

/// True if the shortestSide is largest than 720p
context.isLargeTablet()

/// True if the current device is Tablet
context.isTablet()

/// Returns a value<T> according to the screen size
/// can give value for:
/// watch: if the shortestSide is smaller than 300
/// mobile: if the shortestSide is smaller than 600
/// tablet: if the shortestSide is smaller than 1200
/// desktop: if width is largest than 1200
context.responsiveValue<T>()

BaseView

Is a const Stateless Widget that has a getter controller for a registered Controller, that's all.

base_view.dart

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

///获取controller的 baseView, 这里要在路由里声明 controller
abstract class BaseView<T> extends GetView<T> {
  const BaseView({Key? key}) : super(key: key);

  @override
  StatelessElement createElement() {
    debugPrint("client, createElement=> build-$this");
    onInit();
    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
      debugPrint("client, createElement=> onReady-$this");
      onReady();
    });
    return super.createElement();
  }

  ///ui build之前，可以设置数据
  void onInit() {}

  ///初始化数据
  void onReady() {}
}

awesome_view.dart

class AwesomeController extends GetController {
   final String title = 'My Awesome View';
 }

  // ALWAYS remember to pass the `Type` you used to register your controller!
 class AwesomeView extends BaseView<AwesomeController> {
   @override
   Widget build(BuildContext context) {
     return Container(
       padding: EdgeInsets.all(20),
       child: Text(controller.title), // just call `controller.something`
     );
   }
 }

Reference

Pub.dev -> https://pub.dev/packages/get#about-get