将表单域输入保存到 sqflite 数据库后,该条目不会显示在概览屏幕上。它确实在热重载后显示

After saving formfield input to an sqflite DB, the entry doesn't show on the overview screen. It does show after hot reload

大家好,

我是 Flutter 的新手,但渴望学习,如果能提供解决方案或建议,我将不胜感激。代码部分拼接在一起,部分是我自己的。

我正在写一本简化的日记,其中有几个标准的标准问题要填写。

基本布局

我的猜测(用相当有限的 - 如果我们可以称之为 - 经验)是我在状态管理方面遗漏了一些东西。代码看起来很糟糕,我想做一百万件事来让它更短、更简洁。但是,首先我想让它正常运行。

添加条目屏幕的代码:

class AddCircleScreen extends StatefulWidget {
  static const routeName = '/AddCircleScreen';
  final Circle circle;

  const AddCircleScreen({Key key, this.circle}) : super(key: key);

  @override
  _AddCircleScreenState createState() => _AddCircleScreenState(circle);
}

//TODO: Refactor widgets below
class _AddCircleScreenState extends State<AddCircleScreen> {
  Circle circle;
  final gebeurtenisTextController = TextEditingController();
  final gevoelTextController = TextEditingController();
  final gedachtenTextController = TextEditingController();
  final gedragTextController = TextEditingController();
  final gevolgTextController = TextEditingController();
  final toelichtingTextController = TextEditingController();

  _AddCircleScreenState(this.circle);

  @override
  void initState() {
    super.initState();
    if (circle != null) {
      gebeurtenisTextController.text = circle.gebeurtenis;
      gevoelTextController.text = circle.gevoel;
      gedachtenTextController.text = circle.gedachten;
      gedragTextController.text = circle.gedrag;
      gevolgTextController.text = circle.gevolg;
      toelichtingTextController.text = circle.toelichting;
    }
  }

  @override
  void dispose() {
    super.dispose();
    gebeurtenisTextController.dispose();
    gevoelTextController.dispose();
    gedachtenTextController.dispose();
    gedragTextController.dispose();
    gevolgTextController.dispose();
    toelichtingTextController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: (Colors.yellow[100]),
      appBar: AppBar(
        backgroundColor: (Colors.green[400]),
        title: Center(
          child: Text('Small steps...'),
        ),
      ),
      body: SafeArea(
        child: ListView(
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.all(12.0),
              child: TextField(
                decoration: InputDecoration(
                    labelText: 'Gebeurtenis',
                    border: OutlineInputBorder(),
                    hintText: 'Beschrijf kort de situatie'),
                controller: gebeurtenisTextController,
              ),
            ),
          The above code times 6, for all the different textfields.
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
          backgroundColor: Theme.of(context).primaryColor,
          child: Icon(Icons.check),
          onPressed: () async {
            _saveCircle(
              gebeurtenisTextController.text,
              gevoelTextController.text,
              gedachtenTextController.text,
              gedragTextController.text,
              gevolgTextController.text,
              toelichtingTextController.text,
            );
            setState(() {});
          }),
    );
  }

  _saveCircle(String gebeurtenis, String gevoel, String gedachten,
      String gedrag, String gevolg, String toelichting) async {
    if (circle == null) {
      DatabaseHelper.instance.insertCircle(Circle(
          gebeurtenis: gebeurtenisTextController.text,
          gevoel: gevoelTextController.text,
          gedachten: gedachtenTextController.text,
          gedrag: gedragTextController.text,
          gevolg: gevolgTextController.text,
          toelichting: toelichtingTextController.text));
      Navigator.pop(context);
    } else {
      await DatabaseHelper.instance.updateCircle(Circle(
          id: circle.id,
          gebeurtenis: gebeurtenis,
          gevoel: gevoel,
          gedachten: gedachten,
          gedrag: gedrag,
          gevolg: gevolg,
          toelichting: toelichting));
      Navigator.pop(context);
    }
  }
}

打开屏幕的代码:

class CircleOverviewScreen extends StatefulWidget {

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

class _CircleOverviewScreenState extends State<CircleOverviewScreen> {

  @override

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Cirkels'),
      ),
      body: FutureBuilder<List<Circle>>(
        future: DatabaseHelper.instance.retrieveCircles(),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            return ListView.builder(
              itemCount: snapshot.data.length,
              itemBuilder: (BuildContext context, int index) {
                return ListTile(
                  title: Text(snapshot.data[index].gebeurtenis),
                  leading: Text(snapshot.data[index].id.toString()),
                  subtitle: Text(snapshot.data[index].gevolg),
                  onTap: () =>
                      _navigateToAddCircleScreen(context, snapshot.data[index]),
                  trailing: IconButton(
                      alignment: Alignment.center,
                      icon: Icon(Icons.delete),
                      onPressed: () async {
                        _deleteTodo(snapshot.data[index]);
                        setState(() {});
                      }),
                );
              },
            );
          } else if (snapshot.hasError) {
            return Center(child: Text("Je hebt nog geen 5G'tjes opgeslagen"));
          }
          return Center(child: CircularProgressIndicator());
        },
      ),
      floatingActionButton: FloatingActionButton(
        backgroundColor: Theme.of(context).primaryColor,
        child: Icon(Icons.create_sharp),
        onPressed: () => Navigator.push(
          context,
          MaterialPageRoute(
            builder: (_) => AddCircleScreen(),
          ),
        ),
      ),
    );
  }
}

_deleteTodo(Circle circle) {
  DatabaseHelper.instance.deleteCircle(circle.id);
}

_navigateToAddCircleScreen(BuildContext context, Circle circle) async {
  Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => AddCircleScreen(circle: circle)),
  );
}

刷新屏幕的一种简单方法是调用 setState() when the AddCircle screen is popped. You can do this when the Future returned by Navigator.push() completes。

onPressed: () => Navigator.push(
  context,
  MaterialPageRoute(
    builder: (_) => AddCircleScreen(),
  ),
).then((_) => setState(() {})),

在漫长的运行中你应该学会使用AStreamBuilder widget and proper state management来解决这种问题。

我相信您会喜欢以这种方式使用应用程序!