Flutter 路由插件 go_router 使用详解

基本使用

安装依赖

安装

dev_dependencies:
    go_router: ^16.2.1

引用

import 'package:go_router/go_router.dart';

新建路由页面

在 lib 目录下新建页面文件夹 pages 下分别建立以下页面

home.dart

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('home page')),
      body: Center(child: Text('home')),
    );
  }
}

document.dart

import 'package:flutter/material.dart';

class DocumentPage extends StatefulWidget {
  const DocumentPage({super.key});

  @override
  State<DocumentPage> createState() => _DocumentPageState();
}

class _DocumentPageState extends State<DocumentPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('document page')),
      body: Center(child: Text('document')),
    );
  }
}

settings.dart

import 'package:flutter/material.dart';

class SettingsPage extends StatefulWidget {
  const SettingsPage({super.key});

  @override
  State<SettingsPage> createState() => _SettingsPageState();
}

class _SettingsPageState extends State<SettingsPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('settings page')),
      body: Center(child: Text('settings')),
    );
  }
}

user.dart

import 'package:flutter/material.dart';

class UserPage extends StatefulWidget {
  const UserPage({super.key});

  @override
  State<UserPage> createState() => _UserPageState();
}

class _UserPageState extends State<UserPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('User page')),
      body: Center(child: Text('user')),
    );
  }
}

新建路由表

在 lib 目录下新建 router 文件夹，在目录中新建 routes.dart pub 文档地址：https://pub.dev/packages/go_router/example

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:flutter_amap/pages/home.dart';
import 'package:flutter_amap/pages/document.dart';
import 'package:flutter_amap/pages/user.dart';
import 'package:flutter_amap/pages/settins.dart';

final GoRouter router = GoRouter(
  routes: <RouteBase>[
    GoRoute(
      path: '/',
      name: "home",
      builder: (BuildContext context, GoRouterState state) {
        return const HomePage();
      },
      routes: <RouteBase>[],
    ),
    GoRoute(
      path: '/user',
      name: "user",
      builder: (BuildContext context, GoRouterState state) {
        return const UserPage();
      },
    ),
    GoRoute(
      path: '/settings',
      name: "settings",
      builder: (BuildContext context, GoRouterState state) {
        return const SettingsPage();
      },
    ),
    GoRoute(
      path: '/document',
      name: "document",
      builder: (BuildContext context, GoRouterState state) {
        return const DocumentPage();
      },
    ),
  ],
);

main 入口设置路由

import 'package:flutter/material.dart';
import 'package:flutter_amap/router/routes.dart';

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      title: 'Material App',
      theme: ThemeData(primarySwatch: Colors.lightGreen),
      routerConfig: router,
    );
  }
}

路由跳转

在 home.dart 中引入 go_router,有三种方式实现跳转

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

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('home page')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                // context.push('/settings'); //路径跳转
                // context.pushNamed('settings'); //路由名跳转
                GoRouter.of(context).push("/settings");
                // GoRouter.of(context).pushNamed("settings");
              },
              child: Text("跳转到设置页面"),
            ),
          ],
        ),
      ),
    );
  }
}

路由 params 传参

需要更改三个地方，跳转传参，路由带传参，页面接收参数

跳转带参数

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

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('home page')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                context.pushNamed(
                  'user',
                  pathParameters: {"uid": "123  "},
                ); //路由名跳转
              },
              child: Text("跳转到user 传值"),
            ),
          ],
        ),
      ),
    );
  }
}

路由带传参

GoRoute(
    path: '/user/:uid',
    name: "user",
    builder: (BuildContext context, GoRouterState state) {
    return UserPage(uid: state.pathParameters["uid"]);
    },
),

接收参数

更改user.dart接收参数

import 'package:flutter/material.dart';

class UserPage extends StatefulWidget {
  String? uid;
  UserPage({super.key, this.uid});

  @override
  State<UserPage> createState() => _UserPageState();
}

class _UserPageState extends State<UserPage> {
  @override
  void initState() {
    super.initState();
    print(widget.uid);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('User page')),
      body: Center(child: Text('user')),
    );
  }
}

路由 query 传参

页面跳转带参

 ElevatedButton(
    onPressed: () {
    context.pushNamed(
        'user',
        queryParameters: {"aid": "123  "},
    ); //路由名跳转
    },
    child: Text("跳转到user 传值"),
),

路由传参

GoRoute(
    path: '/document',
    name: "document",
    builder: (BuildContext context, GoRouterState state) {
    final String? aid = state.uri.queryParameters['aid'];
    return DocumentPage(aid: aid as String);
    },

页面接收

import 'package:flutter/material.dart';

class DocumentPage extends StatefulWidget {
  String aid;
  DocumentPage({super.key, required this.aid});

  @override
  State<DocumentPage> createState() => _DocumentPageState();
}

class _DocumentPageState extends State<DocumentPage> {
  @override
  void initState() {
    super.initState();
    print(widget.aid);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('document page')),
      body: Center(child: Text('document')),
    );
  }
}