简单示例#

animal.dart

class Animal {
  String name;
  int age;
  Animal(this.name, this.age);
}

person.dart

import 'package:get/get.dart';

class Person {
  RxString username = 'rh'.obs;
  RxInt age = 18.obs;
}

完整示例:

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: MyHomepage(),
    );
  }
}

class MyHomepage extends StatelessWidget {
  final RxInt _counter = 0.obs;
  final RxMap _userInfo = {'name': '隆海', 'age': 20, 'gender': 1}.obs;
  var p = Person();
  var a = Animal('小花狗', 2).obs;
  MyHomepage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Title'),
        centerTitle: true,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Obx(() => Text(
                  "${_counter.value}",
                  style: TextStyle(fontSize: 30),
                )),
            SizedBox(
              height: 10,
            ),
            Obx(() => Text("姓名:${_userInfo['name']}")),
            SizedBox(
              height: 10,
            ),
            Obx(() => Text("年龄:${_userInfo['age']}")),
            SizedBox(
              height: 10,
            ),
            Obx(() => Text("性别:${_userInfo['gender'] == 1 ? '男' : '女'}")),
            SizedBox(
              height: 10,
            ),
            Obx(
              () => Text("${p.username}"),
            ),
            SizedBox(
              height: 10,
            ),
            Obx(
              () => Text("${a.value.name}"),
            )
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _counter.value++;
          _userInfo['name'] = '大竹仔';
          p.username.value = p.username.toUpperCase();
          a.value.name = '小黑狗';
          a.value = a.value;
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

Getx 依赖管理简介#

Get有一个简单而强大的依赖管理器，它允许你只用1行代码就能检索到与你的Bloc或Controller相同的类，无需Provider context，无需inheritedWidget。

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

想象一下，你已经浏览了无数条路由，现在你需要拿到一个被遗留在控制器中的数据，那你需要一个状态管理器与Provider或Get_it一起使用来拿到它，对吗？用Get则不然，Get会自动为你的控制器找到你想要的数据，而你甚至不需要任何额外的依赖关系。

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

Flutter默认创建的 “计数器 “项目有100多行（含注释），为了展示Get的强大功能，我将使用 GetX 重写一个”计数器 Plus版”，实现：

• 每次点击都能改变状态
• 在不同页面之间切换
• 在不同页面之间共享状态
• 将业务逻辑与界面分离

声明绑定的控制器#

此种页面共享的数据是全局共享,如果是页面共享需要结合binding

新建lib/controllers/counter.dart

import 'package:get/get.dart';

class CounterController extends GetxController {
  CounterController() {
    print('CounterController执行了');
  }
  RxInt counter = 0.obs;
  inc() {
    counter.value++;
  }

  dec() {
    counter.value--;
  }
}

home.dart执行inc方法#

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

class HomePage extends StatefulWidget {
  const HomePage({super.key});
  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  CounterController counterController = Get.put(CounterController());
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Obx(() => Text(
                "${counterController.counter}",
                style: Theme.of(context).textTheme.headlineLarge,
              )),
          SizedBox(
            height: 10,
          ),
          ElevatedButton(
              onPressed: () {
                counterController.inc();
              },
              child: Text('计数器+1')),
          SizedBox(
            height: 10,
          ),
        ],
      ),
    );
  }
}

Category.dart执行dec方法#

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

class CategoryPage extends StatefulWidget {
  const CategoryPage({super.key});

  @override
  State<CategoryPage> createState() => _CategoryPageState();
}

class _CategoryPageState extends State<CategoryPage> {
  CounterController counterController = Get.find();
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Obx(() => Text(
                "${counterController.counter}",
                style: Theme.of(context).textTheme.headlineLarge,
              )),
          SizedBox(
            height: 10,
          ),
          ElevatedButton(
              onPressed: () {
                counterController.dec();
              },
              child: Text('计数器-1')),
          SizedBox(
            height: 10,
          ),
        ],
      ),
    );
  }
}

Controller绑定数据的几种方法#

方法一

CountController countController = Get.put(CountController());
或者
final CountController countController = Get.find();

Obx(()=>Text("${countController.count}",style:
Theme.of(context).textTheme.headline1)),

方法二

只是绑定数据无需调用Get.put(CountController());

GetX<CountController>(
    init: CountController(),
    builder: (controller) {
        return Text(
        "${controller.count}",
        style: const TextStyle(color: Colors.green, fontSize: 30),
        );
    },
),

GetxBinding#

需求:所有页面都要使用状态管理

在我们使用GetX 状态管理器的时候，往往每次都是用需要手动实例化一个控制器，这样的话基本页面都需要实例化一次，这样就太麻烦了，而Binding 能解决上述问题，可以在项目初始化时把所有需要进行状态管理的控制器进行统一初始化，接下来看代码演示：

在前面的文章中，我们经常使用Get.put(MyController()) 来进行控制器实例的创建，这样我们就算不使用控制器实例也会被创建，其实Getx还提供很多创建实例的方法，可根据不同的业务来进行创建，接下来我们简单介绍一下几个最常用的

• Get.put()： 不使用控制器实例也会被创建
• Get.lazyPut()： 懒加载方式创建实例，只有在使用时才创建
• Get.putAsync()： Get.put() 的异步版版本
• Get.create()： 每次使用都会创建一个新的实例

声明需要进行的绑定控制器类#

/lib/controllers/counter.dart

import 'package:get/get.dart';

class CounterController extends GetxController {
  CounterController() {
    print('CounterController执行了');
  }
  RxInt counter = 0.obs;
  inc() {
    counter.value++;
  }

  dec() {
    counter.value--;
  }
}

/lib/controllers/list.dart

import 'package:get/get.dart';

class ListController extends GetxController {
  ListController() {
    print('ListController执行了');
  }
  RxList list = ['大竹仔', '隆海', '我是降海'].obs;
  add(element) {
    list.add(element);
  }
}

在/lib/binding/binding.dart

import 'package:get/get.dart';
import '../controllers/counter.dart';
import '../controllers/list.dart';

class AllControllerBinding implements Bindings {
  @override
  void dependencies() {
    Get.lazyPut<CounterController>(() => CounterController());
    Get.lazyPut<ListController>(() => ListController());
  }
}

在项目启动时进行初始化绑定#

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Material App',
      initialBinding: AllControllerBinding(), //全局绑定Bindings
      theme: ThemeData(
          primarySwatch: Colors.pink,
          appBarTheme: const AppBarTheme(
            centerTitle: true,
          )),
      initialRoute: '/',
      defaultTransition: Transition.rightToLeft, //全局路由动画,rightToLeft是ios风格动画
      // onGenerateRoute: onGenerateRoute,
      getPages: AppPage.routes,
    );
  }
}

在页面中使用状态管理器#

setting.dart

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

class SettingPage extends StatefulWidget {
  const SettingPage({super.key});

  @override
  State<SettingPage> createState() => _SettingPageState();
}

class _SettingPageState extends State<SettingPage> {
  ListController listController = Get.find<ListController>();
  @override
  Widget build(BuildContext context) {
    return Center(
      child: ListView(
        children: listController.list.map((item) {
          return ListTile(
            title: Text("${item}"),
          );
        }).toList(),
      ),
    );
  }
}

home.dart

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../../controllers/counter.dart';
import '../../controllers/list.dart';

class HomePage extends StatefulWidget {
  const HomePage({super.key});
  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  CounterController counterController = Get.find();
  ListController listController = Get.find();
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Obx(() => Text(
                "${counterController.counter}",
                style: Theme.of(context).textTheme.headlineLarge,
              )),
          SizedBox(
            height: 10,
          ),
          ElevatedButton(
              onPressed: () {
                counterController.inc();
                listController.list.add('增加一外名称');
              },
              child: Text('计数器+1')),
          SizedBox(
            height: 10,
          ),
          ElevatedButton(
              onPressed: () {
                Get.toNamed('/shop');
              },
              child: Text('shop页面')),
        ],
      ),
    );
  }
}

category.dart

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

class CategoryPage extends StatefulWidget {
  const CategoryPage({super.key});

  @override
  State<CategoryPage> createState() => _CategoryPageState();
}

class _CategoryPageState extends State<CategoryPage> {
  CounterController counterController = Get.find();
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Obx(() => Text(
                "${counterController.counter}",
                style: Theme.of(context).textTheme.headlineLarge,
              )),
          SizedBox(
            height: 10,
          ),
          ElevatedButton(
              onPressed: () {
                counterController.dec();
              },
              child: Text('计数器-1')),
          SizedBox(
            height: 10,
          ),
        ],
      ),
    );
  }
}

初始化项目#

在创建好的flutter项目的目录中运行

get init 

创建页面#

get create page:search
get create page:cart
get create page:user
get create page:category

创建控制器#

get create controller:counter
在指定目录里面创建控制器
get create controller:counter on home

创建view#

只会生成一个继承GetView的dart文件,相当于创建一个组件

get create view:dialogview on home

创建provider#

生成一个继承GetConnect的类，用于请求数据，GetConnect可以便捷的通过http或websockets进行前后台通信

get create provider:user on home

生成国际化文件#

在 assets/locales 目录创建 json 格式的语言文件

新建文件zh_CN.json

{
    "buttons": {
    "login": "登录",
    "sign_in": "注册",
    "logout": "注销",
    "sign_in_fb": "用 Facebook 登录",
    "sign_in_google": "用 Google 登录",
    "sign_in_apple": "用 Apple 登录"
    }
}

新建文件en_US.json

{
    "buttons": {
    "login": "Login",
    "sign_in": "Sign-in",
    "logout": "Logout",
    "sign_in_fb": "Sign-in with Facebook",
    "sign_in_google": "Sign-in with Google",
    "sign_in_apple": "Sign-in with Apple"
    }
}

运行 :

get generate locales assets/locales

会在项目下新增文件lib/generated/locales.g.dart,生成以下代码

// DO NOT EDIT. This is code generated via package:get_cli/get_cli.dart

// ignore_for_file: lines_longer_than_80_chars
// ignore: avoid_classes_with_only_static_members
class AppTranslation {
  static Map<String, Map<String, String>> translations = {
    'zh_CN': Locales.zh_CN,
    'en_US': Locales.en_US,
  };
}

class LocaleKeys {
  LocaleKeys._();
  static const buttons_login = 'buttons_login';
  static const buttons_sign_in = 'buttons_sign_in';
  static const buttons_logout = 'buttons_logout';
  static const buttons_sign_in_fb = 'buttons_sign_in_fb';
  static const buttons_sign_in_google = 'buttons_sign_in_google';
  static const buttons_sign_in_apple = 'buttons_sign_in_apple';
}

class Locales {
  static const zh_CN = {
    'buttons_login': '登录',
    'buttons_sign_in': '注册',
    'buttons_logout': '注销',
    'buttons_sign_in_fb': '用 Facebook 登录',
    'buttons_sign_in_google': '用 Google 登录',
    'buttons_sign_in_apple': '用 Apple 登录',
  };
  static const en_US = {
    'buttons_login': 'Login',
    'buttons_sign_in': 'Sign-in',
    'buttons_logout': 'Logout',
    'buttons_sign_in_fb': 'Sign-in with Facebook',
    'buttons_sign_in_google': 'Sign-in with Google',
    'buttons_sign_in_apple': 'Sign-in with Apple',
  };
}

现在只需要在 GetMaterialApp 中加入

GetMaterialApp(
    ...
    translationsKeys: AppTranslation.translations,
    locale:const Locale('zh', 'CN'), // 将会按照此处指定的语言翻译
    fallbackLocale:const Locale('en', 'US'), // 添加一个回调语言选项，以备上面指定的语言翻译不存在
    ...
)

生成model#

在实际项目中我们需要把服务器返回的map对象转换成model类，这个时候就可以使用get中的generate model 生成model

get generate model on models from "https://jdmall.ronhai.com/api/focus"

Unhandled exception:
Null check operator used on a null value
#0      PubspecUtils.nullSafeSupport (package:get_cli/common/utils/pubspec/pubspec_utils.dart:146:76)
#1      new TypeDefinition (package:get_cli/common/utils/json_serialize/sintaxe.dart:81:22)
#2      new TypeDefinition.fromDynamic (package:get_cli/common/utils/json_serialize/sintaxe.dart:65:14)
#3      ModelGenerator._generateClassDefinition (package:get_cli/common/utils/json_serialize/model_generator.dart:68:36)
#4      ModelGenerator.generateUnsafeDart (package:get_cli/common/utils/json_serialize/model_generator.dart:148:9)
#5      ModelGenerator.generateDartClasses (package:get_cli/common/utils/json_serialize/model_generator.dart:181:28)
#6      GenerateModelCommand.execute (package:get_cli/commands/impl/generate/model/model.dart:41:35)
<asynchronous suspension>
#7      main.<anonymous closure> (file:///Users/rh/.pub-cache/hosted/pub.dev/get_cli-1.9.1/bin/get.dart:18:38)
<asynchronous suspension>
#8      main (file:///Users/rh/.pub-cache/hosted/pub.dev/get_cli-1.9.1/bin/get.dart:18:9)
<asynchronous suspension>

dart pub global deactivate get_cli

dart pub global activate -s git https://github.com/knottx/get_cli.git --git-ref fix-generate-model