Configuration and Jump of fluro for Flutter Routing
- 2021-12-19 06:48:21
- OfStack
Directory 1, pubspec. yaml guide package, pay attention to format ~
2. Create a new routing class, change the class to define the path of the page, and then set the page handler and path into the route
3. Create new router_handler. dart, processing parameters and jump pages
4. Call the pass parameter
5. Receive data
6. The problem comes, because fluro can't be directly transmitted to Chinese, so we need to use coding code decoding here, that is, encode and decode
1. pubspec. yaml guide package, pay attention to the format ~
2. Create a new routing class, change the class to define the path of the page, and then set the page handler and the path into the route
3. Create new router_handler. dart, processing parameters and jump pages
4. Call the pass parameter
5. Receive data
6. The problem comes, because fluro can't be directly transmitted to Chinese, so it is necessary to use coding code decoding here, that is, encode and decode
1. pubspec. yaml guide package, pay attention to the format ~
dependencies:
flutter:
sdk: flutter
fluro: ^1.6.3
2. Create a new routing class, change the class to define the path of the page, and then set the page handler and the path into the route
class Routers {
static Router router;
// Folders must follow main.dart Directory peer
static String root = '/';
static String loginPage = '/loginPage';
static String tabsPage = '/tabsPage';
static String messageDetailPage = '/messageDetailPage';
static String serviceSettingPage = '/serviceSettingPage';
static void configureRoutes(Router router) {
router.notFoundHandler = Handler(
handlerFunc: (BuildContext context, Map<String, List<String>> params) {
print("ROUTE WAS NOT FOUND !!!");
return null;
});
router.define(loginPage, handler: loginHandler);
router.define(messageDetailPage, handler: messageDetailHandler);
router.define(tabsPage, handler: tabsHandler);
router.define(serviceSettingPage, handler: serviceSettingHandler);
}
// Proceed to the parameter encode To solve the problem that there are special characters in the parameters, which affect fluro Route matching , Especially Chinese
static Future navigateTo(BuildContext context, String path,
{Map<String, dynamic> params,
TransitionType transition = TransitionType.inFromRight,
bool replace = false}) {
String query = "";
if (params != null) {
int index = 0;
for (var key in params.keys) {
var value = Uri.encodeComponent(params[key]);
if (index == 0) {
query = "?";
} else {
query = query + "\&";
}
query += "$key=$value";
index++;
}
}
print(' I am navigateTo Parameters passed: $query');
path = path + query;
return router.navigateTo(context, path,
transition: transition, replace: replace);
}
static void finishAllToLoginPage() {
// Jump to the specified page and close all current pages
// Closing all pages causes tabs_page Page executes first initState , and then execute dispose Because you can no longer monitor, so pay attention
Global.navKey.currentState.pushAndRemoveUntil(
new MaterialPageRoute(builder: (context) => new LoginPage()),
(route) => route == null);// Is executed for all pages dispose
}
}
3. Create new router_handler. dart, processing parameters and jump pages
// Login
var loginHandler = new Handler(
handlerFunc: (BuildContext context, Map<String, List<String>> params) {
return new LoginPage();
});
// Message Details Page
var messageDetailHandler = new Handler(
handlerFunc: (BuildContext context, Map<String, dynamic> params) {
// Take parameters
String barTitle = params["bar_title"]?.first;
String itemDataJson = params["item_data"]?.first;
return new MessageDetailPage(
barTitle: barTitle,
itemDataJson: itemDataJson,
);
});
// Home page Tabs
var tabsHandler = new Handler(
handlerFunc: (BuildContext context, Map<String, List<String>> params) {
return new TabsPage();
});
//Service setting
var serviceSettingHandler = new Handler(
handlerFunc: (BuildContext context, Map<String, List<String>> params) {
return new ServiceSettingPage();
});
4. Call the pass parameter
// Object needs to be transferred String
String itemDataJson = FluroConvertUtils.object2string(
_bulletinsList[index]);
Routers.navigateTo(context, Routers.messageDetailPage,
params: {
'bar_title': "Detail",
'item_data': itemDataJson,
});
5. Receive data
//String Reverse Object
Bulletins itemData =
Bulletins.fromJson(FluroConvertUtils.string2map(itemDataJson));
6. The problem comes, because fluro can't be directly transmitted to Chinese, so it is necessary to use coding code decoding here, that is, encode and decode
class FluroConvertUtils {
/// fluro Before passing Chinese parameters, convert, fluro Chinese delivery is not supported
static String fluroCnParamsEncode(String originalCn) {
return jsonEncode(Utf8Encoder().convert(originalCn));
}
/// fluro After passing, take out the parameters and parse them
static String fluroCnParamsDecode(String encodeCn) {
var list = List<int>();
/// String decoding
jsonDecode(encodeCn).forEach(list.add);
String value = Utf8Decoder().convert(list);
return value;
}
/// string Convert to int
static int string2int(String str) {
return int.parse(str);
}
/// string Convert to double
static double string2double(String str) {
return double.parse(str);
}
/// string Convert to bool
static bool string2bool(String str) {
if (str == 'true') {
return true;
} else {
return false;
}
}
/// object Convert to string json
static String object2string<T>(T t) {
return fluroCnParamsEncode(jsonEncode(t));
}
/// string json Convert to map
static Map<String, dynamic> string2map(String str) {
return json.decode(fluroCnParamsDecode(str));
}
}
Perfect solution, this is also the whole process used by fluro, which is basically encapsulated, and Routers needs to be initialized in main. dart:
MyApp() {
// Registration initialization fluro
final router = Router();
Routers.configureRoutes(router);
Routers.router = router;
}