Merge pull request #277 from enrique-lozano/feat/improve-large-screen…

…s-ux Improve UI/UX in large screens
enrique-lozano · Dec 21, 2024 · 4c0ec4f · 4c0ec4f
2 parents a455db3 + 97fc76d
commit 4c0ec4f
Show file tree

Hide file tree

Showing 8 changed files with 131 additions and 86 deletions.
diff --git a/lib/app/budgets/budget_details_page.dart b/lib/app/budgets/budget_details_page.dart
@@ -9,6 +9,7 @@ import 'package:monekin/app/stats/widgets/movements_distribution/chart_by_catego
 import 'package:monekin/app/transactions/widgets/transaction_list.dart';
 import 'package:monekin/core/database/services/budget/budget_service.dart';
 import 'package:monekin/core/models/budget/budget.dart';
+import 'package:monekin/core/presentation/responsive/breakpoints.dart';
 import 'package:monekin/core/presentation/widgets/card_with_header.dart';
 import 'package:monekin/core/presentation/widgets/confirm_dialog.dart';
 import 'package:monekin/core/presentation/widgets/monekin_popup_menu_button.dart';
@@ -78,10 +79,18 @@ class _BudgetDetailsPageState extends State<BudgetDetailsPage> {
             child: Scaffold(
               appBar: AppBar(
                 title: Text(t.budgets.details.title),
-                bottom: TabBar(tabs: [
-                  Tab(text: t.budgets.details.statistics),
-                  Tab(text: t.transaction.display(n: 1)),
-                ]),
+                bottom: TabBar(
+                  tabAlignment:
+                      BreakPoint.of(context).isSmallerThan(BreakpointID.md)
+                          ? TabAlignment.fill
+                          : TabAlignment.start,
+                  isScrollable:
+                      !BreakPoint.of(context).isSmallerThan(BreakpointID.md),
+                  tabs: [
+                    Tab(text: t.budgets.details.statistics),
+                    Tab(text: t.transaction.display(n: 1)),
+                  ],
+                ),
                 actions: [
                   MonekinPopupMenuButton(actionItems: [
                     ListTileActionItem(

diff --git a/lib/app/budgets/budgets_page.dart b/lib/app/budgets/budgets_page.dart
@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:monekin/app/budgets/budget_form_page.dart';
 import 'package:monekin/core/database/services/budget/budget_service.dart';
+import 'package:monekin/core/presentation/responsive/breakpoints.dart';
 import 'package:monekin/core/presentation/widgets/no_results.dart';
 import 'package:monekin/core/routes/route_utils.dart';
 import 'package:monekin/i18n/translations.g.dart';
@@ -21,6 +22,11 @@ class BudgetsPage extends StatelessWidget {
         appBar: AppBar(
           title: Text(t.budgets.title),
           bottom: TabBar(
+            tabAlignment: BreakPoint.of(context).isSmallerThan(BreakpointID.md)
+                ? TabAlignment.fill
+                : TabAlignment.start,
+            isScrollable:
+                !BreakPoint.of(context).isSmallerThan(BreakpointID.md),
             tabs: [
               Tab(text: t.budgets.repeated),
               Tab(text: t.budgets.one_time),

diff --git a/lib/app/home/dashboard.page.dart b/lib/app/home/dashboard.page.dart
@@ -50,9 +50,11 @@ class _DashboardPageState extends State<DashboardPage> {
     _scrollController.addListener(() {
       _setSmallHeaderVisible();
 
-      bool shouldExtendButton = _scrollController.offset <= 10 ||
-          _scrollController.position.userScrollDirection !=
-              ScrollDirection.reverse;
+      bool shouldExtendButton =
+          BreakPoint.of(context).isLargerThan(BreakpointID.md) ||
+              _scrollController.offset <= 10 ||
+              _scrollController.position.userScrollDirection !=
+                  ScrollDirection.reverse;
 
       if (isFloatingButtonExtended != shouldExtendButton) {
         setState(() {
@@ -92,7 +94,8 @@ class _DashboardPageState extends State<DashboardPage> {
     return Scaffold(
       appBar: EmptyAppBar(
           color: Theme.of(context).colorSchemeExtended.dashboardHeader),
-      floatingActionButton: NewTransactionButton(isExtended: isFloatingButtonExtended),
+      floatingActionButton:
+          NewTransactionButton(isExtended: isFloatingButtonExtended),
       body: Stack(
         children: [
           SingleChildScrollView(

diff --git a/lib/app/home/widgets/navigation_drawer.dart b/lib/app/home/widgets/navigation_drawer.dart
@@ -1,12 +1,13 @@
 import 'package:flutter/material.dart';
 import 'package:monekin/app/settings/widgets/display_app_icon.dart';
 import 'package:monekin/core/extensions/string.extension.dart';
+import 'package:monekin/core/presentation/app_colors.dart';
 import 'package:monekin/core/presentation/widgets/skeleton.dart';
 import 'package:monekin/core/routes/destinations.dart';
 import 'package:package_info_plus/package_info_plus.dart';
 
-class HomeDrawer extends StatelessWidget {
-  const HomeDrawer({
+class SideNavigationDrawer extends StatelessWidget {
+  const SideNavigationDrawer({
     super.key,
     required this.selectedIndex,
     this.onDestinationSelected,
@@ -19,55 +20,60 @@ class HomeDrawer extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return NavigationDrawer(
-      selectedIndex: selectedIndex,
-      onDestinationSelected: onDestinationSelected,
-      children: [
-        const SizedBox(height: 24),
-        ...List.generate(drawerActions.length, (index) {
-          final item = drawerActions[index];
+    return DrawerTheme(
+      data: const DrawerThemeData(shape: RoundedRectangleBorder()),
+      child: NavigationDrawer(
+        selectedIndex: selectedIndex,
+        onDestinationSelected: onDestinationSelected,
+        backgroundColor: Theme.of(context).colorSchemeExtended.cardColor,
+        children: [
+          const SizedBox(height: 24),
+          ...List.generate(drawerActions.length, (index) {
+            final item = drawerActions[index];
 
-          return item.toNavigationDrawerDestinationWidget();
-        }),
+            return item.toNavigationDrawerDestinationWidget();
+          }),
 
-        // Solution thanks to: https://github.com/flutter/flutter/issues/127621#issuecomment-1566294032
-        // TODO: Waiting for a Flutter fix to have a better way of creating a footer here
-        SizedBox(
-          height:
-              MediaQuery.of(context).size.height - (61 * drawerActions.length),
-          child: Column(
-            children: [
-              Expanded(child: Container()),
-              const Divider(thickness: 1.0),
-              Padding(
-                padding:
-                    const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
-                child: Row(
-                  children: [
-                    const DisplayAppIcon(height: 48),
-                    const SizedBox(width: 16),
-                    Expanded(
-                      child: FutureBuilder(
-                          future: PackageInfo.fromPlatform(),
-                          builder: (context, snapshot) {
-                            if (!snapshot.hasData) {
-                              return const Skeleton(width: 100, height: 32);
-                            }
+          // Solution thanks to: https://github.com/flutter/flutter/issues/127621#issuecomment-1566294032
+          // TODO: Waiting for a Flutter fix to have a better way of creating a footer here
+          SizedBox(
+            height: MediaQuery.of(context).size.height -
+                (61 * drawerActions.length),
+            child: Column(
+              children: [
+                Expanded(child: Container()),
+                const Divider(thickness: 1.0),
+                Padding(
+                  padding:
+                      const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
+                  child: Row(
+                    children: [
+                      const DisplayAppIcon(height: 48),
+                      const SizedBox(width: 16),
+                      Expanded(
+                        child: FutureBuilder(
+                            future: PackageInfo.fromPlatform(),
+                            builder: (context, snapshot) {
+                              if (!snapshot.hasData) {
+                                return const Skeleton(width: 100, height: 32);
+                              }
 
-                            return ListTile(
-                              contentPadding: const EdgeInsets.all(0),
-                              title: Text(snapshot.data!.appName.capitalize()),
-                              subtitle: Text('v${snapshot.data!.version}'),
-                            );
-                          }),
-                    )
-                  ],
+                              return ListTile(
+                                contentPadding: const EdgeInsets.all(0),
+                                title:
+                                    Text(snapshot.data!.appName.capitalize()),
+                                subtitle: Text('v${snapshot.data!.version}'),
+                              );
+                            }),
+                      )
+                    ],
+                  ),
                 ),
-              ),
-            ],
-          ),
-        )
-      ],
+              ],
+            ),
+          )
+        ],
+      ),
     );
   }
 }
diff --git a/lib/app/layout/navigation_sidebar.dart b/lib/app/layout/navigation_sidebar.dart
@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:monekin/app/home/widgets/navigation_drawer.dart';
 import 'package:monekin/app/settings/widgets/display_app_icon.dart';
+import 'package:monekin/core/presentation/app_colors.dart';
 import 'package:monekin/core/presentation/responsive/breakpoint_container.dart';
 import 'package:monekin/core/presentation/responsive/breakpoints.dart';
 import 'package:monekin/core/routes/destinations.dart';
@@ -66,6 +67,7 @@ class NavigationSidebarState extends State<NavigationSidebar> {
         mdChild: SafeArea(
           child: NavigationRail(
               leading: const SizedBox(height: 8),
+              backgroundColor: Theme.of(context).colorSchemeExtended.cardColor,
               trailing: Expanded(
                 child: Align(
                   alignment: Alignment.bottomCenter,
@@ -84,7 +86,7 @@ class NavigationSidebarState extends State<NavigationSidebar> {
                   selectedNavItemIndex < 0 ? null : selectedNavItemIndex),
         ),
         xlChild: SafeArea(
-          child: HomeDrawer(
+          child: SideNavigationDrawer(
             drawerActions: menuItems,
             onDestinationSelected: onDestinationSelected,
             selectedIndex: selectedNavItemIndex,

diff --git a/lib/app/stats/stats_page.dart b/lib/app/stats/stats_page.dart
@@ -7,6 +7,7 @@ import 'package:monekin/app/stats/widgets/movements_distribution/chart_by_catego
 import 'package:monekin/app/stats/widgets/movements_distribution/tags_stats.dart';
 import 'package:monekin/core/database/services/account/account_service.dart';
 import 'package:monekin/core/models/date-utils/date_period_state.dart';
+import 'package:monekin/core/presentation/responsive/breakpoints.dart';
 import 'package:monekin/core/presentation/widgets/card_with_header.dart';
 import 'package:monekin/core/presentation/widgets/dates/segmented_calendar_button.dart';
 import 'package:monekin/core/presentation/widgets/filter_row_indicator.dart';
@@ -74,6 +75,22 @@ class _StatsPageState extends State<StatsPage> {
         appBar: AppBar(
           title: Text(t.stats.title),
           actions: [
+            if (BreakPoint.of(context).isLargerOrEqualTo(BreakpointID.md)) ...[
+              SizedBox(
+                width: 300,
+                child: SegmentedCalendarButton(
+                  initialDatePeriodService: dateRangeService,
+                  borderRadius: 499,
+                  buttonHeight: 32,
+                  onChanged: (value) {
+                    setState(() {
+                      dateRangeService = value;
+                    });
+                  },
+                ),
+              ),
+              const SizedBox(width: 12),
+            ],
             IconButton(
                 onPressed: () async {
                   final modalRes = await openFilterSheetModal(
@@ -93,27 +110,33 @@ class _StatsPageState extends State<StatsPage> {
                 icon: const Icon(Icons.filter_alt_outlined)),
           ],
           bottom: TabBar(
-              tabAlignment: TabAlignment.center,
-              tabs: [
-                Tab(text: t.financial_health.display),
-                Tab(text: t.stats.distribution),
-                Tab(text: t.stats.balance),
-                Tab(text: t.stats.cash_flow),
-              ],
-              isScrollable: true),
+            tabAlignment: BreakPoint.of(context).isSmallerThan(BreakpointID.md)
+                ? TabAlignment.center
+                : TabAlignment.start,
+            isScrollable: true,
+            tabs: [
+              Tab(text: t.financial_health.display),
+              Tab(text: t.stats.distribution),
+              Tab(text: t.stats.balance),
+              Tab(text: t.stats.cash_flow),
+            ],
+          ),
         ),
-        persistentFooterButtons: [
-          PersistentFooterButton(
-            child: SegmentedCalendarButton(
-              initialDatePeriodService: dateRangeService,
-              onChanged: (value) {
-                setState(() {
-                  dateRangeService = value;
-                });
-              },
-            ),
-          )
-        ],
+        persistentFooterButtons:
+            BreakPoint.of(context).isLargerOrEqualTo(BreakpointID.md)
+                ? null
+                : [
+                    PersistentFooterButton(
+                      child: SegmentedCalendarButton(
+                        initialDatePeriodService: dateRangeService,
+                        onChanged: (value) {
+                          setState(() {
+                            dateRangeService = value;
+                          });
+                        },
+                      ),
+                    )
+                  ],
         body: Column(
           children: [
             if (filters.hasFilter) ...[

diff --git a/lib/app/transactions/transactions.page.dart b/lib/app/transactions/transactions.page.dart
@@ -10,6 +10,7 @@ import 'package:monekin/app/transactions/widgets/bulk_edit_transaction_modal.dar
 import 'package:monekin/app/transactions/widgets/transaction_list.dart';
 import 'package:monekin/core/database/services/transaction/transaction_service.dart';
 import 'package:monekin/core/models/transaction/transaction.dart';
+import 'package:monekin/core/presentation/responsive/breakpoints.dart';
 import 'package:monekin/core/presentation/widgets/confirm_dialog.dart';
 import 'package:monekin/core/presentation/widgets/filter_row_indicator.dart';
 import 'package:monekin/core/presentation/widgets/monekin_popup_menu_button.dart';
@@ -255,9 +256,11 @@ class _TransactionsPageState extends State<TransactionsPage> {
                   });
                 },
                 onScrollChange: (controller) {
-                  bool shouldExtendButton = controller.offset <= 10 ||
-                      controller.position.userScrollDirection !=
-                          ScrollDirection.reverse;
+                  bool shouldExtendButton =
+                      BreakPoint.of(context).isLargerThan(BreakpointID.md) ||
+                          controller.offset <= 10 ||
+                          controller.position.userScrollDirection !=
+                              ScrollDirection.reverse;
 
                   if (isFloatingButtonExtended != shouldExtendButton) {
                     setState(() {

diff --git a/lib/main.dart b/lib/main.dart
@@ -9,7 +9,6 @@ import 'package:monekin/core/database/services/app-data/app_data_service.dart';
 import 'package:monekin/core/database/services/user-setting/private_mode_service.dart';
 import 'package:monekin/core/database/services/user-setting/user_setting_service.dart';
 import 'package:monekin/core/database/services/user-setting/utils/get_theme_from_string.dart';
-import 'package:monekin/core/presentation/responsive/breakpoints.dart';
 import 'package:monekin/core/presentation/theme.dart';
 import 'package:monekin/core/routes/root_navigator_observer.dart';
 import 'package:monekin/core/utils/logger.dart';
@@ -153,12 +152,6 @@ class MaterialAppContainer extends StatelessWidget {
                             introSeen ? getNavigationSidebarWidth(context) : 0,
                         color: Theme.of(context).canvasColor,
                       ),
-                      if (BreakPoint.of(context).isLargerThan(BreakpointID.sm))
-                        Container(
-                          width: 2,
-                          height: MediaQuery.of(context).size.height,
-                          color: Theme.of(context).dividerColor,
-                        ),
                       Expanded(child: child ?? const SizedBox.shrink()),
                     ],
                   ),