flutter-expense-tracker/lib/pages/expense.dart

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

// Local
import '/models/expense.dart';
import '/models/frequency.dart';

List<Expense> expenses = [];

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

  @override
  Widget build(BuildContext context) {
    return expenses.isEmpty
        ? Text("Add expenses to get started!")
        : ListView.builder(
            itemCount: expenses.length,
            itemBuilder: (_, index) {
              final Expense curr = expenses[index];
              return Center(
                child: Padding(
                  padding: const EdgeInsets.all(4.0),
                  child: Container(
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(4),
                      color: Colors.greenAccent,
                    ),
                    child: Column(
                      children: [
                        Text(curr.name),
                        Text("${curr.cost.toString()} ${curr.frequency.title}"),
                      ],
                    ),
                  ),
                ),
              );
            },
          );
  }
}

class ExpenseInputDialog extends StatefulWidget {
  final Function() notifyParent;
  const ExpenseInputDialog({
    super.key,
    required this.notifyParent,
  });

  @override
  State<ExpenseInputDialog> createState() => _ExpenseInputDialogState();
}

class _ExpenseInputDialogState extends State<ExpenseInputDialog> {
  final _expenseFormKey = GlobalKey<FormState>();

  String _name = "";
  double _cost = 0.0;
  Frequency _freq = Frequency.montly;
  String _desc = "";

  @override
  Widget build(BuildContext context) {
    // TODO: Do this as a values.map().
    List<DropdownMenuItem> freqValues = [];
    for (var freq in Frequency.values) {
      freqValues.add(DropdownMenuItem(value: freq, child: Text(freq.title)));
    }
    ;

    return AlertDialog(
      title: Center(child: Text("Add New Expense")),
      content: Form(
        key: _expenseFormKey,
        //autovalidateMode: AutovalidateMode.onUserInteraction,
        child: Column(mainAxisSize: MainAxisSize.min, spacing: 10, children: [
          TextFormField(
            keyboardType: TextInputType.text,
            decoration: InputDecoration(
              labelText: "Name",
              hintText: "Example: Red Pocket Phone Bill",
            ),
            validator: (value) {
              if (value!.isEmpty) {
                return "Name must be provided.";
              }
              return null;
            },
            onSaved: (newValue) {
              _name = newValue!;
            },
          ),
          TextFormField(
            keyboardType: TextInputType.numberWithOptions(decimal: true),
            decoration:
                InputDecoration(labelText: "Cost", hintText: "Example: 10.00"),
            validator: (value) {
              if (value!.isEmpty) {
                return "Cost must be provided.";
              }
              if (double.tryParse(value) == null) {
                return "Cost must be a valid number.";
              }
              return null;
            },
            onSaved: (newValue) {
              _cost = double.parse(newValue!);
            },
          ),
          DropdownButtonFormField(
            items: freqValues,
            decoration: InputDecoration(
                labelText: "Recurrence", hintText: "Example: Monthly"),
            validator: (value) {
              if (value == null) {
                return "Frequency must be provided.";
              }
              if (!Frequency.values.contains(value)) {
                return "Value not valid.";
              }
              return null;
            },
            onChanged: (newValue) {
              _freq = newValue;
            },
          ),
          TextFormField(
            keyboardType: TextInputType.text,
            decoration: InputDecoration(
                labelText: "Description",
                hintText: "Example: 1GB data with unlimited talk & text."),
            validator: (value) {
              return null;
            },
            onSaved: (newValue) {
              _desc = newValue!;
            },
          ),
        ]),
      ),
      actions: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            ElevatedButton.icon(
              onPressed: () {
                print("TODO: Clear fields!");
                Navigator.of(context).pop();
              },
              icon: Icon(Icons.cancel),
              label: Text('Cancel'),
            ),
            ElevatedButton.icon(
              onPressed: () {
                print("TODO: Save expense!");
                if (_expenseFormKey.currentState!.validate()) {
                  _expenseFormKey.currentState!.save();
                  setState(() {
                    expenses.add(
                      Expense(
                          name: _name,
                          cost: _cost,
                          frequency: _freq,
                          description: _desc),
                    );
                  });
                  widget.notifyParent();

                  print(expenses.toString());
                  for (var expense in expenses) {
                    print(expense.toString());
                  }
                  Navigator.of(context).pop();
                }
              },
              icon: Icon(Icons.save),
              label: Text('Submit'),
            ),
          ],
        )
      ],
    );
  }
}