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

Fluro: một framework định tuyến Flutter

0 1 18

Người đăng: Anh Nguyen

Theo Viblo Asia

Trong quá trình phát triển ứng dụng Flutter, ngoài định tuyến chính thức do Flutter cung cấp, bạn cũng có thể sử dụng một số framework định tuyến của bên thứ ba để triển khai quản lý và điều hướng trang, chẳng hạn như Fluro và Frouter. Fluro là một framework định tuyến Flutter tuyệt vời. Việc sử dụng Fluro phức tạp hơn so với framework định tuyến mặc định, nhưng nó rất phù hợp với các dự án lớn và vừa. Bởi vì nó có ưu điểm là phân cấp, tổ chức rõ ràng, mở rộng thuận tiện và dễ dàng quản lý định tuyến tổng thể. Trước khi sử dụng Fluro, bạn cần thêm phần dependency Fluro vào tệp pubspec.yaml, như hình dưới đây.

dependencies: fluro: "^2.0.0"

Nếu bạn không thể thêm các dependencies Fluro bằng phương pháp trên, bạn cũng có thể thêm các dependencies Fluro bằng cách sử dụng git, như được hiển thị bên dưới.

dependencies: fluro: git: git://github.com/theyakka/fluro.git

Sau khi thêm thành công các dependencies thư viện Fluro, bạn có thể sử dụng Fluro để quản lý định tuyến ứng dụng và phát triển điều hướng. Để thuận tiện cho việc quản lý thống nhất các tuyến đường, trước tiên bạn cần tạo một tệp bản đồ tuyến đường mới để quản lý từng tuyến đường. Như hình dưới đây, là mã mẫu của tệp cấu hình định tuyến route_handles.dart.


import 'package:fluro/fluro.dart';
import 'package:flutter/material.dart';
import 'package:flutter_demo/page_a.dart';
import 'package:flutter_demo/page_b.dart';
import 'package:flutter_demo/page_empty.dart'; //Empty page
var emptyHandler = new Handler( handlerFunc: (BuildContext context, Map<String, List<String>> params) { return PageEmpty(); }); //A page
var aHandler = new Handler( handlerFunc: (BuildContext context, Map<String, List<Object>> params) { return PageA(); }); //Page B
var bHandler = new Handler( handlerFunc: (BuildContext context, Map<String, List<Object>> params) { return PageB(); });

Sau khi hoàn thành cấu hình định tuyến cơ bản, chúng tôi cũng cần một tệp cấu hình định tuyến tổng thể tĩnh, tệp này thuận tiện cho chúng tôi sử dụng trong trang định tuyến. Như được hiển thị bên dưới, là mã mẫu của tệp cấu hình định tuyến tổng thể route.dart.

import 'package:fluro/fluro.dart';
import 'package:flutter_demo/route_handles.dart'; class Routes { static String page_a = "/"; //Need attention static String page_b = "/b"; static void configureRoutes(Router router) { router.define(page_a, handler: aHandler); router.define(page_b, handler: bHandler); router.notFoundHandler =emptyHandler; //Empty page }
}

Trong cấu hình tổng thể của định tuyến, cũng cần xử lý đường dẫn không tồn tại, tức là sử dụng trang trống hoặc trang mặc định để thay thế. Đồng thời, cần lưu ý rằng trang chủ của ứng dụng phải được cấu hình bằng "/".

Để dễ sử dụng, Router cũng cần phải static để có thể gọi trực tiếp trên bất kỳ trang nào. Như hình dưới đây, là mã mẫu của tệp application.dart.

import 'package:fluro/fluro.dart'; class Application{ static Router router;
}

Sau khi hoàn thành các thao tác trên, bạn có thể nhập tệp cấu hình định tuyến và tệp tĩnh trong tệp main.dart, như hình dưới đây.

import 'package:fluro/fluro.dart';
import 'package:flutter_demo/routes.dart'; import 'application.dart'; void main() { Router router = Router(); Routes.configureRoutes(router); Application.router = router; runApp(MyApp());
} class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Demo App', onGenerateRoute: Application.router.generator, ); }
}

Nếu bạn muốn chuyển đến một trang, chỉ cần sử dụng phương thức Application.router.navigateTo(), như được hiển thị bên dưới.

Application.router.navigateTo(context,"/b"); //b is to configure routing

Chạy mã mẫu ở trên, hiệu ứng được hiển thị trong hình bên dưới.

Có thể thấy rằng mặc dù sử dụng cồng kềnh hơn Flutter’s Navigator nhưng Fluro lại rất phù hợp với các dự án quy mô vừa và lớn. Kiến trúc phân lớp của nó cũng rất thuận tiện cho việc nâng cấp và bảo trì công trình sau này. Bạn có thể đưa ra lựa chọn hợp lý tùy theo tình hình thực tế.

Link: https://github.com/lukepighetti/fluro

Bình luận

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

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

Học Flutter từ cơ bản đến nâng cao. Phần 1: Làm quen cô nàng Flutter

Lời mở đầu. Gần đây, Flutter nổi lên và được Google PR như một xu thế của lập trình di động vậy.

0 0 253

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

Học Flutter từ cơ bản đến nâng cao. Phần 3: Lột trần cô nàng Flutter, BuildContext là gì?

Lời mở đầu. Màn làm quen cô nàng FLutter ở Phần 1 đã gieo rắc vào đầu chúng ta quá nhiều điều bí ẩn về nàng Flutter.

0 0 189

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

[Android] Hiển thị Activity trên màn hình khóa - Show Activity over lock screen

Xin chào các bạn, Hôm nay là 30 tết rồi, ngồi ngắm trời chờ đón giao thừa, trong lúc rảnh rỗi mình quyết định ngồi viết bài sau 1 thời gian vắng bóng. .

0 0 93

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

Tìm hiểu Proguard trong Android

1. Proguard là gì . Cụ thể nó giúp ứng dụng của chúng ta:. .

0 0 82

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

Làm ứng dụng học toán đơn giản với React Native - Phần 6

Chào các bạn một năm mới an khang thịnh vượng, dồi dào sức khỏe. Lại là mình đây Đây là link app mà các bạn đang theo dõi :3 https://play.google.com/store/apps/details?id=com.

0 0 51

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

20 Plugin hữu ích cho Android Studio

1. CodeGlance. Plugin này sẽ nhúng một minimap vào editor cùng với thanh cuộn cũng khá là lớn. Nó sẽ giúp chúng ta xem trước bộ khung của code và cho phép điều hướng đến đoạn code mà ta mong muốn một cách nhanh chóng.

0 0 301