How to use Flutter GetX - basic part

Chinese documentation: getx/README.zh-cn.md at master · jonataslaw/getx · GitHub

About Get

• GetX is a lightweight and powerful solution on Flutter: high-performance state management, intelligent dependency injection and convenient routing management.

• 3 basic principles:

1. Performance:  GetX focuses on performance and minimal resource consumption. The size of the GetX packaged apk and the memory usage during runtime are comparable to other state management plug-ins. If you're interested, here's a performance test .
2. Efficiency:  GetX's syntax is very simple and maintains extremely high performance, which can greatly shorten your development time.
3. Structure:  GetX can completely decouple interface, logic, dependencies and routing, making it easier to use, clearer logic, and easier to maintain code.

•  Commonly used plug-ins

• getx_template : Generate necessary folders, files, template codes, etc. for each page with one click
  • Android Studio/Intellij plugin
• GetX Snippets : Enter a few letters and automatically prompt for selection to generate commonly used template codes.
  • Android Studio/Intellij extension
  • VSCode extension

 Three major functions

 Status management

Get has two different state managers: simple state manager (GetBuilder) and responsive state manager (GetX).

//观察变量
var name = 'Jonatas Borges'.obs;
//使用变量
Obx(() => Text("${controller.name}"));

 Route management - no context required

Add "Get" before MaterialApp to turn it into GetMaterialApp.

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

Navigate to new interface

//直接导航
Get.to(NextScreen());

//根据别名导航新界面（项目使用，统一管理，不易出错）
Get.toNamed('/details');

Return to the previous page, similar to Navigator.pop(context)

Get.back();

Go to the next page without the option to return to the previous page (used for splash screens, login pages, etc.).

Get.off(NextScreen());

Go to the next page and cancel all previous routes (useful in shopping carts, polls and testing).

Get.offAll(NextScreen());

Dependency management

        It allows you to retrieve the same class as your Bloc or Controller with only 1 line of code, no Provider context, no inheritedWidget required.

        Get dependency management is decoupled from the rest of the package, so if your app already uses a state manager (any one, it doesn't matter) and you don't need to rewrite it all, you can use dependency injection.

Controller controller = Get.put(Controller()); 
// 而不是 Controller controller = Controller();
controller.fetchApi();

Controller controller = Get.find();
//是的，它看起来像魔术，Get会找到你的控制器，并将其提供给你。你可以实例化100万个控制器，Get总会给你正确的控制器。
//使用
Text(controller.textFromApi);

• Get.put()
• Get.lazyPut(): You can lazily load a dependency so that it will only be instantiated when used.
• Get.putAsync(): If you want to register an asynchronous instance.
• Get.create()

Differences between methods

• The creation order of Get.put and Get.putAsync is the same. The difference is that the second method uses an asynchronous method to create and initialize the instance. put is directly inserted into the memory, using the internal method insert, parameters permanent: falseand isSingleton: true(the isSingleton parameter just tells it whether it is using dependencya dependency or FcBuilderFunca dependency), and then calls it to Get.find()immediately initialize the instance in the memory.

• Get.create. As the name suggests, it will "create" your dependencies! Similar to Get.put(). Similar Get.put()to, it also calls internal methods insertto instantiate. But permanentit became true, and isSingletonit became false (because we are "creating" our dependency, so there is no way for it to become a singleton, which is why it is false). Because it does permanent: true, our default benefit is that it won't be destroyed between page jumps. In addition, Get.find()it is not called immediately, but waits to be called in the page. This creation is to take advantage of the "permanent" parameter. It is worth noting that the Get.create()goal is to create an instance that is not shared, but will not be destroyed, such as listView. for a button in the list, you want to create a unique instance of the list - because of this, Get.create must be used with GetWidget.

• Get.lazyPut. As the name suggests, this is a lazy loading process. The instance is created, but it is not called for immediate use, but waits to be called. Contrary to other methods, "insert" is not called here. Instead, the instance is inserted into another part of memory, which is responsible for determining whether the instance can be recreated, which we call the "factory". If we want to create something to use later, it won't get mixed up with what we're using now. This is the magic of "fenix": if you choose to leave "fenix: false", and your "smartManagement" is not "keepFactory", then when "Get.find" is used, the instance will change the location in memory from " Factory" was changed to a normal instance memory area. Then, by default, it will be removed from the "factory". Now, if you select "fenix: true", the instance will continue to exist in this private part and even into the public area to be called again in the future.

 Other high-level APIs

// 给出当前页面的args。
Get.arguments

//给出以前的路由名称
Get.previousRoute

// 给出要访问的原始路由，例如，rawRoute.isFirst()
Get.rawRoute

// 允许从GetObserver访问Rounting API。
Get.routing

// 检查 snackbar 是否打开
Get.isSnackbarOpen

// 检查 dialog 是否打开
Get.isDialogOpen

// 检查 bottomsheet 是否打开
Get.isBottomSheetOpen

// 删除一个路由。
Get.removeRoute()

//反复返回，直到表达式返回真。
Get.until()

// 转到下一条路由，并删除所有之前的路由，直到表达式返回true。
Get.offUntil()

// 转到下一个命名的路由，并删除所有之前的路由，直到表达式返回true。
Get.offNamedUntil()

//检查应用程序在哪个平台上运行。
GetPlatform.isAndroid
GetPlatform.isIOS
GetPlatform.isMacOS
GetPlatform.isWindows
GetPlatform.isLinux
GetPlatform.isFuchsia

//检查设备类型
GetPlatform.isMobile
GetPlatform.isDesktop
//所有平台都是独立支持web的!
//你可以知道你是否在浏览器内运行。
//在Windows、iOS、OSX、Android等系统上。
GetPlatform.isWeb


// 相当于.MediaQuery.of(context).size.height,
//但不可改变。
Get.height
Get.width

// 提供当前上下文。
Get.context

// 在你的代码中的任何地方，在前台提供 snackbar/dialog/bottomsheet 的上下文。
Get.contextOverlay

// 注意：以下方法是对上下文的扩展。
// 因为在你的UI的任何地方都可以访问上下文，你可以在UI代码的任何地方使用它。

// 如果你需要一个可改变的高度/宽度（如桌面或浏览器窗口可以缩放），你将需要使用上下文。
context.width
context.height

// 让您可以定义一半的页面、三分之一的页面等。
// 对响应式应用很有用。
// 参数： dividedBy (double) 可选 - 默认值：1
// 参数： reducedBy (double) 可选 - 默认值：0。
context.heightTransformer()
context.widthTransformer()

/// 类似于 MediaQuery.of(context).size。
context.mediaQuerySize()

/// 类似于 MediaQuery.of(context).padding。
context.mediaQueryPadding()

/// 类似于 MediaQuery.of(context).viewPadding。
context.mediaQueryViewPadding()

/// 类似于 MediaQuery.of(context).viewInsets。
context.mediaQueryViewInsets()

/// 类似于 MediaQuery.of(context).orientation;
context.orientation()

///检查设备是否处于横向模式
context.isLandscape()

///检查设备是否处于纵向模式。
context.isPortrait()

///类似于MediaQuery.of(context).devicePixelRatio。
context.devicePixelRatio()

///类似于MediaQuery.of(context).textScaleFactor。
context.textScaleFactor()

///查询设备最短边。
context.mediaQueryShortestSide()

///如果宽度大于800，则为真。
context.showNavbar()

///如果最短边小于600p，则为真。
context.isPhone()

///如果最短边大于600p，则为真。
context.isSmallTablet()

///如果最短边大于720p，则为真。
context.isLargeTablet()

///如果当前设备是平板电脑，则为真
context.isTablet()

///根据页面大小返回一个值<T>。
///可以给值为：
///watch：如果最短边小于300
///mobile：如果最短边小于600
///tablet：如果最短边（shortestSide）小于1200
///desktop：如果宽度大于1200
context.responsiveValue<T>()

Use in development

Thanks to Brother Dai for the plug-in (Android Studio, no VSCode ), it’s so awesome that it’s so cool.

Usage link: GetX code generation IDEA plug-in, super detailed function explanation (see the essence through the phenomenon) - Nuggets (juejin.cn)

If you want in-depth analysis: [Source Code] In-depth Analysis of Flutter GetX | We will eventually go our own way (10,000-word pictures and text) - Nuggets (juejin.cn)