Add a Help page.

lib/main.dart

@@ -7,6 +7,7 @@ import '/pages/income.dart';
 import '/pages/asset.dart';
 import '/pages/report.dart';
 import '/pages/settings.dart';
+import '/pages/help.dart';
 import '/db.dart';
 
 void main() {
@@ -25,6 +26,12 @@ class MainApp extends StatelessWidget {
         useMaterial3: true,
         colorScheme: ColorScheme.fromSeed(seedColor: Colors.green),
       ),
+      darkTheme: ThemeData(
+        useMaterial3: true,
+        brightness: Brightness.dark,
+        colorSchemeSeed: Colors.green,
+      ),
+      themeMode: ThemeMode.system,
       home: HomePage(),
     );
   }
@@ -64,13 +71,17 @@ class _HomePageState extends State<HomePage> {
         page = ProjectionPage();
       case 4:
         page = SettingsPage();
+      case 5:
+        page = HelpPage();
       default:
         throw UnimplementedError('No widget for page $pageSelected yet!');
     }
 
     Future<void> addNewValue(BuildContext context) {
       return showDialog(
-          context: context, builder: (_) => AlertDialog(content: dialog));
+        context: context,
+        builder: (_) => AlertDialog(content: dialog),
+      );
     }
 
     Widget? floatingButton;
@@ -110,6 +121,10 @@ class _HomePageState extends State<HomePage> {
               icon: Icon(Icons.settings),
               label: Text('Settings'),
             ),
+            NavigationRailDestination(
+              icon: Icon(Icons.help),
+              label: Text('Help'),
+            ),
           ],
           selectedIndex: pageSelected,
           onDestinationSelected: (value) {

lib/models/expense.dart

@@ -12,6 +12,7 @@ class Expense {
       required this.frequency,
       required this.description});
 
+  @override
   String toString() {
     return "$name, $cost, ${frequency.title}, $description";
   }
@@ -19,4 +20,8 @@ class Expense {
   double calcComparableCost() {
     return cost * frequency.timesPerYear;
   }
+
+  double calcComparableCostDaily() {
+    return cost / frequency.numDays;
+  }
 }

lib/models/frequency.dart

@@ -4,50 +4,60 @@ enum Frequency {
     title: "Daily",
     hint: "Once Per Day",
     timesPerYear: 364.25,
+    numDays: 1,
   ),
   weekly(
     title: "Weekly",
     hint: "Once Per Week",
-    timesPerYear: (364.25/7),
+    timesPerYear: (364.25 / 7),
+    numDays: 7,
   ),
   biweekly(
     title: "Biweekly",
     hint: "Every Other Week",
-    timesPerYear: (364.25/7/2),
+    timesPerYear: (364.25 / 14),
+    numDays: 14,
   ),
   bimonthly(
     title: "Bimonthly",
     hint: "Twice Per Month",
     timesPerYear: 24,
+    numDays: (364.25 / 24),
   ),
-  montly(
+  monthly(
     title: "Monthly",
     hint: "Once Per Month",
     timesPerYear: 12,
+    numDays: (364.25 / 12),
   ),
   quarterly(
     title: "Quarterly",
     hint: "Every Three Months",
     timesPerYear: 4,
+    numDays: (364.25 / 4),
   ),
   biannual(
     title: "Biannual",
     hint: "Twice Per Year",
     timesPerYear: 2,
+    numDays: (364.25 / 2),
   ),
   yearly(
     title: "Yearly",
     hint: "Once Per Year",
     timesPerYear: 1,
+    numDays: 364.25,
   );
 
   const Frequency({
     required this.title,
     required this.hint,
     required this.timesPerYear,
+    required this.numDays,
   });
 
   final String title;
   final String hint;
   final double timesPerYear;
+  final double numDays;
 }

lib/pages/expense.dart

@@ -17,23 +17,38 @@ class ExpensePage extends StatefulWidget {
 }
 
 class _ExpensePageState extends State<ExpensePage> {
+  refresh() {
+    setState(() {});
+  }
+
   @override
   Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+
     expenses.sort(
       (a, b) => (b.calcComparableCost() - a.calcComparableCost()).toInt(),
     );
+
     return expenses.isEmpty
         ? Text("Add expenses to get started!")
         : ListView.builder(
             itemCount: expenses.length,
             itemBuilder: (_, index) {
               final Expense curr = expenses[index];
-              final String estimateSymbol = switch (curr.frequency.timesPerYear
+              final String estimateSymbolYearly = curr.frequency.timesPerYear
-                  .toStringAsFixed(2)
+                          .toStringAsFixed(2)
-                  .endsWith(".00")) {
+                          .endsWith(".00") &&
-                true => "",
+                      curr.calcComparableCost().toStringAsFixed(3).endsWith("0")
-                false => "~",
+                  ? ""
-              };
+                  : "~";
+              final String estimateSymbolDaily =
+                  curr.frequency.numDays.toStringAsFixed(2).endsWith(".00") &&
+                          curr
+                              .calcComparableCostDaily()
+                              .toStringAsFixed(3)
+                              .endsWith("0")
+                      ? ""
+                      : "~";
               return Padding(
                 padding: const EdgeInsets.all(4.0),
                 child: Dismissible(
@@ -41,12 +56,20 @@ class _ExpensePageState extends State<ExpensePage> {
                   background: Container(
                     color: Colors.red,
                     child: Row(
+                      mainAxisAlignment: MainAxisAlignment.start,
                       children: [
                         Icon(Icons.delete),
-                        Text("Delete!"),
+                        Text("Delete"),
-                        Spacer(),
+                      ],
-                        Text("Delete!"),
+                    ),
-                        Icon(Icons.delete),
+                  ),
+                  secondaryBackground: Container(
+                    color: Colors.orange,
+                    child: Row(
+                      mainAxisAlignment: MainAxisAlignment.end,
+                      children: [
+                        Text("Edit"),
+                        Icon(Icons.edit),
                       ],
                     ),
                   ),
@@ -54,11 +77,32 @@ class _ExpensePageState extends State<ExpensePage> {
                     setState(() {
                       expenses.remove(curr);
                     });
+                    switch (direction) {
+                      case DismissDirection.startToEnd:
+                        // Only remove the item from the list.
+                        break;
+                      case DismissDirection.endToStart:
+                        // Open an edit dialog, then remove the item from the list.
+                        showDialog(
+                          context: context,
+                          builder: (_) => AlertDialog(
+                            content: ExpenseInputDialog(
+                              notifyParent: refresh,
+                              expense: curr,
+                            ),
+                          ),
+                        );
+                        break;
+                      default:
+                        UnimplementedError(
+                          "Direction ${direction.toString()} not recognized.",
+                        );
+                    }
                   },
                   child: Container(
                     decoration: BoxDecoration(
                       borderRadius: BorderRadius.circular(4),
-                      color: Colors.greenAccent,
+                      color: theme.colorScheme.onPrimary,
                     ),
                     child: Padding(
                       padding: const EdgeInsets.all(4.0),
@@ -77,11 +121,6 @@ class _ExpensePageState extends State<ExpensePage> {
                                 "${curr.cost.toStringAsFixed(2)} ${curr.frequency.title}",
                                 style: TextStyle(fontSize: 12.0),
                               ),
-                              if (curr.frequency != Frequency.yearly)
-                                Text(
-                                  "$estimateSymbol${curr.calcComparableCost().toStringAsFixed(2)} Yearly",
-                                  style: TextStyle(fontSize: 12.0),
-                                ),
                             ],
                           ),
                           Expanded(
@@ -96,16 +135,20 @@ class _ExpensePageState extends State<ExpensePage> {
                               ),
                             ),
                           ),
-                          IconButton(
+                          Column(
-                            icon: Icon(Icons.edit_off),
+                            crossAxisAlignment: CrossAxisAlignment.end,
-                            onPressed: () {
+                            children: [
-                              // TODO: Open the item in the dialog with the NAME field disabled.
+                              //if (curr.frequency != Frequency.daily)
-                              ScaffoldMessenger.of(context).showSnackBar(
+                              Text(
-                                const SnackBar(
+                                "$estimateSymbolDaily${curr.calcComparableCostDaily().toStringAsFixed(2)} ${Frequency.daily.title}",
-                                  content: Text("Editing still TBD"),
+                                style: TextStyle(fontSize: 12.0),
-                                ),
+                              ),
-                              );
+                              //if (curr.frequency != Frequency.yearly)
-                            },
+                              Text(
+                                "$estimateSymbolYearly${curr.calcComparableCost().toStringAsFixed(2)} ${Frequency.yearly.title}",
+                                style: TextStyle(fontSize: 12.0),
+                              ),
+                            ],
                           ),
                         ],
                       ),
@@ -120,9 +163,12 @@ class _ExpensePageState extends State<ExpensePage> {
 
 class ExpenseInputDialog extends StatefulWidget {
   final Function() notifyParent;
+  final Expense? expense;
+
   const ExpenseInputDialog({
     super.key,
     required this.notifyParent,
+    this.expense,
   });
 
   @override
@@ -133,12 +179,19 @@ class _ExpenseInputDialogState extends State<ExpenseInputDialog> {
   final _expenseFormKey = GlobalKey<FormState>();
 
   String _name = "";
-  double _cost = 0.0;
+  double _cost = 0;
-  Frequency _freq = Frequency.montly;
+  Frequency _freq = Frequency.monthly;
   String _desc = "";
 
   @override
   Widget build(BuildContext context) {
+    if (widget.expense != null) {
+      _name = widget.expense!.name;
+      _cost = widget.expense!.cost;
+      _freq = widget.expense!.frequency;
+      _desc = widget.expense!.description;
+    }
+
     return Column(
       // prevent AlertDialog from taking full vertical height.
       mainAxisSize: MainAxisSize.min,
@@ -147,6 +200,12 @@ class _ExpenseInputDialogState extends State<ExpenseInputDialog> {
           alignment: FractionalOffset.topRight,
           child: IconButton(
             onPressed: () {
+              if (widget.expense != null) {
+                setState(() {
+                  expenses.add(widget.expense!);
+                  widget.notifyParent();
+                });
+              }
               Navigator.of(context).pop();
             },
             icon: Icon(Icons.clear),
@@ -154,7 +213,11 @@ class _ExpenseInputDialogState extends State<ExpenseInputDialog> {
         ),
         AlertDialog(
           insetPadding: EdgeInsets.all(0),
-          title: Text("New Expense"),
+          title: Center(
+            child: widget.expense == null
+                ? Text("New Expense")
+                : Text("Edit Expense"),
+          ),
           content: Form(
             key: _expenseFormKey,
             child: Column(
@@ -162,12 +225,14 @@ class _ExpenseInputDialogState extends State<ExpenseInputDialog> {
               children: [
                 TextFormField(
                   keyboardType: TextInputType.text,
+                  textCapitalization: TextCapitalization.words,
                   decoration: InputDecoration(
                     labelText: "Name",
                     hintText: "Example: Red Pocket",
-                    hintStyle: TextStyle(fontSize: 12.0),
+                    hintStyle: TextStyle(fontSize: 10.0),
                     errorStyle: TextStyle(fontSize: 10.0),
                   ),
+                  initialValue: _name,
                   validator: (value) {
                     if (value!.isEmpty) {
                       return "Name must be provided.";
@@ -186,9 +251,10 @@ class _ExpenseInputDialogState extends State<ExpenseInputDialog> {
                   decoration: InputDecoration(
                     labelText: "Cost",
                     hintText: "Example: 10.00",
-                    hintStyle: TextStyle(fontSize: 12.0),
+                    hintStyle: TextStyle(fontSize: 10.0),
                     errorStyle: TextStyle(fontSize: 10.0),
                   ),
+                  initialValue: _cost != 0 ? _cost.toString() : "",
                   validator: (value) {
                     if (value == null || value.isEmpty) {
                       return "Cost must be provided.";
@@ -230,7 +296,7 @@ class _ExpenseInputDialogState extends State<ExpenseInputDialog> {
                         ),
                       )
                       .toList(),
-                  value: Frequency.montly,
+                  value: _freq,
                   decoration: InputDecoration(
                     labelText: "Frequency",
                     errorStyle: TextStyle(fontSize: 10.0),
@@ -250,12 +316,14 @@ class _ExpenseInputDialogState extends State<ExpenseInputDialog> {
                 ),
                 TextFormField(
                   keyboardType: TextInputType.text,
+                  textCapitalization: TextCapitalization.sentences,
                   decoration: InputDecoration(
                     labelText: "Description",
                     hintText: "Example: 1GB data with unlimited talk & text.",
-                    hintStyle: TextStyle(fontSize: 12.0),
+                    hintStyle: TextStyle(fontSize: 8.0),
                     errorStyle: TextStyle(fontSize: 10.0),
                   ),
+                  initialValue: _desc,
                   validator: (value) {
                     return null;
                   },

lib/pages/help.dart

@@ -0,0 +1,72 @@
+import 'package:flutter/material.dart';
+
+class HelpPage extends StatelessWidget {
+  const HelpPage({
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+
+    return Column(
+      children: [
+        Expanded(
+          child: Padding(
+            padding: const EdgeInsets.all(8.0),
+            child: Container(
+              decoration: BoxDecoration(
+                borderRadius: BorderRadius.circular(4),
+                color: theme.colorScheme.onPrimary,
+              ),
+              child: Column(
+                children: [
+                  Text("This app is meant to be a simple budgeting tool,"
+                      " allowing you to view your income and expenses at a high level"
+                      " without micro managing specific budget items or adding receipts."),
+                  //Text("Another paragraph.")
+                ],
+              ),
+            ),
+          ),
+        ),
+        Row(
+          children: [
+            Expanded(
+              child: Padding(
+                padding: const EdgeInsets.all(8.0),
+                child: Container(
+                  decoration: BoxDecoration(
+                    borderRadius: BorderRadius.circular(4),
+                    color: theme.colorScheme.onPrimary,
+                  ),
+                  child: TextButton.icon(
+                    onPressed: () {},
+                    icon: Icon(Icons.code),
+                    label: Text("Code Repository"),
+                  ),
+                ),
+              ),
+            ),
+            Expanded(
+              child: Padding(
+                padding: const EdgeInsets.all(8.0),
+                child: Container(
+                  decoration: BoxDecoration(
+                    borderRadius: BorderRadius.circular(4),
+                    color: theme.colorScheme.onPrimary,
+                  ),
+                  child: TextButton.icon(
+                    onPressed: () {},
+                    icon: Icon(Icons.web_asset),
+                    label: Text("Personal Website"),
+                  ),
+                ),
+              ),
+            ),
+          ],
+        )
+      ],
+    );
+  }
+}

lib/pages/income.dart

@@ -7,12 +7,6 @@ class IncomePage extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Center(
+    return Placeholder();
-        child: Column(
-      children: [
-        Text("TBD"),
-        Placeholder(),
-      ],
-    ));
   }
 }