Hướng dẫn làm app quản lý chi tiêu bằng Flutter

ListView.builder(
  itemCount: transactions.length,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text(transactions[index].title),
      subtitle: Text(DateFormat.yMd().format(transactions[index].date)),
      trailing: Text('- ${transactions[index].amount}đ'),
    );
  },
);

Tạo model giao dịch (transaction)

Tạo file models/transaction.dart:

class Transaction {
  final int? id;
  final String title;
  final double amount;
  final DateTime date;

  Transaction({
    this.id,
    required this.title,
    required this.amount,
    required this.date,
  });

  Map<String, dynamic> toMap() {
    return {
      'id': id,
      'title': title,
      'amount': amount,
      'date': date.toIso8601String(),
    };
  }

  factory Transaction.fromMap(Map<String, dynamic> map) {
    return Transaction(
      id: map['id'],
      title: map['title'],
      amount: map['amount'],
      date: DateTime.parse(map['date']),
    );
  }
}

Tạo database với SQFlite

Tạo file helpers/db_helper.dart:

class DBHelper {
  static Future<Database> database() async {
    final dbPath = await getDatabasesPath();
    return openDatabase(
      join(dbPath, 'transactions.db'),
      onCreate: (db, version) {
        return db.execute(
          'CREATE TABLE transactions(id INTEGER PRIMARY KEY AUTOINCREMENT, title TEXT, amount REAL, date TEXT)',
        );
      },
      version: 1,
    );
  }

  static Future<void> insert(Transaction tx) async {
    final db = await DBHelper.database();
    await db.insert('transactions', tx.toMap(),
        conflictAlgorithm: ConflictAlgorithm.replace);
  }

  static Future<List<Transaction>> fetchAll() async {
    final db = await DBHelper.database();
    final data = await db.query('transactions');
    return data.map((e) => Transaction.fromMap(e)).toList();
  }
}

Thêm giao dịch mới

Tạo form thêm giao dịch:

final titleController = TextEditingController();
final amountController = TextEditingController();

void _submitData() {
  final enteredTitle = titleController.text;
  final enteredAmount = double.tryParse(amountController.text) ?? 0;

  if (enteredTitle.isEmpty || enteredAmount <= 0) return;

  final newTx = Transaction(
    title: enteredTitle,
    amount: enteredAmount,
    date: DateTime.now(),
  );

  DBHelper.insert(newTx);
  setState(() {});
}

Form nhập liệu có thể hiển thị bằng showModalBottomSheet.

Hiển thị biểu đồ thống kê

Dùng thư viện charts_flutter (hoặc fl_chart) để tạo biểu đồ hình tròn hoặc cột.

dependencies:
  charts_flutter: ^0.12.0

Ví dụ tạo biểu đồ chi tiêu 7 ngày qua:

final recentTransactions = transactions.where((tx) {
  return tx.date.isAfter(DateTime.now().subtract(Duration(days: 7)));
}).toList();

dependencies:
  firebase_core: ^2.0.0
  cloud_firestore: ^4.0.0

flutter build apk --release