如何在Flutter中通过Fluro路由传递并获取页面参数？

嘿，刚看了你的问题，这其实是Fluro路由里很常见的场景，我来一步步教你怎么在joke.dart里拿到传递的id参数～

第一步：修改路由定义，把参数传递给Joke页面 #

你之前的路由定义已经正确捕获了:id参数，但需要把这个参数从params里取出来，传给Joke页面的构造函数：

router.define('joke/:id', handler: Handler(
  handlerFunc: (BuildContext context, Map<String, dynamic> params) {
    // Fluro的params是Map<String, List<String>>类型，所以取第一个元素即可
    String jokeId = params['id']?.first ?? '';
    return Joke(jokeId: jokeId);
  }
));

第二步：在Joke页面定义接收参数的构造函数 #

在joke.dart里，给Joke组件添加一个接收id的构造函数，这样就能拿到传递过来的参数了：

class Joke extends StatelessWidget {
  final String jokeId;

  // 构造函数接收jokeId参数，开启空安全的话记得加required
  const Joke({Key? key, required this.jokeId}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // 现在你可以在页面里任意使用jokeId啦
    return Scaffold(
      appBar: AppBar(title: const Text('Joke Detail')),
      body: Center(
        child: Text('当前Joke的ID是：$jokeId'),
      ),
    );
  }
}

补充说明 #

• Fluro的params本质是Map<String, List<String>>，这是因为路由参数可能存在多个同名的情况（比如joke?id=1&id=2），所以我们通常取first来获取单个参数。
• 用params['id']?.first ?? ''是做了空安全处理，防止参数不存在时出现空指针问题。
• 你在home.dart里的跳转代码是没问题的，'joke/' + '${document.documentID}'的拼接方式完全正确，只要document.documentID是字符串类型就可以正常传递。

内容的提问来源于stack exchange，提问作者Cvetan Karadjov