1.新建一个Flutter工程

2.更方便的实现SnackBar、Dialog、BottomSheet

1.GetBuilder

在图1的过程中我们实现了路由的跳转以及路由跳转的时候从堆栈中移除当前页面的功能。

在本篇博客的demo中还提供了Getx路由跳转的传值功能以及使用GetX实现SnackBar、Dialog,路由的别名跳转等功能。

图2.路由功能

图3.使用GetX实现Snackbar,Dialog,BottomSheet

图4.Flutter本地开发环境

本来想着一步一步的把创建的过程提出来的仔细一想这些基础的代码看到的兄弟们应该都会这里直接贴出来新建的这个工程吧。

您可以下载下来看一下这些功能怎么实现实在懒或者是感觉代码太简单的haul的话也可以在脑海中思考下这些功能的实现。

2.GetX初体验

和其他的Flutter三方库一样笔者这里用的getx的版本为4.6.6.首先我们应该在yaml文件中配置下getX。

get:

安装好之后我们把MaterialApp改成GetMaterialApp即可在项目中使用GetX了。

1.路由跳转

我们先看一下普通的路由跳转例如在上面的例子中普通的路由跳转我们应该这么写

导航到

Navigator.push(context,MaterialPageRoute(builder:

(context)

代码是不是简单了很多而且不需要获取上下文的context有些情况下获取context比较麻烦。

2.跳转并从堆栈中销毁当前页面

当我们需要使用路由跳转并传值的时候我们仅需要再GetMaterialApp中配置getPages属性代码如下

import

package:state_management/fourth.dart;

import

package:state_management/second.dart;

import

package:state_management/third.dart;

import

MyApp({super.key});overrideWidget

build(BuildContext

ColorScheme.fromSeed(seedColor:

Colors.deepPurple),useMaterial3:

true,),getPages:

?Text(上一个页面传递的参数${Get.arguments}):const

Text(),

debugPrint(dataFromFourth:$dataFromFourth);

child:

2.更方便的实现SnackBar、Dialog、BottomSheet

使用getx,我们可以在不使用context的情况下使用很少代码实现Snackbar、dialog,BottomSheet。

Get.snackbar(GetX

ScaffoldMessenger.of(context).showSnackBar(

const

上一章节中我们简单体验了GetX的以便方便之处这一节我们将详细的讲解下Fluttter的状态管理功能。

1.GetBuilder

这是一种手动状态管理器内存消耗最小使用较少的内存接近0mb当UI中的单独组件越多性能越突出。

我们以计数器的效果为例看一下GetBuilder的用法在下面的实例中我们点击count按钮计时器每次加1.

图5.计时器实例

首先我们创建一个GetxController用来保存计时器变量这里要注意的是GetBuilder是手动状态管理器我们需要主动的调用update方法代码如下

import

在使用GetBuilder的页面我们只需要使用GetBuilder包裹住自己的Widget即可。

我们通过Get.put方法获取GetxController实例。

final

当我们点击按钮的时候直接调用GetxController中的方法即可

import

package:state_management/controllers/counterController.dart;class

StateManagementPage

{StateManagementPage({super.key});final

CounterController

Get.put(CounterController());overrideWidget

build(BuildContext

MainAxisAlignment.center,children:

Widget[GetBuilderCounterController(builder:

(_){return

Text(当前Count的值:${_.counter});},),//

(){},

(){counterController.increment();},

child:

在上述的代码中我们首先初始化了一个GetxController实例然后调用该实例的increment方法初次之外我们还可以每次创建GetBuilder的时候都调用GetxController的初始化方法代码如下

GetBuilderCounterController(builder:

(_){

Get.findCounterController().increment();

完整代码如下

package:state_management/controllers/counterController.dart;class

StateManagementPage

{StateManagementPage({super.key});overrideWidget

build(BuildContext

MainAxisAlignment.center,children:

Widget[GetBuilderCounterController(builder:

(_){return

Text(当前Count的值:${_.counter});},init:

(){},

(){Get.findCounterController().increment();},

child:

GetBuilder提供了一个id参数用于局部更新界面。

通过指定不同的id可以实现更精细的控件刷新避免整个页面刷新。

在控制器中使用update指定id:

package:state_management/controllers/partialRefreshController.dart;class

PartialRefreshPage

PartialRefreshPage({super.key});overrideWidget

build(BuildContext

MainAxisAlignment.center,children:

[const

40,),GetBuilderPartialRefreshController(id:

counter1,builder:

PartialRefreshController(),),const

SizedBox(height:

40,),GetBuilderPartialRefreshController(id:

counter2,builder:

PartialRefreshController(),),const

SizedBox(height:

{Get.findPartialRefreshController().incrementCounter1();},child:

const

{Get.findPartialRefreshController().incrementCounter2();},child:

const

GetBuilder用于简单的状态管理它是一个手动状态管理器需要我们手动调用update方法更新页面使用GetBuilder的时候要确保对应的GetxController被初始化使用

2.Obx

当我们使用Obx的时候第一步先定义一个控制器包含响应式变量counter和增加计数的方法。

import

Get.put(CounterController());return

Scaffold(appBar:

${counterController.counter},style:

TextStyle(fontSize:

24),);}),),floatingActionButton:

FloatingActionButton(onPressed:

{counterController.increment();

increment

在界面中分别用Obx监听counter1和counter2的变化。

import

multi_counter_controller.dart;class

MultiCounterPage

Get.put(MultiCounterController());return

Scaffold(appBar:

MainAxisAlignment.center,children:

[Obx(()

24))),ElevatedButton(onPressed:

counterController.incrementCounter1,child:

Text(增加计数器1),),ElevatedButton(onPressed:

counterController.incrementCounter2,child:

3.总结

MyApp({super.key});overrideWidget

build(BuildContext

GetX提供了国际化的功能我们只需要继承Translations把要国际化的内容以键值对的形式放在字典里即可

import

使用的时候只要将.tr追加到指定的键上就会使用Get.locale和Get.fallbackLocale的当前值进行翻译。

Text(title.tr);

当我们需要修改语言的时候调用Get.updateLocale(locale)来更新语言环境。

然后翻译会自动使用新的locale。

var