完整实例！Flutter 使用本地数据库搞定备忘录应用

本文正在参与「金石计划」

前言

前面一篇咱们介绍了运用 shared_preferences实现简略的键值对存储，然而咱们还会面对更为复杂的本地存储。比如资讯类 App会缓存一部分前次加载的内容，在没有网络的情况下也能够供给内容；比如微信的谈天记载都是存储在手机客户端。当咱们需求在本地存储很多结构化的数据的时分，运用 shared_preferences 显然是不行的。这个时分咱们就需求运用本地数据库，移动端最为常用的本地数据库是 SQLite。在 Flutter中同样供给了对 SQLite 的支撑，咱们能够运用 sqflite 这个插件搞定结构化数据的本地存储。本篇咱们以一个完好的备忘录的实例来讲述怎么运用 sqflite。

事务需求解读

咱们先来看备忘录的功能：

• 显现已经记载的备忘录列表，按更新时刻倒序排序；
• 按标题或内容查找备忘录；
• 增加备忘录，并保存在本地；
• 修改备忘录，成功后更新原有备忘录；
• 删去备忘录；
• 备忘录通常包含标题、内容、创立时刻和更新时刻这些特点。

能够看到，这其实是一个典型的数据表的 CRUD 操作。

实体类规划

咱们规划一个 Memo类，包含了 id、标题、内容、创立时刻和更新时刻5个特点，用来代表一个备忘录。一起供给了两个办法，以便和数据库操作层面对接。代码如下：

import 'package:flutter/material.dart';
class Memo {
  late int id;
  late String title;
  late String content;
  late DateTime createdTime;
  late DateTime modifiedTime;
  Memo({
    required this.id,
    required this.title,
    required this.content,
    required this.createdTime,
    required this.modifiedTime,
  });
  Map<String, dynamic> toMap() {
    var createdTimestamp = createdTime.millisecondsSinceEpoch ~/ 1000;
    var modifiedTimestamp = modifiedTime.millisecondsSinceEpoch ~/ 1000;
    return {
      'id': id,
      'title': title,
      'content': content,
      'created_time': createdTimestamp,
      'modified_time': modifiedTimestamp
    };
  }
  factory Memo.fromMap(Map<String, dynamic> map) {
    var createdTimestamp = map['created_time'] as int;
    var modifiedTimestamp = map['modified_time'] as int;
    return Memo(
      id: map['id'] as int,
      title: map['title'] as String,
      content: map['content'] as String,
      createdTime: DateTime.fromMillisecondsSinceEpoch(createdTimestamp * 1000),
      modifiedTime:
          DateTime.fromMillisecondsSinceEpoch(modifiedTimestamp * 1000),
    );
  }
}

这儿说一下，因为 SQLite 的时刻戳（为1970-01-01以来的秒数）只能以整数存储，因而咱们需求在入库操作（toMap）时 DateTime 转换为整数时刻戳，在 出库时（fromMap）将时刻戳转换为 DateTime。

数据库东西类

咱们写一个根底的数据库东西类，主要是初始化数据库和创立数据表，代码如下：

import 'dart:async';
import 'package:path/path.dart';
import 'package:sqflite/sqflite.dart';
class DatabaseHelper {
  static final DatabaseHelper instance = DatabaseHelper._init();
  static Database? _database;
  DatabaseHelper._init();
  Future<Database> get database async {
    if (_database != null) return _database!;
    _database = await _initDB('database.db');
    return _database!;
  }
  Future<Database> _initDB(String filePath) async {
    final dbPath = await getDatabasesPath();
    final path = join(dbPath, filePath);
    return await openDatabase(path, version: 1, onCreate: _createDB);
  }
  Future<void> _createDB(Database db, int version) async {
    await db.execute('''
      CREATE TABLE memo (
        id INTEGER PRIMARY KEY AUTOINCREMENT,
        title TEXT,
        content TEXT,
        created_time INTEGER,
        modified_time INTEGER
      )
    ''');
  }
}

创立数据表的语法和 MySQL 根本上是相同的，需求留意的是字段类型没有 MySQL 丰厚，只支撑简略的整数（INTEGER）、浮点数（REAL）、文本（TEXT）、BLOB（二进制格局，如存储文件）。

备忘录数据表访问接口

咱们为备忘录供给一个数据库的通用的访问接口，包含了刺进、更新、删去和读取备忘录的办法。

import 'database_helper.dart';
import 'memo.dart';
Future<int> insertMemo(Map<String, dynamic> memoMap) async {
  final db = await DatabaseHelper.instance.database;
  return await db.insert('memo', memoMap);
}
Future<int> updateMemo(Memo memo) async {
  final db = await DatabaseHelper.instance.database;
  return await db
      .update('memo', memo.toMap(), where: 'id = ?', whereArgs: [memo.id]);
}
Future<int> deleteMemo(int id) async {
  final db = await DatabaseHelper.instance.database;
  return await db.delete('memo', where: 'id = ?', whereArgs: [id]);
}
Future<List<Memo>> getMemos({String? searchKey}) async {
  var where = searchKey != null ? 'title LIKE ? OR content LIKE ?' : null;
  var whereArgs = searchKey != null ? ['%$searchKey%', '%$searchKey%'] : null;
  final db = await DatabaseHelper.instance.database;
  final List<Map<String, dynamic>> maps = await db.query(
    'memo',
    orderBy: 'modified_time DESC',
    where: where,
    whereArgs: whereArgs,
  );
  return List.generate(maps.length, (i) {
    return Memo.fromMap(maps[i]);
  });
}

这儿阐明一下，sqflite 供给了如下办法来支撑数据库操作：

• insert：向指定数据表刺进数据，需求供给表名和对应的数据，其间数据为 Map 类型，键名为数据表的字段名。成功后会返回刺进数据的 id。
• update：按 where 条件更新数据表数据，where 条件分为两个参数，一个是 where 表达式，其间变量运用?替代，另一个是 whereArgs 参数列表，多个参数运用数据传递，用于替换表达式的?通配符。where条件支撑如等于、大于小于、大于等于、小于等于、NOT、AND、OR、LIKE、BETWEEN 等，具体咱们能够去搜一下。
• delete：删去where条件指定的数据，不行恢复。
• query：查询，按指定条件查询数据，支撑按字段运用orderBy特点进行排序。这儿咱们运用了 LIKE 来查找匹配的标题或内容。

UI 界面实现

UI 界面比较简略，咱们看列表和增加页面的代码（修改页面根本和增加页面相同）。备忘录列表代码如下：

class MemoListScreen extends StatefulWidget {
  const MemoListScreen({Key? key}) : super(key: key);
  @override
  MemoListScreenState createState() => MemoListScreenState();
}
class MemoListScreenState extends State<MemoListScreen> {
  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
  List<Memo> _memoList = [];
  @override
  void initState() {
    super.initState();
    _refreshMemoList();
  }
  void _refreshMemoList({String? searchKey}) async {
    List<Memo> memoList = await getMemos(searchKey: searchKey);
    setState(() {
      _memoList = memoList;
    });
  }
  void _deleteMemo(Memo memo) async {
    final confirmed = await _showDeleteConfirmationDialog(memo);
    if (confirmed != null && confirmed) {
      await deleteMemo(memo.id);
      _refreshMemoList();
      if (!mounted) return;
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(
        content: Text('已删去 "${memo.title}"'),
        duration: const Duration(seconds: 2),
      ));
    }
  }
  Future<bool?> _showDeleteConfirmationDialog(Memo memo) async {
    return showDialog<bool>(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: const Text('删去备忘录'),
          content: Text('确定要删去 "${memo.title}"这条备忘录吗？'),
          actions: [
            TextButton(
              child: const Text(
                '取消',
                style: TextStyle(
                  color: Colors.white,
                ),
              ),
              onPressed: () => Navigator.pop(context, false),
            ),
            TextButton(
              child: Text('删去',
                  style: TextStyle(
                    color: Colors.red[300],
                  )),
              onPressed: () => Navigator.pop(context, true),
            ),
          ],
        );
      },
    );
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      appBar: AppBar(
        title: const Text('备忘录'),
      ),
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: TextField(
              decoration: InputDecoration(
                hintText: '查找备忘录',
                prefixIcon: const Icon(Icons.search),
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(4.0),
                ),
              ),
              onChanged: (value) {
                _refreshMemoList(searchKey: value);
              },
            ),
          ),
          Expanded(
            child: ListView.builder(
              itemCount: _memoList.length,
              itemBuilder: (context, index) {
                Memo memo = _memoList[index];
                return ListTile(
                  title: Text(memo.title),
                  subtitle:
                      Text('${DateFormat.yMMMd().format(memo.modifiedTime)}更新'),
                  onTap: () {
                    _navigateToEditScreen(memo);
                  },
                  trailing: IconButton(
                    icon: const Icon(Icons.delete_forever_outlined),
                    onPressed: () {
                      _deleteMemo(memo);
                    },
                  ),
                );
              },
            ),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        backgroundColor: Theme.of(context).primaryColor,
        child: const Icon(Icons.add),
        onPressed: () async {
          _navigateToAddScreen();
        },
      ),
    );
  }
  _navigateToAddScreen() async {
    final result = await Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => const MemoAddScreen()),
    );
    if (result != null) {
      _refreshMemoList();
    }
  }
  _navigateToEditScreen(Memo memo) async {
    final count = await Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => MemoEditScreen(memo: memo)),
    );
    if (count != null && count > 0) {
      _refreshMemoList();
    }
  }
}

列表顶部为一个查找框，用于查找备忘录。备忘录列表运用了 ListView，列表元素则运用了 ListTile 显现标题、更新时刻和一个删去按钮。咱们运用了 FloatingActionButton 来增加备忘录。列表的事务逻辑如下：

• 进入页面从数据库读取备忘录数据；
• 点击某一条备忘录进入修改界面，修改成功的话改写界面；
• 点击增加按钮进入增加界面，增加成功的话改写界面；
• 点击删去按钮删去该条备忘录，删去前弹窗进行二次确认；
• 查找框内容改变时从数据库查找备忘录并根据查找成果改写界面。
• 改写其实便是从数据库读取悉数匹配的备忘录数据后再经过 setState 更新列表数据。

增加页面的代码如下：

import 'package:flutter/material.dart';
import '../common/button_color.dart';
import 'memo_provider.dart';
class MemoAddScreen extends StatefulWidget {
  const MemoAddScreen({Key? key}) : super(key: key);
  @override
  MemoAddScreenState createState() => MemoAddScreenState();
}
class MemoAddScreenState extends State<MemoAddScreen> {
  final _formKey = GlobalKey<FormState>();
  late String _title, _content;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('增加备忘录'),
      ),
      body: Builder(builder: (BuildContext context) {
        return SingleChildScrollView(
          child: Padding(
            padding: const EdgeInsets.all(16),
            child: Form(
              key: _formKey,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: [
                  TextFormField(
                    decoration: const InputDecoration(labelText: '标题'),
                    validator: (value) {
                      if (value == null || value.isEmpty) {
                        return '请输入标题';
                      }
                      return null;
                    },
                    onSaved: (value) {
                      _title = value!;
                    },
                  ),
                  const SizedBox(height: 16),
                  TextFormField(
                    decoration: const InputDecoration(
                      labelText: '内容',
                      alignLabelWithHint: true,
                    ),
                    minLines: 10,
                    maxLines: null,
                    validator: (value) {
                      if (value == null || value.isEmpty) {
                        return '请输入内容';
                      }
                      return null;
                    },
                    onSaved: (value) {
                      _content = value!;
                    },
                  ),
                  const SizedBox(height: 16),
                  ElevatedButton(
                    style: ButtonStyle(
                      backgroundColor: PrimaryButtonColor(
                        context: context,
                      ),
                    ),
                    onPressed: () async {
                      if (_formKey.currentState!.validate()) {
                        _formKey.currentState!.save();
                        var id = await saveMemo(context);
                        if (id > 0) {
                          _showSnackBar(context, '备忘录已保存');
                          Navigator.of(context).pop(id);
                        } else {
                          _showSnackBar(context, '备忘录保存失败');
                        }
                      }
                    },
                    child: const Text(
                      '保 存',
                      style: TextStyle(color: Colors.black, fontSize: 16.0),
                    ),
                  ),
                ],
              ),
            ),
          ),
        );
      }),
    );
  }
  Future<int> saveMemo(BuildContext context) async {
    var createdTimestamp = DateTime.now().millisecondsSinceEpoch ~/ 1000;
    var modifiedTimestamp = createdTimestamp;
    var memoMap = {
      'title': _title,
      'content': _content,
      'created_time': createdTimestamp,
      'modified_time': modifiedTimestamp,
    };
    // 保存备忘录
    var id = await insertMemo(memoMap);
    return id;
  }
  void _showSnackBar(BuildContext context, String message) async {
    ScaffoldMessenger.of(context)
        .showSnackBar(SnackBar(content: Text(message)));
  }
}

增加页面比较简略，就两个文本框加一个保存按钮。在保存前对标题和内容进行校验，保证内容不为空。在入库前，读取当时时刻并转换为整数时刻戳，构建刺进数据表的 Map 目标，然后履行数据库刺进操作。成功的话给出提示信息并返回新刺进的id到列表，失败则仅仅显现失败信息。 经过列表和增加页面咱们能够看到，经过封装办法后，其实读写数据库的操作和经过接口获取数据差不多，因而，如果说需求兼容数据库和接口数据，能够一致接口方式，这样能够实现无缝切换。

运行成果

咱们来看看运行成果，如下图所示。完好代码已经上传到：gitee.com/island-code…。

总结

本篇经过一个完好的备忘录实例讲解了在 Flutter 中怎么运用 sqflite 实现结构化数据本地存储。在实践的 App 开发中，咱们会经常遇到需求将很多的数据进行本地化存储的需求。备忘录是典型的一种，还有诸如记账、笔记、资讯、即时谈天等等应用都会有类似的需求。信任经过本篇，能让 Flutter 开发同学应对根底的结构化存储的事务开发。

我是岛上码农，微信公众号同名。如有问题能够加本人微信交流，微信号：island-coder。

：觉得有收成请点个赞鼓励一下！

：保藏文章，方便回看哦！

：评论交流，互相前进！

本文正在参与「金石计划」