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 ~


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;
  }


Related articles: