Flutter笔记--Fluro

Flutter本身带有路由，但目前流行的是第三方路由Fluro，它也相对成熟，看看其用法:

在pubspec.yaml文件里，注册版本依赖，代码如下：

dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.

  fluro: ^1.6.4

dev_dependencies:

fluro_application.dart

import 'package:fluro/fluro.dart';

class FluroApplication{
  static FluroRouter router;
}

fluro_routes.dart


import 'package:flutter/material.dart';
import 'package:fluro/fluro.dart';
import 'package:flutterplay/routes/route_handlers.dart';

class FluroRoutes {
  
  static String testbase = "/testbase";

  static void configureRoutes(FluroRouter router){
    router.notFoundHandler = new Handler(
        handlerFunc: (BuildContext context,Map<String,List<String>> params){
          print("route is not find !");
        });

    router.define(testbase, handler: testHandler);
  }
}

route_handlers.dart

import 'package:fluro/fluro.dart';
import 'package:flutter/material.dart';
import 'package:flutterplay/pages/register/TestBasePage.dart';

var testHandler = new Handler(
    handlerFunc: (BuildContext context, Map<String, List<String>> params) {
      return new TestBasePage();
    });

main.dart

void main() {

  runApp(MyApp());
}

class MyApp extends StatelessWidget {

  MyApp() {
  //初始化Fluro
    final router = new FluroRouter();
    FluroRoutes.configureRoutes(router);
    FluroApplication.router = router;
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home:Scaffold(
          appBar: AppBar(
              title: Text('Flutter Demo')
          ),
          body: HomePage(),
        )

}

HomePage

class HomePage extends StatefulWidget {
  HomePage({Key key}) : super(key: key);

  _HomePage createState() => _HomePage();
}

 class _HomePage extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        RaisedButton(
            child: Text("TestBase"),
            onPressed: () {
             //跳转到TestBase页面
              FluroApplication.router.navigateTo(context,'/testbase',transition: TransitionType.fadeIn);
            }
        ]),
   );
 }
}

TestBase

import 'package:flutter/material.dart';

class TestBase extends StatelessWidget {
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:AppBar(
        title: Text("TestBase"),
      ) ,
      body: Text("TestBase Play"),
    );
  }
}

注意: 每增加一个路由，都需要在router文件和handler文件进行配置。

参考:fluro

猜你喜欢