Flutter Web：如何从URL提取路径参数并展示对应动态文本？

你可以通过Flutter的路由方案实现需求，下面是两种主流实现方式：

方式一：使用go_router（推荐） #

1. 添加依赖 #

在pubspec.yaml中引入依赖：

dependencies:
  flutter:
    sdk: flutter
  go_router: ^12.0.0 # 可替换为最新版本

2. 配置路由与页面 #

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerConfig: _router,
      title: 'Undangan Page',
    );
  }

  static final _router = GoRouter(
    routes: [
      GoRoute(
        path: '/undangan/:name1/:name2',
        builder: (context, state) {
          final name1 = state.pathParameters['name1']!;
          final name2 = state.pathParameters['name2']!;
          return UndanganPage(name1: name1, name2: name2);
        },
      ),
    ],
  );
}

class UndanganPage extends StatelessWidget {
  final String name1;
  final String name2;

  const UndanganPage({super.key, required this.name1, required this.name2});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text('$name1 and $name2.'),
      ),
    );
  }
}

方式二：使用原生路由 #

如果不想依赖第三方库，可通过原生onGenerateRoute实现：

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Undangan Page',
      onGenerateRoute: (settings) {
        if (settings.name?.startsWith('/undangan/') ?? false) {
          final parts = settings.name!.split('/');
          if (parts.length == 4) {
            final name1 = parts[2];
            final name2 = parts[3];
            return MaterialPageRoute(
              builder: (context) => UndanganPage(name1: name1, name2: name2),
            );
          }
        }
        return MaterialPageRoute(builder: (context) => const Scaffold(body: Center(child: Text('无效路由'))));
      },
    );
  }
}

// UndanganPage 代码与方式一中一致

测试效果 #

运行Flutter Web应用后，访问对应URL即可看到预期效果：

• 访问http://localhost:56485/#/undangan/daffa/nanda，页面显示daffa and nanda.
• 访问http://localhost:56485/#/undangan/saya/kamu，页面显示saya and kamu.

内容的提问来源于stack exchange，提问作者Silent Roar