GetX - Make Flutter easy (Part 2)
Bài đăng này đã không được cập nhật trong 3 năm
Giới thiệu
Ở phần trước mình đã giới thiệu qua cơ bản về cách Get quản lý state như thế nào. Bên cạnh việc là công cụ quản lý state cực kỳ mạnh mẽ và an toàn thì Get còn làm được nhiều hơn thế nữa. Hôm nay chúng ta sẽ đi đến phần tiếp theo của Get: Route manager . Sau phần này mình sẽ hướng dẫn các bạn build một project structure sử dụng Getx mà các bạn có thể dùng với các dự án trong thực tế
Get Route manager
Để sử dụng được Get Route manager bạn cũng cần phải sử dụng GetMaterialApp thay vì MaterialApp như thông thường
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return GetMaterialApp(
enableLog: true,
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
initialBinding: DependenciesBinding(),
initialRoute: '/search',
getPages: [
GetPage(
name: '/search',
page: () => SearchPage(),
binding: SearchBinding()),
GetPage(
name: '/detail', page: () => DetailPage(), binding: DetailBinding())
],
);
}
}
Navigation without named routes
Navigate đến một màn hình
Để navigate đến một màn hình mới với Get đơn giản chỉ cần gọi như sau
// Without GetX
Navigator.push(
context,
MaterialPageRoute(builder: (context) => NextScreen()),
);
// With GetX
Get.to(NextScreen());
Có thể thấy ở đây chúng ta không cần phải truyền vào Context như cách thông thường, vì vậy bạn có thể đặt những dòng logic code này vào Controller (để hiểu về controller các bạn vui lòng đọc lại phần 1) lúc này code bạn sẽ cực kỳ clear khi phần UI và phần logic được tách ra hoàn toàn.
Close màn hình hiện tại
Để close màn hình hiện tại, snackbars, dialogs hoặc bottomsheets
// Without GetX
Navigator.pop(context);
// With GetX
Get.back();
Tất cả hàm xử lý liên quan đến navigator của GetX đều không cần truyền vào tham số context: GetX đủ thông mình để xác định chính xác context của nó
Những option navigate khác
//To go to the next screen and no option to go back to the previous screen
Get.off(NextScreen());
//To go to the next screen and cancel all previous routes (useful in shopping carts, polls, and tests)
Get.offAll(NextScreen())
//To navigate to the next route, and receive or update data as soon as you return from it:
var data = await Get.to(Payment());
on other screen, send a data for previous route:
//Get.back(result: 'success');
Navigation with named routes
Tương tự GetX cũng hỗ trợ kiểu named routes
//To navigate to nextScreen
Get.toNamed("/NextScreen");
//To navigate and remove the previous screen from the tree.
Get.offNamed("/NextScreen");
//To navigate and remove all previous screens from the tree.
Get.offAllNamed("/NextScreen");
Support Dynamic urls link
//Dynamic urls links
Get.offAllNamed("/NextScreen?device=phone&id=354&name=Enzo");
on your controller/bloc/stateful/stateless class:
print(Get.parameters['id']);
// out: 354
print(Get.parameters['name']);
// out: Enzo
Dễ dàng pass parametor với Get named route
//You can also receive NamedParameters with Get easily:
GetMaterialApp(
initialRoute: '/',
getPages: [
GetPage(
name: '/profile/',
page: () => MyProfile(),
),
GetPage(
name: '/profile/:userID',
page: () => UserProfile(),
)
Send data on route name
Get.toNamed("/profile/34954");
On second screen take the data by parameter
print(Get.parameters['userID']);
// out: 34954
Bạn có thể lắng nghe khi một route được gọi đến. Trong case này mình sẽ show ads khi route /second được gọi
If you want listen Get events to trigger actions, you can to use routingCallback to it
GetMaterialApp(
routingCallback: (routing) {
if(routing.current == '/second'){
openAds();
}
}
)
Show Snackbar
với get việt show Snackbar sẽ cực kỳ đơn giản, bạn không cần quan tâm đến Scaffold như cách thông thường nữa
//With Get:
Get.snackbar('Hi', 'i am a modern snackbar');
//With Get, all you have to do is call your Get.snackbar from anywhere in your code or customize it however you want!
Get.snackbar(
"Hey i'm a Get SnackBar!", // title
"It's unbelievable! I'm using SnackBar without context!", // message
icon: Icon(Icons.alarm),
shouldIconPulse: true,
onTap:(){},
isDismissible: true,
duration: Duration(seconds: 3),
);
Show dialog
//To open dialog:
Get.dialog(YourDialogWidget());
//To open default dialog:
Get.defaultDialog(
onConfirm: () => print("Ok"),
middleText: "Dialog made in 3 lines of code"
);
Show BottomSheets
//Get.bottomSheet is like ModalBottomSheet, but don't need of context.
Get.bottomSheet(
Container(
child: Wrap(
children: <Widget>[
ListTile(
leading: Icon(Icons.music_note),
title: Text('Music'),
onTap: () => {}
),
],
),
)
);
Bạn có thể đọc thêm về Get Route manager tại đây: https://github.com/jonataslaw/getx/blob/master/docs/en_US/route_management.md
All rights reserved