Flutter学习之Fluro路由处理器

Fluro路由

• 安装 - fluro | Flutter Package

• 声明路由处理器

• Fluro路由

• 使用路由

1.创建路由处理器

在 lib 目录下新建文件夹 routes , 然后新建一个名为 RoutesHandler 的Dart文件

import 'package:flutter/material.dart';
import 'package:fluro/fluro.dart';
// 引入页面
import '../pages/index.dart';
import '../pages/user/Login.dart';
import '../pages/notfound/NotFount.dart';

// 路由处理器 ----------------------------------------------------------------
// 首页处理器
var indexHandler = Handler(
  handlerFunc: (BuildContext? context, Map<String, List<String>> params) {
    return Index();
  }
);

// 登录页面处理器
var loginHandler = Handler(
  handlerFunc: (BuildContext? context, Map<String, List<String>> params) {
    return Login();
  }
);

// 未知页面处理器
var notFoundHandler = Handler(
  handlerFunc: (BuildContext? context, Map<String, List<String>> params) {
    return NotFount();
  }
);

2.创建Fluro路由

在 routes 目录下新建一个名为 Routes 的Dart文件

import 'package:flutter/material.dart';
import 'package:fluro/fluro.dart';
// 引入处理器
import './RoutesHandler.dart';

// 声明路由
class Routes {
  static void configureRoutes(FluroRouter router) {
    // 使用 router.define(路由地址,路由处理器) 来创建路由
    router.define('/', handler: indexHandler);
    router.define('/login', handler: loginHandler);

    // 404未知页面
    router.notFoundHandler = notFoundHandler;
  }
}

3.创建全局文件

在 lib 目录下新建文件夹 utils , 然后新建一个名为 Global的Dart文件

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

// // 一些全局的类
class Global {
  // 路由
  static FluroRouter router = new FluroRouter();
}

4.main.dart 文件中引入

import 'package:fluro/fluro.dart';
import 'package:flutter/material.dart';
import './pages/index.dart';
import 'routes/Routes.dart';
import 'utils/Global.dart';

void main() {
  // 初始化路由
  FluroRouter router = new FluroRouter();
  Routes.configureRoutes(router);
  // 将初始化的路由放大全局组件中
  Global.router = router;

  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      // home: Index(),
      // 指定动态路由 
      onGenerateRoute: Global.router.generator,
      // 默认路由
      initialRoute: '/',
    );
  }
}