Flutter如何实现快速记录的记事本

我想用Flutter开发一个快速记录的记事本应用，但不太清楚具体实现步骤。

主要需求是：

  1. 能快速添加和保存笔记
  2. 支持简单的文本格式（如标题、正文）
  3. 可以查看历史记录

请问应该如何设计UI和数据结构？是否需要用到数据库？有没有推荐的插件或最佳实践？

2 回复

使用Flutter实现快速记录记事本，可结合以下步骤：

  1. UI设计：使用TextField或TextFormField输入内容，搭配FloatingActionButton保存。
  2. 数据存储：用shared_preferences或SQLite（sqflite包）存储记录。
  3. 状态管理：通过setState、Provider或Bloc管理笔记列表。
  4. 快速操作：支持快捷键或语音输入（集成speech_to_text包）。

示例：点击按钮保存文本到本地，实时显示笔记列表。

更多关于Flutter如何实现快速记录的记事本的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中实现快速记录的记事本，可以按照以下步骤：

1. 核心功能设计

  • 快速输入：简化界面，一键添加记录
  • 本地存储：使用 sqflite 或 hive 保存数据
  • 列表展示：实时显示所有记录

2. 实现代码示例

依赖配置（pubspec.yaml）

dependencies:
  flutter:
    sdk: flutter
  sqflite: ^2.0.0+4
  path: ^1.8.0

数据模型

class Note {
  int? id;
  String content;
  DateTime createdAt;

  Note({this.id, required this.content, required this.createdAt});
}

数据库帮助类

import 'package:sqflite/sqflite.dart';
import 'package:path/path.dart';

class DatabaseHelper {
  static final _databaseName = "notes.db";
  static final _databaseVersion = 1;

  static Database? _database;
  static Future<Database> get database async {
    if (_database != null) return _database!;
    _database = await _initDatabase();
    return _database!;
  }

  static _initDatabase() async {
    String path = join(await getDatabasesPath(), _databaseName);
    return await openDatabase(
      path,
      version: _databaseVersion,
      onCreate: _onCreate,
    );
  }

  static Future _onCreate(Database db, int version) async {
    await db.execute('''
      CREATE TABLE notes (
        id INTEGER PRIMARY KEY AUTOINCREMENT,
        content TEXT NOT NULL,
        created_at INTEGER NOT NULL
      )
    ''');
  }

  static Future<int> insertNote(Note note) async {
    Database db = await database;
    return await db.insert('notes', note.toMap());
  }

  static Future<List<Note>> getNotes() async {
    Database db = await database;
    List<Map> maps = await db.query('notes', orderBy: 'created_at DESC');
    return List.generate(maps.length, (i) {
      return Note(
        id: maps[i]['id'],
        content: maps[i]['content'],
        createdAt: DateTime.fromMillisecondsSinceEpoch(maps[i]['created_at']),
      );
    });
  }
}

主界面

class QuickNoteApp extends StatefulWidget {
  @override
  _QuickNoteAppState createState() => _QuickNoteAppState();
}

class _QuickNoteAppState extends State<QuickNoteApp> {
  final TextEditingController _controller = TextEditingController();
  List<Note> _notes = [];

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

  _loadNotes() async {
    List<Note> notes = await DatabaseHelper.getNotes();
    setState(() => _notes = notes);
  }

  _addNote() async {
    if (_controller.text.isNotEmpty) {
      Note newNote = Note(
        content: _controller.text,
        createdAt: DateTime.now(),
      );
      await DatabaseHelper.insertNote(newNote);
      _controller.clear();
      _loadNotes();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('快速记事本')),
      body: Column(
        children: [
          Padding(
            padding: EdgeInsets.all(16),
            child: TextField(
              controller: _controller,
              decoration: InputDecoration(
                hintText: '输入内容...',
                suffixIcon: IconButton(
                  icon: Icon(Icons.send),
                  onPressed: _addNote,
                ),
              ),
              onSubmitted: (_) => _addNote(),
            ),
          ),
          Expanded(
            child: ListView.builder(
              itemCount: _notes.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(_notes[index].content),
                  subtitle: Text(_notes[index].createdAt.toString()),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

3. 优化建议

  • 添加删除功能：滑动删除或长按删除
  • 搜索功能：实时过滤记录
  • 数据同步：可集成云端备份
  • 支持富文本：使用 flutter_quill 等库

这样即可实现一个基础的快速记录记事本，核心是简化输入流程并确保数据持久化存储。

回到顶部