Feat: Zieht die Tab-Auswahl nach unten und fügt oben eine Kontoauswahl hinzu

lib/Pages/home_page.dart

@@ -1,29 +1,82 @@
+import 'package:dropdown_search/dropdown_search.dart';
 import 'package:flutter/material.dart';
 import 'package:routemaster/routemaster.dart';
 
-class HomePage extends StatelessWidget {
+/// Eine Seite, die als Container für die verschiedenen Tabs der App dient.
+///
+/// Diese Seite enthält eine App-Bar mit einer Kontoauswahl sowie ein Bottom-Navigation-Bar
+/// für die Navigation zwischen Dashboard, Verlauf und Einstellungen.
+class HomePage extends StatefulWidget {
+  /// Erstellt eine neue Instanz der HomePage.
+  const HomePage({super.key});
+
+  @override
+  State<HomePage> createState() => _HomePageState();
+}
+
+class _HomePageState extends State<HomePage> {
+  String selected = 'Konto 1';
+
   @override
   Widget build(final BuildContext context) {
     final TabPageState tabPage = TabPage.of(context);
 
     return Scaffold(
       appBar: AppBar(
-        bottom: TabBar(
+        centerTitle: true,
-          controller: tabPage.controller,
+        titleSpacing: 0,
-          tabs: const <Widget>[
+        title: Padding(
-            Tab(text: 'Dashboard'),
+          padding: const EdgeInsets.symmetric(horizontal: 12),
-            Tab(text: 'Verlauf'),
+          child: DropdownSearch<String>(
-            Tab(text: 'Einstellungen'),
+            items:
-          ],
+                (final String filter, final LoadProps? infiniteScrollProps) =>
+                    <String>['Konto 1', 'Konto 2', 'Konto 3', 'Konto 4'],
+            selectedItem: selected,
+            onChanged: (final String? value) =>
+                setState(() => selected = value!),
+            popupProps: const PopupProps<String>.menu(
+              showSearchBox: true,
+              searchFieldProps: TextFieldProps(
+                decoration: InputDecoration(
+                  hintText: 'Suchen...',
+                  contentPadding: EdgeInsets.symmetric(
+                    horizontal: 12,
+                    vertical: 8,
+                  ),
+                ),
+              ),
+            ),
+          ),
         ),
       ),
-      body: TabBarView(
+
-        controller: tabPage.controller,
+      body: SafeArea(
-        children: <Widget>[
+        child: Padding(
-          for (final PageStack stack in tabPage.stacks)
+          padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
-            PageStackNavigator(stack: stack),
+          child: TabBarView(
-        ],
+            controller: tabPage.controller,
+            children: <Widget>[
+              for (final PageStack stack in tabPage.stacks)
+                PageStackNavigator(stack: stack),
+            ],
+          ),
+        ),
       ),
+
+      bottomNavigationBar: _buildBottomNav(tabPage),
     );
   }
+
+  Widget _buildBottomNav(final TabPageState tabPage) => BottomNavigationBar(
+    currentIndex: tabPage.index,
+    onTap: tabPage.controller.animateTo,
+    items: const <BottomNavigationBarItem>[
+      BottomNavigationBarItem(icon: Icon(Icons.dashboard), label: 'Dashboard'),
+      BottomNavigationBarItem(icon: Icon(Icons.history), label: 'Verlauf'),
+      BottomNavigationBarItem(
+        icon: Icon(Icons.settings),
+        label: 'Einstellungen',
+      ),
+    ],
+  );
 }