- vừa được xem lúc

GetX - Make Flutter easy (Part 2)

0 0 31

Người đăng: Nguyen Minh Duong

Theo Viblo Asia

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

Bình luận

Bài viết tương tự

- vừa được xem lúc

Giới thiệu Typescript - Sự khác nhau giữa Typescript và Javascript

Typescript là gì. TypeScript là một ngôn ngữ giúp cung cấp quy mô lớn hơn so với JavaScript.

0 0 510

- vừa được xem lúc

Cài đặt WSL / WSL2 trên Windows 10 để code như trên Ubuntu

Sau vài ba năm mình chuyển qua code trên Ubuntu thì thật không thể phủ nhận rằng mình đã yêu em nó. Cá nhân mình sử dụng Ubuntu để code web thì thật là tuyệt vời.

0 0 383

- vừa được xem lúc

Đặt tên commit message sao cho "tình nghĩa anh em chắc chắn bền lâu"????

. Lời mở đầu. .

1 1 715

- vừa được xem lúc

Tìm hiểu về Resource Controller trong Laravel

Giới thiệu. Trong laravel, việc sử dụng các route post, get, group để gọi đến 1 action của Controller đã là quá quen đối với các bạn sử dụng framework này.

0 0 343

- vừa được xem lúc

Phân quyền đơn giản với package Laravel permission

Như các bạn đã biết, phân quyền trong một ứng dụng là một phần không thể thiếu trong việc phát triển phần mềm, dù đó là ứng dụng web hay là mobile. Vậy nên, hôm nay mình sẽ giới thiệu một package có thể giúp các bạn phân quyền nhanh và đơn giản trong một website được viết bằng PHP với framework là L

0 0 432

- vừa được xem lúc

Bạn đã biết các tips này khi làm việc với chuỗi trong JavaScript chưa ?

Hi xin chào các bạn, tiếp tục chuỗi chủ đề về cái thằng JavaScript này, hôm nay mình sẽ giới thiệu cho các bạn một số thủ thuật hay ho khi làm việc với chuỗi trong JavaScript có thể bạn đã hoặc chưa từng dùng. Cụ thể như nào thì hãy cùng mình tìm hiểu trong bài viết này nhé (go).

0 0 423