Made the UI fancier but still unable to get the controller to work.

lib/main.dart

@@ -7,9 +7,23 @@ void main() {
   runApp(const MainApp());
 }
 
-class MainApp extends StatelessWidget {
+class MainApp extends StatefulWidget {
   const MainApp({super.key});
 
+  @override
+  State<MainApp> createState() => _MainAppState();
+}
+
+class _MainAppState extends State<MainApp> {
+  final nameFieldController = TextEditingController();
+
+  @override
+  void dispose() {
+    // Clean up the controller when the widget is disposed.
+    nameFieldController.dispose();
+    super.dispose();
+  }
+
   @override
   Widget build(BuildContext context) {
     const inputWidth = 400.0;
@@ -20,11 +34,10 @@ class MainApp extends StatelessWidget {
       DropdownMenuEntry(value: Recurrence.weekly, label: "Weekly"),
       DropdownMenuEntry(value: Recurrence.biweekly, label: "Biweekly"),
       DropdownMenuEntry(value: Recurrence.montly, label: "Monthly"),
-      DropdownMenuEntry(value: Recurrence.yearly, label: "Yearly")
+      DropdownMenuEntry(value: Recurrence.yearly, label: "Yearly"),
+      DropdownMenuEntry(value: null, label: ""),
     ];
 
-    var cost;
-
     return const MaterialApp(
       home: Scaffold(
         body: Center(
@@ -35,29 +48,30 @@ class MainApp extends StatelessWidget {
                 height: inputHeight,
                 child: TextField(
                   keyboardType: TextInputType.text,
-                  decoration: InputDecoration(hintText: "Expense Name"),
+                  decoration: InputDecoration(labelText: "Name", hintText: "Example: Red Pocket Phone Bill", ),
                   // https://docs.flutter.dev/cookbook/forms/retrieve-input
-
+                  //controller: nameFieldController,
                 )),
             SizedBox(
               width: inputWidth,
               height: inputHeight,
               child: TextField(
                 keyboardType: TextInputType.numberWithOptions(decimal: true),
-                decoration: InputDecoration(hintText: "Expense Cost"),
+                decoration: InputDecoration(labelText: "Cost", hintText: "Example: 10.00"),
               ),
             ),
             DropdownMenu(
               dropdownMenuEntries: recurrenceValues,
-              hintText: "Recurrence",
               width: inputWidth,
+              label: Text("Recurrence"),
+              hintText: "Example: Monthly",
             ),
             SizedBox(
                 width: inputWidth,
                 height: inputHeight,
                 child: TextField(
                   keyboardType: TextInputType.text,
-                  decoration: InputDecoration(hintText: "Expense Description"),
+                  decoration: InputDecoration(labelText: "Description", hintText: "Example: 1GB data with unlimited talk & text."),
                 )),
           ]),
         ),
@@ -67,13 +81,7 @@ class MainApp extends StatelessWidget {
 }
 
 // https://www.tutorialspoint.com/dart_programming/dart_programming_enumeration.htm
-enum Recurrence {
+enum Recurrence { daily, weekly, biweekly, montly, yearly }
-  daily,
-  weekly,
-  biweekly,
-  montly,
-  yearly
-}
 
 class Expense {
   String name;