Flutter扫码菜单应用：Web端唯一URL构建及移动端URL生成问询

1. 构建带唯一菜单URL的Flutter Web应用 #

步骤1：配置支持参数的路由 #

可以用Flutter原生路由或GoRouter实现带动态参数的路径，示例如下：

// 原生路由实现
MaterialApp(
  onGenerateRoute: (settings) {
    if (settings.name?.startsWith('/menu/') ?? false) {
      final menuId = settings.name!.split('/').last;
      return MaterialPageRoute(
        builder: (context) => MenuDetailPage(menuId: menuId),
      );
    }
    return MaterialPageRoute(builder: (context) => HomePage());
  },
);

// GoRouter实现（推荐，路由管理更灵活）
final router = GoRouter(
  routes: [
    GoRoute(
      path: '/',
      builder: (context, state) => HomePage(),
    ),
    GoRoute(
      path: '/menu/:menuId',
      builder: (context, state) {
        final menuId = state.pathParameters['menuId']!;
        return MenuDetailPage(menuId: menuId);
      },
    ),
  ],
);

步骤2：提取URL参数并查询Firestore数据 #

在菜单详情页中，通过路由参数拿到menu_id，再从Firestore拉取对应菜单数据并渲染：

class MenuDetailPage extends StatelessWidget {
  final String menuId;
  const MenuDetailPage({super.key, required this.menuId});

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<DocumentSnapshot>(
      future: FirebaseFirestore.instance.collection('menus').doc(menuId).get(),
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return const Center(child: CircularProgressIndicator());
        }
        if (!snapshot.hasData || !snapshot.data!.exists) {
          return const Center(child: Text('该菜单不存在'));
        }
        final menuData = snapshot.data!.data() as Map<String, dynamic>;
        // 根据菜单数据渲染UI，示例用ListView展示内容
        return ListView(
          padding: const EdgeInsets.all(16),
          children: [
            Text(menuData['title'] ?? '菜单标题', style: const TextStyle(fontSize: 24, fontWeight: FontWeight.bold)),
            const SizedBox(height: 16),
            // 循环渲染菜品列表
            ...(menuData['dishes'] as List).map((dish) => ListTile(
                  title: Text(dish['name']),
                  subtitle: Text('¥${dish['price']}'),
                )),
          ],
        );
      },
    );
  }
}

步骤3：部署Web应用 #

将Flutter Web应用部署到Firebase Hosting、Vercel等平台，获取固定的基础域名（比如https://your-menu-app.web.app），后续生成的菜单URL都基于这个域名拼接。

2. Flutter移动端生成菜单URL及二维码 #

步骤1：拼接唯一菜单URL #

菜单上传到Firestore后，获取自动生成的menu_id（或自定义的唯一标识），拼接Web应用的基础URL：

// 替换为你的Web应用部署域名
const baseWebUrl = 'https://your-menu-app.web.app';

// 上传菜单到Firestore并获取menuId
final docRef = await FirebaseFirestore.instance.collection('menus').add({
  'title': 'XX餐厅菜单',
  'dishes': [...],
  // 其他菜单字段
});
final menuId = docRef.id;

// 拼接完整的菜单专属URL
final menuUrl = '$baseWebUrl/menu/$menuId';

步骤2：生成二维码 #

使用qr_flutter库生成二维码（先在pubspec.yaml中添加依赖）：

import 'package:qr_flutter/qr_flutter.dart';

// 在页面中直接展示二维码
QrImageView(
  data: menuUrl,
  version: QrVersions.auto,
  size: 250.0,
  backgroundColor: Colors.white,
);

// 可选：将二维码保存为图片
final qrImage = await QrPainter(
  data: menuUrl,
  version: QrVersions.auto,
  color: Colors.black,
  backgroundColor: Colors.white,
).toImage(300);

内容的提问来源于stack exchange，提问作者Sameera Tennakoon