Make ConnectionPage a StatefulWidget

This allows to store the fully qualified domain name (FQDN) of the MQTT
broker and display it if the user visits the page again.

The old behaviour was that the text input field was empty.

1 files changed, 27 insertions, 4 deletions

diff --git a/lib/ui.dart b/lib/ui.dart
index a191f5f..9603562 100644
--- a/lib/ui.dart
+++ b/lib/ui.dart
@@ -24,10 +24,35 @@ class Sia extends StatelessWidget {
   }
 }
 
-class ConnectionPage extends StatelessWidget {
+class ConnectionPage extends StatefulWidget {
   const ConnectionPage({super.key});
 
   @override
+  State<ConnectionPage> createState() => _ConnectionPageState();
+}
+
+class _ConnectionPageState extends State<ConnectionPage> {
+  late TextEditingController controller;
+
+  @override
+  void initState() {
+    super.initState();
+
+    final AppState provider = context.read<AppState>();
+    controller = TextEditingController(text: provider.fqdn);
+
+    controller.addListener(() {
+      provider.fqdn = controller.text;
+    });
+  }
+
+  @override
+  void dispose() {
+    controller.dispose();
+    super.dispose();
+  }
+
+  @override
   Widget build(BuildContext context) {
     return Consumer<AppState>(
       builder: (_, AppState state, _) {
@@ -36,14 +61,12 @@ class ConnectionPage extends StatelessWidget {
           body: Padding(
             padding: const EdgeInsets.all(16.0),
             child: TextField(
+              controller: controller,
               decoration: const InputDecoration(
                 labelText: "Server name",
                 hintText: "iot.example.org",
                 border: OutlineInputBorder(),
               ),
-              onChanged: (String value) {
-                state.fqdn = value;
-              },
             ),
           ),
           bottomNavigationBar: const ConnectionStatus(),