Route Management

1. Định tuyến không sử dụng tên route

Định tuyến dễ dàng hơn với GetX. Thay MaterialApp thành GetMaterialApp ở main.dart

GetMaterialApp( // Before: MaterialApp(
  home: MyHome(),
)

Chuyển đến một trang mới:

Get.to(NextScreen());

Đóng snackbars, dialogs, bottomsheets, hay bất cứ thứ gì có thể đóng bằng Navigator.pop(context):

Get.back();

Đến trang mới và không cho lui về trang hiện tại (Thường được sử dụng cho SplashScreen, Login,..):

Get.off(NextScreen());

Đến trang mới và xóa hết các trang cũ:

Get.offAll(NextScreen());

Đến trang mới và nhận dữ liệu trả về từ trang đó ngay khi back về trang hiện tại:

var data = await Get.to(Payment());

Trả dữ liệu về trang trước theo cú pháp:

Get.back(result: 'success');

2. Định tuyến sử dụng tên route

Đối với chuyển trang bằng tên thì cũng tương tự các hàm trên nhưng có thêm hậu tố Named như: toNamed, offNamed, offAllNamed, ...

void main() {
  runApp(
    GetMaterialApp(
      unknownRoute: GetPage(name: '/notfound', page: () => UnknownRoutePage()),
      initialRoute: '/',
      getPages: [
        GetPage(name: '/', page: () => MyHomePage()),
        GetPage(name: '/second', page: () => Second()),
      ],
    )
  );
}

3. Truyền dữ liệu cho trang mới

3.1 Truyền dữ liệu với arguments:

Get.toNamed("/NextScreen", arguments: 'Get is the best');

print(Get.arguments);
//print out: Get is the best

3.2 Dynamic urls links

Dynamic urls khá quen thuộc đối với Web Developer. GetX hỗ trợ nó cho Flutter. Ta có thể sử dụng theo syntax thuộc tính

Get.offAllNamed("/NextScreen?device=phone&id=354&name=Enzo");

print(Get.parameters['id']);
// out: 354
print(Get.parameters['name']);
// out: Enzo

Hoặc có thể sử dụng theo cấu trúc định sẵn như ví dụ bên dưới:

 GetPage(
        name: '/profile/:user',
        page: () => UserProfile(),
      ),

Gửi dữ liệu với route được định nghĩa ở trên.

Get.toNamed("/profile/34954");

Nhận dữ liệu tương tự như ở trên.

print(Get.parameters['user']);
// out: 34954

4. SnackBars, Dialogs, BottomSheets

4.1 SnackBars

Get.snackbar('Hi', 'i am a modern snackbar');

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:(){},
  barBlur: 20,
  isDismissible: true,
  duration: Duration(seconds: 3),
);


  ////////// ALL FEATURES //////////
  //     Color colorText,
  //     Duration duration,
  //     SnackPosition snackPosition,
  //     Widget titleText,
  //     Widget messageText,
  //     bool instantInit,
  //     Widget icon,
  //     bool shouldIconPulse,
  //     double maxWidth,
  //     EdgeInsets margin,
  //     EdgeInsets padding,
  //     double borderRadius,
  //     Color borderColor,
  //     double borderWidth,
  //     Color backgroundColor,
  //     Color leftBarIndicatorColor,
  //     List<BoxShadow> boxShadows,
  //     Gradient backgroundGradient,
  //     FlatButton mainButton,
  //     OnTap onTap,
  //     bool isDismissible,
  //     bool showProgressIndicator,
  //     AnimationController progressIndicatorController,
  //     Color progressIndicatorBackgroundColor,
  //     Animation<Color> progressIndicatorValueColor,
  //     SnackStyle snackStyle,
  //     Curve forwardAnimationCurve,
  //     Curve reverseAnimationCurve,
  //     Duration animationDuration,
  //     double barBlur,
  //     double overlayBlur,
  //     Color overlayColor,
  //     Form userInputForm
  ///////////////////////////////////

4.2 Dialogs

Để mở một dialog:

Get.dialog(YourDialogWidget());

Để mở dialog mặc định:

Get.defaultDialog(
  onConfirm: () => print("Ok"),
  middleText: "Dialog made in 3 lines of code"
);

4.3 BottomSheets

Get.bottomSheet giống như showModalBottomSheet, nhưng không cần param context.

Get.bottomSheet(
  Container(
    child: Wrap(
      children: <Widget>[
        ListTile(
          leading: Icon(Icons.music_note),
          title: Text('Music'),
          onTap: () => {}
        ),
        ListTile(
          leading: Icon(Icons.videocam),
          title: Text('Video'),
          onTap: () => {},
        ),
      ],
    ),
  )
);