Flutter技术求助：从添加账户页同步数据至首页DataTable

1. 依赖准备 #

在项目的pubspec.yaml中添加本地数据库相关依赖：

dependencies:
  flutter:
    sdk: flutter
  sqflite: ^2.3.2  # Flutter本地SQLite库
  path: ^1.8.3     # 处理文件路径

执行flutter pub get完成依赖安装。

2. 定义账户数据模型 #

创建account_model.dart，统一数据结构：

class Account {
  final int? id;
  final String name;
  final double balance;

  Account({this.id, required this.name, required this.balance});

  // 转成数据库可存储的Map格式
  Map<String, dynamic> toMap() {
    return {
      'id': id,
      'name': name,
      'balance': balance,
    };
  }

  // 从数据库查询结果转成Account对象
  static Account fromMap(Map<String, dynamic> map) {
    return Account(
      id: map['id'],
      name: map['name'],
      balance: map['balance'].toDouble(),
    );
  }
}

3. 封装数据库操作 #

创建database_helper.dart，统一处理增查逻辑：

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

class DatabaseHelper {
  // 单例模式，避免重复初始化数据库
  static final DatabaseHelper _instance = DatabaseHelper._internal();
  factory DatabaseHelper() => _instance;
  DatabaseHelper._internal();

  static Database? _database;

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

  // 初始化数据库及表结构
  Future<Database> _initDatabase() async {
    final dbPath = await getDatabasesPath();
    final path = join(dbPath, 'accounts.db');

    return await openDatabase(
      path,
      version: 1,
      onCreate: (db, version) async {
        await db.execute('''
          CREATE TABLE accounts(
            id INTEGER PRIMARY KEY AUTOINCREMENT,
            name TEXT NOT NULL,
            balance REAL NOT NULL
          )
        ''');
      },
    );
  }

  // 插入账户数据
  Future<int> insertAccount(Account account) async {
    final db = await database;
    return await db.insert(
      'accounts', 
      account.toMap(), 
      conflictAlgorithm: ConflictAlgorithm.replace
    );
  }

  // 查询所有账户数据
  Future<List<Account>> getAccounts() async {
    final db = await database;
    final List<Map<String, dynamic>> maps = await db.query('accounts');
    return List.generate(maps.length, (i) => Account.fromMap(maps[i]));
  }
}

4. 实现添加账户页面 #

创建add_account_page.dart，完成表单输入和保存逻辑：

import 'package:flutter/material.dart';
import 'database_helper.dart';
import 'account_model.dart';
import 'account_home_page.dart';

class AddAccountPage extends StatefulWidget {
  const AddAccountPage({super.key});

  @override
  State<AddAccountPage> createState() => _AddAccountPageState();
}

class _AddAccountPageState extends State<AddAccountPage> {
  final _nameController = TextEditingController();
  final _balanceController = TextEditingController();
  final _formKey = GlobalKey<FormState>();

  Future<void> _saveAccount() async {
    if (_formKey.currentState!.validate()) {
      final account = Account(
        name: _nameController.text,
        balance: double.parse(_balanceController.text)
      );
      await DatabaseHelper().insertAccount(account);
      // 保存后返回首页
      Navigator.pushReplacement(
        context,
        MaterialPageRoute(builder: (context) => const AccountHomePage()),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('添加账户')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: Column(
            children: [
              TextFormField(
                controller: _nameController,
                decoration: const InputDecoration(labelText: '账户名称'),
                validator: (value) => value?.isEmpty ?? true ? '请输入账户名称' : null,
              ),
              TextFormField(
                controller: _balanceController,
                decoration: const InputDecoration(labelText: '账户余额'),
                keyboardType: TextInputType.numberWithOptions(decimal: true),
                validator: (value) {
                  if (value?.isEmpty ?? true) return '请输入账户余额';
                  if (double.tryParse(value!) == null) return '请输入有效数字';
                  return null;
                },
              ),
              const SizedBox(height: 20),
              ElevatedButton(
                onPressed: _saveAccount,
                child: const Text('保存'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

5. 实现账户首页（DataTable展示） #

创建account_home_page.dart，完成数据加载和表格展示：

import 'package:flutter/material.dart';
import 'database_helper.dart';
import 'account_model.dart';
import 'add_account_page.dart';

class AccountHomePage extends StatefulWidget {
  const AccountHomePage({super.key});

  @override
  State<AccountHomePage> createState() => _AccountHomePageState();
}

class _AccountHomePageState extends State<AccountHomePage> {
  late Future<List<Account>> _accountsFuture;

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

  // 刷新账户数据
  void _refreshAccounts() {
    setState(() {
      _accountsFuture = DatabaseHelper().getAccounts();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('账户首页'),
        actions: [
          IconButton(
            icon: const Icon(Icons.add),
            onPressed: () {
              // 跳转到添加页，返回后刷新数据
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => const AddAccountPage()),
              ).then((_) => _refreshAccounts());
            },
          ),
        ],
      ),
      body: FutureBuilder<List<Account>>(
        future: _accountsFuture,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return const Center(child: CircularProgressIndicator());
          }
          if (snapshot.hasError) {
            return Center(child: Text('加载失败: ${snapshot.error}'));
          }
          final accounts = snapshot.data ?? [];
          // 横向滚动适配表格宽度
          return SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: DataTable(
              columns: const [
                DataColumn(label: Text('ID')),
                DataColumn(label: Text('账户名称')),
                DataColumn(label: Text('余额')),
              ],
              rows: accounts.map((account) {
                return DataRow(cells: [
                  DataCell(Text(account.id.toString())),
                  DataCell(Text(account.name)),
                  DataCell(Text(account.balance.toStringAsFixed(2))),
                ]);
              }).toList(),
            ),
          );
        },
      ),
    );
  }
}

6. 配置主入口 #

修改main.dart，设置首页：

import 'package:flutter/material.dart';
import 'account_home_page.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '账户管理',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const AccountHomePage(),
    );
  }
}

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