Flutter使用sqflite存储TextField数据时报build未实现及context未定义错误求助

错误根源 #

• 核心语法嵌套错误：你将State类必须实现的build方法，以及_addItem、_updateItem、_deleteItem三个业务方法，全部错误嵌套写进了_showForm方法内部，导致State类无法识别到build方法，触发Missing concrete implementation of 'State.build'报错。
• 功能逻辑缺失：_showForm方法仅做了编辑时的变量赋值，没有写弹出表单页面的逻辑，导致页面无法跳转；方法嵌套也导致部分场景下context不在作用域内，触发变量未定义报错。

修复后的完整代码 #

import 'package:flutter/material.dart';
import 'dart:async';
import '../sql.dart';

class AddItem extends StatefulWidget {
  const AddItem({Key? key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<AddItem> {
  // 所有存储的联系人数据
  List<Map<String, dynamic>> _journals = [];
  bool _isLoading = true;

  // 从数据库拉取所有数据
  void _refreshJournals() async {
    final data = await SQLHelper.getItems();
    setState(() {
      _journals = data;
      _isLoading = false;
    });
  }

  @override
  void initState() {
    super.initState();
    _refreshJournals();
  }

  final TextEditingController _nameController = TextEditingController();
  final TextEditingController _mobileController = TextEditingController();
  final TextEditingController _adressController = TextEditingController();

  // 新增数据到数据库
  Future<void> _addItem() async {
    await SQLHelper.createItem(
        _nameController.text, _mobileController.text, _adressController.text);
    _refreshJournals();
  }

  // 更新现有数据
  Future<void> _updateItem(int id) async {
    await SQLHelper.updateItem(id, _nameController.text,
        _mobileController.text, _adressController.text);
    _refreshJournals();
  }

  // 删除数据
  void _deleteItem(int id) async {
    await SQLHelper.deleteItem(id);
    if(!mounted) return;
    ScaffoldMessenger.of(context).showSnackBar(const SnackBar(
      content: Text('删除成功！'),
    ));
    _refreshJournals();
  }

  // 弹出新增/编辑表单
  void _showForm(int? id) async {
    if (id != null) {
      final existingJournal =
      _journals.firstWhere((element) => element['id'] == id);
      _nameController.text = existingJournal['name'];
      _mobileController.text = existingJournal['mobile'];
      _adressController.text = existingJournal['adress'];
    }

    // 补充底部弹出表单的逻辑，解决页面无法弹出的问题
    if(!mounted) return;
    showModalBottomSheet(
        context: context,
        elevation: 5,
        isScrollControlled: true,
        builder: (_) => Container(
          padding: EdgeInsets.only(
            top: 15,
            left: 15,
            right: 15,
            bottom: MediaQuery.of(context).viewInsets.bottom + 120,
          ),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.end,
            children: [
              TextField(
                controller: _nameController,
                decoration: const InputDecoration(hintText: '姓名'),
              ),
              const SizedBox(
                height: 10,
              ),
              TextField(
                controller: _mobileController,
                decoration: const InputDecoration(hintText: '手机号'),
                keyboardType: TextInputType.number,
              ),
              const SizedBox(
                height: 10,
              ),
              TextField(
                controller: _adressController,
                decoration: const InputDecoration(hintText: '地址'),
              ),
              const SizedBox(
                height: 20,
              ),
              ElevatedButton(
                onPressed: () async {
                  if (id == null) {
                    await _addItem();
                  }
                  if (id != null) {
                    await _updateItem(id);
                  }
                  // 清空输入框
                  _nameController.text = '';
                  _mobileController.text = '';
                  _adressController.text = '';
                  // 关闭底部弹窗
                  Navigator.of(context).pop();
                },
                child: Text(id == null ? '新增' : '更新'),
              )
            ],
          ),
        )
    );
  }

  // build方法移到类的直接成员位置，解决缺失build方法的报错
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('联系人管理'),
      ),
      // 主页面展示已存储的联系人列表
      body: _isLoading
          ? const Center(child: CircularProgressIndicator(),)
          : ListView.builder(
        itemCount: _journals.length,
        itemBuilder: (context, index) => Card(
          color: Colors.white,
          margin: const EdgeInsets.all(10),
          child: ListTile(
              title: Text(_journals[index]['name']),
              subtitle: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(_journals[index]['mobile']),
                  Text(_journals[index]['adress']),
                ],
              ),
              trailing: SizedBox(
                width: 100,
                child: Row(
                  children: [
                    // 编辑按钮
                    IconButton(
                      icon: const Icon(Icons.edit),
                      onPressed: () => _showForm(_journals[index]['id']),
                    ),
                    // 删除按钮
                    IconButton(
                      icon: const Icon(Icons.delete, color: Colors.red,),
                      onPressed: () => _deleteItem(_journals[index]['id']),
                    ),
                  ],
                ),
              )),
        ),
      ),
      // 新增按钮
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.add),
        onPressed: () => _showForm(null),
      ),
    );
  }
}

关键调整说明 #

• 所有嵌套在_showForm内部的方法全部移到类的直接成员层级，解决build方法缺失和context作用域报错
• 补充了showModalBottomSheet弹出逻辑，点击新增/编辑按钮可正常弹出表单页
• 新增了主页面列表展示逻辑，可直接查看已存储到数据库的所有数据
• 增加了mounted判断，避免页面销毁后调用context引发的额外报错

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