如何从FutureBuilder获取Firestore数据并传递至Flutter另一页面？

要将page1.dart中FutureBuilder获取到的userUniqueHandler传递到page2.dart的MainScreen，可以通过回调函数+导航传参的方式实现，以下是具体步骤和代码示例：

1. 修正FetchSingleData组件，添加数据回调 #

首先调整数据获取逻辑，将返回类型修正为实际的Future<String>，并新增回调函数用于传递加载完成的数据：

class FetchSingleData extends StatelessWidget {
  // 新增回调：数据加载完成后触发，传递userUniqueHandler
  final Function(String) onDataLoaded;

  const FetchSingleData({super.key, required this.onDataLoaded});

  // 修正返回类型为Future<String>，直接返回获取到的userUniqueHandler
  Future<String> fetchUniqueHandler() async {
    final snapshot = await FirebaseFirestore.instance.collection('users').get();
    return snapshot.docs.first['userUniqueHandle'] as String;
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<String>(
      future: fetchUniqueHandler(),
      builder: (context, AsyncSnapshot<String> snapshot) {
        if (snapshot.connectionState == ConnectionState.done) {
          if (snapshot.hasData) {
            final uniqueHandler = snapshot.data!;
            onDataLoaded(uniqueHandler); // 触发回调传递数据
            return Text(uniqueHandler);
          } else {
            return const Text('数据加载失败');
          }
        }
        return const CircularProgressIndicator();
      },
    );
  }
}

2. 在Page1中使用组件，获取数据后导航传参 #

如果需要数据加载完成后自动跳转到MainScreen，可以在回调中直接触发导航：

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Page1')),
      body: Center(
        child: FetchSingleData(
          onDataLoaded: (uniqueHandler) {
            // 数据加载完成后，导航到MainScreen并传递参数
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => MainScreen(uniqueHandler: uniqueHandler),
              ),
            );
          },
        ),
      ),
    );
  }
}

如果需要手动触发导航（比如点击按钮跳转），可以将数据存储在Page1的状态中：

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

  @override
  State<Page1> createState() => _Page1State();
}

class _Page1State extends State<Page1> {
  String? _uniqueHandler;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Page1')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            FetchSingleData(
              onDataLoaded: (handler) {
                setState(() {
                  _uniqueHandler = handler;
                });
              },
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: _uniqueHandler == null ? null : () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => MainScreen(uniqueHandler: _uniqueHandler!),
                  ),
                );
              },
              child: const Text('跳转到MainScreen'),
            ),
          ],
        ),
      ),
    );
  }
}

3. 在MainScreen中接收参数 #

在page2.dart的MainScreen中定义接收参数的构造函数，直接使用传递过来的值：

class MainScreen extends StatelessWidget {
  final String uniqueHandler;

  const MainScreen({super.key, required this.uniqueHandler});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('MainScreen')),
      body: Center(
        child: Text('获取到的UserUniqueHandler：$uniqueHandler'),
      ),
    );
  }
}

内容的提问来源于stack exchange，提问作者jpg.hue