跟随Udemy课程学习Flutter Firebase集成时出现运行错误求助

核心报错原因 #

你遇到的报错是Flutter 2.0+空安全特性和旧教程代码不规范导致的，具体有两处直接触发报错的问题：

• 多余导入了仅Web平台支持的dart:html包，移动端开发不需要该依赖
• 两个FutureBuilder都没有指定泛型，导致snapshot.data被判定为dynamic类型，无法直接调用length、下标索引等属性和方法

具体修复步骤 #

1. 移除无效导入 #

删除main.dart第一行的import 'dart:html';代码即可。

2. 规范FutureBuilder使用 #

给FutureBuilder指定对应泛型，同时在使用snapshot.data前增加非空判断，另外推荐把Firebase初始化逻辑移到main函数中，避免页面重绘时重复执行初始化操作。

3. 修复后的完整main.dart代码 #

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:fire_base1/user.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Future<List<User>> getData() async {
    final res = await FirebaseFirestore.instance.collection("users").get();

    List<User> myresult = <User>[];
    for (int i = 0; i < res.docs.length; i++) {
      User user = User(
          name: res.docs[i]["name"],
          last_name: res.docs[i]["last_name"],
          email: res.docs[i]["email"]);
      myresult.add(user);
    }
    return myresult;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("FireBase"),
        ),
        body: FutureBuilder<List<User>>(
          future: getData(),
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              return const Center(
                child: CircularProgressIndicator(),
              );
            } else if (snapshot.hasData && snapshot.data!.isNotEmpty) {
              return ListView.builder(
                itemCount: snapshot.data!.length,
                itemBuilder: (context, index) {
                  final user = snapshot.data![index];
                  return ListTile(
                    title: Text("${user.name} ${user.last_name}"),
                    subtitle: Text(user.email),
                  );
                },
              );
            } else {
              return const SizedBox();
            }
          },
        ));
  }
}

4. 可选优化（user.dart） #

可以给User类新增fromMap构造方法，简化数据转换逻辑：

class User {
  String name;
  String last_name;
  String email;

  User({required this.name, required this.last_name, required this.email});

  User.fromMap(Map<String, dynamic> map) : 
    name = map["name"],
    last_name = map["last_name"],
    email = map["email"];

  Map<String, dynamic> toMap() {
    Map<String, dynamic> data = <String, dynamic>{};
    data["name"] = name;
    data["last_name"] = last_name;
    data["email"] = email;
    return data;
  }
}

对应getData方法可以简化为：

Future<List<User>> getData() async {
  final res = await FirebaseFirestore.instance.collection("users").get();
  return res.docs.map((doc) => User.fromMap(doc.data())).toList();
}

内容的提问来源于stack exchange，提问作者Meriç Türkyılmaz