Flutter应用首次启动时sqflite数据库数据不显示问题求助

核心问题是首次进入页面时未主动触发本地数据加载，或加载后未通知UI刷新状态，以下是具体解决步骤：

1. 在页面初始化阶段调用数据加载逻辑 #

打开主页面的State类（比如_HomePageState），重写initState方法，在其中调用获取待办数据的异步方法，确保页面启动时就拉取本地数据：

@override
void initState() {
  super.initState();
  // 首次启动时加载本地待办数据
  _loadLocalTodos();
}

Future<void> _loadLocalTodos() async {
  // 调用DBHelper的方法获取所有待办
  final todos = await dbHelper.getAllTodos();
  // 更新状态，触发UI刷新
  setState(() {
    _todoList = todos;
  });
}

2. 确保数据库初始化完成后再加载数据 #

检查你的DBHelper类，必须保证在查询数据前数据库已完成初始化和表创建：

class DBHelper {
  static final DBHelper _instance = DBHelper._internal();
  factory DBHelper() => _instance;
  DBHelper._internal();

  Database? _database;

  Future<Database> get database async {
    if (_database != null) return _database!;
    // 初始化数据库（包含表创建逻辑）
    _database = await _initDatabase();
    return _database!;
  }

  Future<Database> _initDatabase() async {
    final path = await getDatabasesPath();
    final dbPath = join(path, 'todo_database.db');
    
    return await openDatabase(
      dbPath,
      version: 1,
      onCreate: (db, version) async {
        // 创建待办表
        await db.execute('''
          CREATE TABLE todos(
            id INTEGER PRIMARY KEY AUTOINCREMENT,
            title TEXT NOT NULL,
            description TEXT,
            is_completed INTEGER DEFAULT 0
          )
        ''');
      },
    );
  }

  // 获取所有待办的方法，确保先拿到初始化后的数据库
  Future<List<Todo>> getAllTodos() async {
    final db = await database;
    final maps = await db.query('todos');
    return maps.map((map) => Todo.fromMap(map)).toList();
  }
}

3. 用FutureBuilder简化异步数据加载（可选优化） #

如果不想手动管理initState和setState，可以用FutureBuilder直接在build方法中处理异步数据加载，自动处理加载状态和UI更新：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: const Text('待办事项')),
    body: FutureBuilder<List<Todo>>(
      // 传入获取待办数据的Future
      future: dbHelper.getAllTodos(),
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          // 加载中显示加载动画
          return const Center(child: CircularProgressIndicator());
        } else if (snapshot.hasError) {
          // 加载失败显示错误信息
          return Center(child: Text('加载失败: ${snapshot.error}'));
        } else {
          // 数据加载完成，渲染列表
          final todos = snapshot.data ?? [];
          return ListView.builder(
            itemCount: todos.length,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text(todos[index].title),
                subtitle: Text(todos[index].description ?? ''),
                leading: Checkbox(
                  value: todos[index].isCompleted == 1,
                  onChanged: (value) => // 处理完成状态切换逻辑
                ),
              );
            },
          );
        }
      },
    ),
    floatingActionButton: FloatingActionButton(
      onPressed: () => // 打开添加待办页面
      child: const Icon(Icons.add),
    ),
  );
}

以上方法能确保首次启动应用时，自动加载本地已存储的待办数据并显示在页面上，无需等待添加新数据才触发刷新。

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