Forms is working, items show if hot reloaded, need to refactor code and get the global variable into the state of the expense page.

lib/main.dart

@@ -8,16 +8,36 @@ void main() {
 }
 
 // https://www.tutorialspoint.com/dart_programming/dart_programming_enumeration.htm
-enum Recurrence { daily, weekly, biweekly, montly, yearly }
+enum Frequency {
+  daily(title: "Daily"),
+  weekly(title: "Weekly"),
+  biweekly(title: "Biweekly"),
+  montly(title: "Monthly"),
+  yearly(title: "Yearly");
+
+  const Frequency({required this.title});
+
+  final String title;
+}
 
 class Expense {
-  String name;
+  final String name;
-  double cost;
+  final double cost;
-  Recurrence recurrence;
+  final Frequency frequency;
-  String description;
+  final String description;
 
-  Expense(this.name, this.cost, this.recurrence, this.description);
+  const Expense(
+      {required this.name,
+      required this.cost,
+      required this.frequency,
+      required this.description});
+
+  String toString() {
+    return "$name, $cost, ${frequency.title}, $description";
   }
+}
+
+List<Expense> expenses = [];
 
 class MainApp extends StatelessWidget {
   const MainApp({super.key});
@@ -85,6 +105,7 @@ class _HomePageState extends State<HomePage> {
 
     return LayoutBuilder(builder: (context, constraints) {
       return Scaffold(
+        // TODO: Add a drawer instead of nav rail.
         body: Row(
           children: [
             SafeArea(
@@ -141,6 +162,29 @@ class ExpensePage extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    return 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}"),
+                  ],
+                ),
+              ),
+            ),
+          );
+        });
+    /*
     return ListView(
       children: [
         ListTile(
@@ -153,6 +197,7 @@ class ExpensePage extends StatelessWidget {
         ),
       ],
     );
+    */
   }
 }
 
@@ -168,22 +213,21 @@ class ExpenseInputDialog extends StatefulWidget {
 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) {
     const inputWidth = 300.0;
     const inputHeight = 50.0;
 
-    const recurrenceValues = <DropdownMenuItem>[
+    List<DropdownMenuItem> freqValues = [];
-      DropdownMenuItem(value: Recurrence.daily, child: Text("Daily")),
+    for (var freq in Frequency.values) {
-      DropdownMenuItem(value: Recurrence.weekly, child: Text("Weekly")),
+      freqValues.add(DropdownMenuItem(value: freq, child: Text(freq.title)));
-      DropdownMenuItem(value: Recurrence.biweekly, child: Text("Biweekly")),
+    }
-      DropdownMenuItem(value: Recurrence.montly, child: Text("Monthly")),
+    ;
-      DropdownMenuItem(
-          value: Recurrence.yearly,
-          child: Text(
-            "Yearly",
-          )),
-    ];
 
     return AlertDialog(
       title: Center(child: Text("Add New Expense")),
@@ -206,10 +250,11 @@ class _ExpenseInputDialogState extends State<ExpenseInputDialog> {
                 }
                 return null;
               },
-                onChanged: (newValue) {
+              onSaved: (newValue) {
-                  // _expenseFormKey.currentState!.reset();
+                _name = newValue!;
               },
-              )),
+            ),
+          ),
           SizedBox(
             width: inputWidth,
             height: inputHeight,
@@ -221,13 +266,13 @@ class _ExpenseInputDialogState extends State<ExpenseInputDialog> {
                 if (value!.isEmpty) {
                   return "Cost must be provided.";
                 }
-                if (double.tryParse(value!) == null) {
+                if (double.tryParse(value) == null) {
                   return "Cost must be a valid number.";
                 }
                 return null;
               },
-              onChanged: (newValue) {
+              onSaved: (newValue) {
-                //_expenseFormKey.currentState!.reset();
+                _cost = double.parse(newValue!);
               },
             ),
           ),
@@ -235,17 +280,20 @@ class _ExpenseInputDialogState extends State<ExpenseInputDialog> {
             width: inputWidth,
             height: inputHeight,
             child: DropdownButtonFormField(
-              items: recurrenceValues,
+              items: freqValues,
               decoration: InputDecoration(
                   labelText: "Recurrence", hintText: "Example: Monthly"),
               validator: (value) {
                 if (value == null) {
-                  return "Recurrence must be provided.";
+                  return "Frequency must be provided.";
+                }
+                if (!Frequency.values.contains(value)) {
+                  return "Value not valid.";
                 }
                 return null;
               },
               onChanged: (newValue) {
-                //_expenseFormKey.currentState!.reset();
+                _freq = newValue;
               },
             ),
           ),
@@ -260,10 +308,11 @@ class _ExpenseInputDialogState extends State<ExpenseInputDialog> {
               validator: (value) {
                 return null;
               },
-                onChanged: (newValue) {
+              onSaved: (newValue) {
-                  //_expenseFormKey.currentState!.reset();
+                _desc = newValue!;
               },
-              )),
+            ),
+          ),
         ]),
       ),
       actions: [
@@ -287,6 +336,19 @@ class _ExpenseInputDialogState extends State<ExpenseInputDialog> {
                   print("TODO: Save expense!");
                   if (_expenseFormKey.currentState!.validate()) {
                     _expenseFormKey.currentState!.save();
+                    setState(() {
+                      expenses.add(
+                        Expense(
+                            name: _name,
+                            cost: _cost,
+                            frequency: _freq,
+                            description: _desc),
+                      );
+                    });
+                    print(expenses.toString());
+                    for (var expense in expenses) {
+                      print(expense.toString());
+                    }
                     Navigator.of(context).pop();
                   }
                 },
@@ -294,7 +356,8 @@ class _ExpenseInputDialogState extends State<ExpenseInputDialog> {
                 label: Text('Submit'),
               ),
             ],
-            ))
+          ),
+        )
       ],
     );
   }