flutter配置fluro

1、编写路由配置文件

①创建routes.dart文件 并编写Routes类的基本结构    
②定义路由名称    
③定义路由处理函数
④编写函数configureRoutes关联路由名称和处理函数  

2、在Application中配置路由

①定义router  
②通过调用configureRoutes配置router  
③在MaterialApp中使用router 

routes.dart

import 'package:fluro/fluro.dart';
import 'package:flutter/material.dart';
import './pages/home/index.dart';
import './pages/login.dart';

class Routes {
  //1、定义路由名称
  static String home = '/';
  static String login = '/login';
  //2、定义路由处理函数
  static Handler _homeHandler = Handler(handlerFunc: (BuildContext context, Map params) {
    return HomePage();
  });
  static Handler _loginHandler = Handler(handlerFunc: (BuildContext context, Map params) {
    return LoginPage();
  });
  //3、编写函数configureRoutes关联路由名称和处理函数
  static void configureRoutes(FluroRouter router) {
    router.define(home, handler: _homeHandler);
    router.define(login, handler: _loginHandler);
  }

}

application.dart

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

class Application extends StatelessWidget {
  const Application({ Key key }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final router = FluroRouter();
    Routes.configureRoutes(router);
    return MaterialApp(
      onGenerateRoute: router.generator,
    );
  }
}

效果图如下:
flutter配置fluro_第1张图片

你可能感兴趣的:(flutter)