Flutter 踩坑路由

Posted 2021-06-04 GHUIJS

0.安装路由包（pubspec.yaml文件添加配置）

 

1.创建公共小部件page_conent.dart

import 'package:flutter/material.dart';

//编写无状态组件
class PageCont extends StatelessWidget {
  final String name;
  const PageCont({Key key, this.name}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("我系渣渣：$name"),
      ),
    );
  }
}

2.创建首页index.dart

import 'package:flutter/material.dart';
import 'package:flutter_application_1/widget/page_conent.dart';

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: PageCont(
        name: '首页',
      ),
    );
  }
}

3.创建login.dart

import 'package:flutter/material.dart';
import 'package:flutter_application_1/widget/page_conent.dart';

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: PageCont(
        name: '登录',
      ),
    );
  }
}

4.配置路由文件

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

class Routes {
  static String home = '/';
  static String login = '/login';

  static Handler _homeHandler =
      Handler(handlerFunc: (BuildContext context, Map<String, dynamic> params) {
    return HomePage();
  });

  static Handler _loginHandler =
      Handler(handlerFunc: (BuildContext context, Map<String, dynamic> params) {
    return LoginPage();
  });

  static void configureRoutes(FluroRouter router) {
    router.define(login, handler: _loginHandler);
    router.define(home, handler: _homeHandler);
  }
}

最终实现一个路由能跳，一个不能跳，这个就是个坑，不建议用，路由建议使用MaterialApp里的routes熟悉。