diff --git a/lib/Pages/home_page.dart b/lib/Pages/home_page.dart index ae27df4..b15399e 100644 --- a/lib/Pages/home_page.dart +++ b/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 createState() => _HomePageState(); +} + +class _HomePageState extends State { + String selected = 'Konto 1'; + @override Widget build(final BuildContext context) { final TabPageState tabPage = TabPage.of(context); return Scaffold( appBar: AppBar( - bottom: TabBar( - controller: tabPage.controller, - tabs: const [ - Tab(text: 'Dashboard'), - Tab(text: 'Verlauf'), - Tab(text: 'Einstellungen'), - ], + centerTitle: true, + titleSpacing: 0, + title: Padding( + padding: const EdgeInsets.symmetric(horizontal: 12), + child: DropdownSearch( + items: + (final String filter, final LoadProps? infiniteScrollProps) => + ['Konto 1', 'Konto 2', 'Konto 3', 'Konto 4'], + selectedItem: selected, + onChanged: (final String? value) => + setState(() => selected = value!), + popupProps: const PopupProps.menu( + showSearchBox: true, + searchFieldProps: TextFieldProps( + decoration: InputDecoration( + hintText: 'Suchen...', + contentPadding: EdgeInsets.symmetric( + horizontal: 12, + vertical: 8, + ), + ), + ), + ), + ), ), ), - body: TabBarView( - controller: tabPage.controller, - children: [ - for (final PageStack stack in tabPage.stacks) - PageStackNavigator(stack: stack), - ], + + body: SafeArea( + child: Padding( + padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8), + child: TabBarView( + controller: tabPage.controller, + children: [ + 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(icon: Icon(Icons.dashboard), label: 'Dashboard'), + BottomNavigationBarItem(icon: Icon(Icons.history), label: 'Verlauf'), + BottomNavigationBarItem( + icon: Icon(Icons.settings), + label: 'Einstellungen', + ), + ], + ); }