Using get in Flutter

Advantages of get:
routing management, state management

Introduced in the project
Add Get to your pubspec.yaml file:

dependencies:
  get: ^4.6.5

Import the files to use:

import 'package:get/get.dart';

GetX address

  • Github:https://github.com/jonataslaw/getx
  • Pub:https://pub.dev/packages/get

The main entry configuration
only needs to change MaterialApp to GetMaterialApp

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

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

page jump

Get.to(NextScreen());

Jump by name

Get.toNamed('/details');

return to previous page

Get.back();

Jump to the next page and close the current page, used for splash screen and login page:

Get.off(NextScreen());

Jump to the next page and close all other pages:

Get.offAll(NextScreen());

Simple state management counter example:
logic layer: processing page logic

class CounterEasyLogic extends GetxController {
  var count = 0;

  void increase() {
    ++count;
    update();
  }
}

view layer:

class CounterEasyPage extends StatelessWidget {
  final logic = Get.put(CounterEasyLogic());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('计数器-简单式')),
      body: Center(
        child: GetBuilder<CounterEasyLogic>(builder: (logic) {
          return Text(
            '点击了 ${logic.count} 次',
            style: TextStyle(fontSize: 30.0),
          );
        }),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => logic.increase(),
        child: Icon(Icons.add),
      ),
    );
  }
}

Responsive state management
logic layer:

  • The .obs operation is written after the variable value here, which means that the variable is defined as a responsive variable. When the variable value changes, the refresh method of the page will automatically refresh
  • Basic types, List, and classes can all be added with .obs to make them responsive variables
class CounterRxLogic extends GetxController {
  var count = 0.obs;

  ///自增
  void increase() => ++count;
}

View layer:

class CounterRxPage extends StatelessWidget {
  final logic = Get.put(CounterRxLogic());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('计数器-响应式')),
      body: Center(
        child: Obx(() {
          return Text(
            '点击了 ${logic.count.value} 次',
            style: TextStyle(fontSize: 30.0),
          );
        }),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => logic.increase(),
        child: Icon(Icons.add),
      ),
    );
  }
}

Set the entire class object as the response type:
When you change one of the variables of the class and then perform an update operation, as long as the Obx() that wraps the response class variable will perform a refresh operation, and set the entire class as the response type, it needs to be combined with the actual scene use

// model
// 我们将使整个类成为可观察的,而不是每个属性。
class User{
    User({this.name = '', this.age = 0});
    String name;
    int age;
}

// controller
final user = User().obs;
//当你需要更新user变量时。
user.update( (user) { // 这个参数是你要更新的类本身。
    user.name = 'Jonny';
    user.age = 18;
});
// 更新user变量的另一种方式。
user(User(name: 'João', age: 35));

// view
Obx(()=> Text("Name ${user.value.name}: Age: ${user.value.age}"));
// 你也可以不使用.value来访问模型值。
user().name; // 注意是user变量,而不是类变量(首字母是小写的)。

Guess you like

Origin blog.csdn.net/Billy_Zuo/article/details/130324185