Flutter数据类声明与值保存及Supabase查询结果全局可用问题

我具备命令式编程背景，目前正在学习Flutter和Supabase，尝试将Supabase数据库查询返回的结果存入自定义的Respondent数据类中。打印查询得到的response内容显示正常，但将其赋值给respondent变量后该变量仍为null，单独逐个赋值也无法生效；若在build方法中尝试使用该变量，会触发LateInitializationError。此外，我希望该respondent对象在赋值完成后能在整个应用中全局可用，请问该如何解决？

代码片段 #

Respondent数据类 #

class Respondent {
  String id;
  String householdNumber;
  String lastname;
  String firstname;
  String? middlename;
  ...

  Respondent(
      {required this.id,
      required this.householdNumber,
      required this.lastname,
      required this.firstname,
      this.middlename,
      ...});

  static Respondent fromJson(Map<String, dynamic> json) => Respondent(
        id: json['id'],
        householdNumber: json['household_number'],
        lastname: json['lastname'],
        firstname: json['firstname'],
        middlename: json['middlename'],
        ...
      );

  Map<String, dynamic> toJson() => <String, dynamic>{
        'id': id,
        'household_number': householdNumber,
        'lastname': lastname,
        'firstname': firstname,
        'middlename': middlename,
        ...
      };
}

HomePage页面代码 #

class HomePage extends StatefulWidget {
  final String respondentId;

  const HomePage(this.respondentId, {super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final supabase = Supabase.instance.client;
  late Respondent respondent;

  Future<void> getRespondent(String id) async {
    try {
      final response =
          await supabase.from('respondents').select().eq('id', id).single();

      setState(() {
        if (mounted) {
          print('Response' + response.toString());

          respondent = Respondent.fromJson(response);
          print('Respondent' + respondent.lastname);
          //respondent.lastname = response['last_name'].toString();
        }
      });
    } catch (error) {
      const SnackBar(
        content: Text('Unexpected Error'),
      );
    }
  }

  @override
  void initState() {
    getRespondent(widget.respondentId);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('XXX'),
      ),
      body: Text(widget.respondentId),
    );
  }
}

一、修复赋值失败与LateInitializationError问题 #

1. 核心问题分析 #

• LateInitializationError：late Respondent respondent声明的变量在异步查询完成前就可能被build方法访问，导致未初始化错误。
• 赋值失效：大概率是fromJson方法中的字段名与Supabase数据库实际字段不匹配（比如代码注释里的response['last_name']和fromJson里的json['lastname']不一致），导致对象初始化失败。

2. 代码修复方案 #

方案A：用可空变量+加载状态管理

将late Respondent respondent改为可空类型，并添加加载状态避免空访问：

class _HomePageState extends State<HomePage> {
  final supabase = Supabase.instance.client;
  Respondent? respondent;
  bool isLoading = true;

  Future<void> getRespondent(String id) async {
    try {
      final response = await supabase.from('respondents').select().eq('id', id).single();
      // 重点检查：确保json中的key与数据库字段完全一致
      setState(() {
        respondent = Respondent.fromJson(response);
        isLoading = false;
      });
    } catch (error) {
      if(mounted) {
        ScaffoldMessenger.of(context).showSnackBar(
          const SnackBar(content: Text('获取受访者数据失败')),
        );
      }
      setState(() => isLoading = false);
    }
  }

  @override
  void initState() {
    getRespondent(widget.respondentId);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('XXX')),
      body: isLoading 
          ? const Center(child: CircularProgressIndicator())
          : respondent != null 
              ? Text('${respondent!.lastname} ${respondent!.firstname}')
              : const Text('未找到该受访者'),
    );
  }
}

方案B：用FutureBuilder处理异步数据（更优雅）

直接用FutureBuilder管理异步查询的生命周期，避免手动维护加载状态：

class _HomePageState extends State<HomePage> {
  final supabase = Supabase.instance.client;

  Future<Respondent> getRespondent(String id) async {
    final response = await supabase.from('respondents').select().eq('id', id).single();
    // 确认字段映射正确
    return Respondent.fromJson(response);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('XXX')),
      body: FutureBuilder<Respondent>(
        future: getRespondent(widget.respondentId),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return const Center(child: CircularProgressIndicator());
          } else if (snapshot.hasError) {
            return Center(child: Text('错误：${snapshot.error}'));
          } else if (snapshot.hasData) {
            final respondent = snapshot.data!;
            // 此处可将respondent存入全局状态
            return Text('${respondent.lastname} ${respondent.firstname}');
          } else {
            return const Text('未找到数据');
          }
        },
      ),
    );
  }
}

二、实现Respondent对象全局可用 #

推荐使用状态管理库实现全局状态，以Provider为例：

1. 添加依赖 #

在pubspec.yaml中添加provider依赖：

dependencies:
  flutter:
    sdk: flutter
  provider: ^6.0.5

2. 创建全局状态类 #

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

class RespondentProvider extends ChangeNotifier {
  Respondent? _respondent;

  Respondent? get respondent => _respondent;

  void setRespondent(Respondent newRespondent) {
    _respondent = newRespondent;
    notifyListeners(); // 通知所有监听的页面更新
  }
}

3. 在应用入口初始化Provider #

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'your_provider_file_path.dart';

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => RespondentProvider(),
      child: const MyApp(),
    ),
  );
}

4. 在HomePage中设置全局状态 #

在FutureBuilder的hasData分支中，将查询到的respondent存入全局：

// 在FutureBuilder的builder回调里
else if (snapshot.hasData) {
  final respondent = snapshot.data!;
  // 获取全局Provider实例并设置数据
  final provider = Provider.of<RespondentProvider>(context, listen: false);
  provider.setRespondent(respondent);
  return Text('${respondent.lastname} ${respondent.firstname}');
}

5. 在其他页面访问全局Respondent #

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'your_provider_file_path.dart';

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

  @override
  Widget build(BuildContext context) {
    // 监听全局状态变化
    final respondent = Provider.of<RespondentProvider>(context).respondent;
    return Scaffold(
      body: respondent != null 
          ? Text('全局受访者：${respondent.lastname}')
          : const Text('未获取到受访者数据'),
    );
  }
}

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