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变量,而不是类变量(首字母是小写的)。