♻️ Optimized responsive navigation

2024-11-14 22:21:13 +08:00
parent 00eef6e45a
commit e4582b7d25
15 changed files with 275 additions and 220 deletions
--- a/lib/widgets/attachment/attachment_list.dart
+++ b/lib/widgets/attachment/attachment_list.dart
@ -1,5 +1,3 @@
-import 'dart:math' as math;
-
 import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';
 import 'package:gap/gap.dart';
@ -11,14 +9,15 @@ class AttachmentList extends StatelessWidget {
  final List<SnAttachment> data;
  final bool? bordered;
  final double? maxHeight;
+  final EdgeInsets? listPadding;
  const AttachmentList({
    super.key,
    required this.data,
    this.bordered,
    this.maxHeight,
+    this.listPadding,
  });

-  static const double kMaxItemWidth = 520;
  static const BorderRadius kDefaultRadius =
      BorderRadius.all(Radius.circular(8));

@ -31,23 +30,24 @@ class AttachmentList extends StatelessWidget {
    if (data.isEmpty) return const SizedBox.shrink();
    if (data.length == 1) {
      if (ResponsiveBreakpoints.of(context).largerThan(MOBILE)) {
-        return Container(
-          constraints: BoxConstraints(
-            maxHeight: maxHeight ?? double.infinity,
-            maxWidth: math.min(
-              MediaQuery.of(context).size.width - 20,
-              kMaxItemWidth,
+        return Padding(
+          // Single child list-like displaying
+          padding: listPadding ?? EdgeInsets.zero,
+          child: Container(
+            constraints: BoxConstraints(
+              minWidth: 80,
+              maxHeight: maxHeight ?? double.infinity,
            ),
-          ),
-          decoration: BoxDecoration(
-            border: Border(top: borderSide, bottom: borderSide),
-            borderRadius: kDefaultRadius,
-          ),
-          child: AspectRatio(
-            aspectRatio: data[0].metadata['ratio']?.toDouble() ?? 1,
-            child: ClipRRect(
+            decoration: BoxDecoration(
+              border: Border(top: borderSide, bottom: borderSide),
              borderRadius: kDefaultRadius,
-              child: AttachmentItem(data: data[0], isExpandable: true),
+            ),
+            child: AspectRatio(
+              aspectRatio: data[0].metadata['ratio']?.toDouble() ?? 1,
+              child: ClipRRect(
+                borderRadius: kDefaultRadius,
+                child: AttachmentItem(data: data[0], isExpandable: true),
+              ),
            ),
          ),
        );
@ -74,11 +74,8 @@ class AttachmentList extends StatelessWidget {
          itemBuilder: (context, idx) {
            return Container(
              constraints: BoxConstraints(
+                minWidth: 80,
                maxHeight: maxHeight ?? double.infinity,
-                maxWidth: math.min(
-                  MediaQuery.of(context).size.width - 20,
-                  kMaxItemWidth,
-                ),
              ),
              decoration: BoxDecoration(
                border: Border(top: borderSide, bottom: borderSide),
@ -94,7 +91,7 @@ class AttachmentList extends StatelessWidget {
            );
          },
          separatorBuilder: (context, index) => const Gap(8),
-          padding: const EdgeInsets.symmetric(horizontal: 12),
+          padding: listPadding,
          physics: const BouncingScrollPhysics(),
          scrollDirection: Axis.horizontal,
        ),
--- a/lib/widgets/navigation/app_drawer_navigation.dart
+++ b/lib/widgets/navigation/app_drawer_navigation.dart
@ -1,5 +1,3 @@
-import 'dart:math' as math;
-
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
@ -9,7 +7,8 @@ import 'package:styled_widget/styled_widget.dart';
 import 'package:surface/providers/navigation.dart';

 class AppNavigationDrawer extends StatefulWidget {
-  const AppNavigationDrawer({super.key});
+  final double? elevation;
+  const AppNavigationDrawer({super.key, this.elevation});

  @override
  State<AppNavigationDrawer> createState() => _AppNavigationDrawerState();
@ -43,6 +42,7 @@ class _AppNavigationDrawerState extends State<AppNavigationDrawer> {
        ];

        return NavigationDrawer(
+          elevation: widget.elevation,
          backgroundColor: backgroundColor,
          selectedIndex: nav.currentIndex,
          children: [
@ -56,7 +56,7 @@ class _AppNavigationDrawerState extends State<AppNavigationDrawer> {
              ],
            ).padding(
              horizontal: 32,
-              top: math.max(MediaQuery.of(context).padding.top, 16),
+              top: MediaQuery.of(context).padding.top > 16 ? 0 : 16,
              bottom: 16,
            ),
            ...destinations.where((ele) => ele.isPinned).map((ele) {
--- a/lib/widgets/navigation/app_rail_navigation.dart
+++ b/lib/widgets/navigation/app_rail_navigation.dart
@ -0,0 +1,68 @@
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+import 'package:material_symbols_icons/symbols.dart';
+import 'package:provider/provider.dart';
+import 'package:styled_widget/styled_widget.dart';
+import 'package:surface/providers/navigation.dart';
+
+class AppRailNavigation extends StatefulWidget {
+  const AppRailNavigation({super.key});
+
+  @override
+  State<AppRailNavigation> createState() => _AppRailNavigationState();
+}
+
+class _AppRailNavigationState extends State<AppRailNavigation> {
+  @override
+  void initState() {
+    super.initState();
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      context
+          .read<NavigationProvider>()
+          .autoDetectIndex(GoRouter.maybeOf(context));
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final nav = context.watch<NavigationProvider>();
+
+    return ListenableBuilder(
+      listenable: nav,
+      builder: (context, _) {
+        final destinations =
+            nav.destinations.where((ele) => ele.isPinned).toList();
+
+        return NavigationRail(
+          selectedIndex: nav.currentIndex,
+          destinations: [
+            ...destinations.where((ele) => ele.isPinned).map((ele) {
+              return NavigationRailDestination(
+                icon: ele.icon,
+                label: Text(ele.label).tr(),
+              );
+            }),
+          ],
+          trailing: Expanded(
+            child: Align(
+              alignment: Alignment.bottomCenter,
+              child: StyledWidget(
+                IconButton(
+                  icon: const Icon(Symbols.menu),
+                  onPressed: () {
+                    Scaffold.of(context).openDrawer();
+                  },
+                ),
+              ).padding(bottom: 16),
+            ),
+          ),
+          onDestinationSelected: (idx) {
+            nav.setIndex(idx);
+            GoRouter.of(context).goNamed(destinations[idx].screen);
+          },
+        );
+      },
+    );
+  }
+}
--- a/lib/widgets/navigation/app_scaffold.dart
+++ b/lib/widgets/navigation/app_scaffold.dart
@ -6,77 +6,83 @@ import 'package:surface/widgets/dialog.dart';
 import 'package:surface/widgets/navigation/app_background.dart';
 import 'package:surface/widgets/navigation/app_bottom_navigation.dart';
 import 'package:surface/widgets/navigation/app_drawer_navigation.dart';
+import 'package:surface/widgets/navigation/app_rail_navigation.dart';

 class AppScaffold extends StatelessWidget {
-  final PreferredSizeWidget? appBar;
-  final FloatingActionButtonLocation? floatingActionButtonLocation;
-  final Widget? floatingActionButton;
  final String? title;
  final Widget? body;
-  final bool autoImplyAppBar;
+  final bool showAppBar;
  final bool showBottomNavigation;
-  final bool showDrawer;
  const AppScaffold({
    super.key,
-    this.appBar,
-    this.floatingActionButton,
-    this.floatingActionButtonLocation,
    this.title,
    this.body,
-    this.autoImplyAppBar = false,
+    this.showAppBar = true,
    this.showBottomNavigation = false,
-    this.showDrawer = false,
  });

  @override
  Widget build(BuildContext context) {
-    final isShowDrawer = showDrawer
-        ? ResponsiveBreakpoints.of(context).smallerOrEqualTo(MOBILE)
-        : false;
    final isShowBottomNavigation = (showBottomNavigation)
        ? ResponsiveBreakpoints.of(context).smallerOrEqualTo(MOBILE)
        : false;

    final state = GoRouter.maybeOf(context);
+    final autoTitle = state != null
+        ? 'screen${state.routerDelegate.currentConfiguration.last.route.name?.capitalize()}'
+        : 'screen';

-    final innerWidget = AppBackground(
-      child: Scaffold(
-        appBar: appBar ??
-            (autoImplyAppBar
-                ? AppBar(
-                    title: title != null
-                        ? Text(title!)
-                        : state != null
-                            ? Text(
-                                ('screen${state.routerDelegate.currentConfiguration.last.route.name?.capitalize()}')
-                                    .tr(),
-                              )
-                            : null)
-                : null),
-        body: body,
-        floatingActionButtonLocation: floatingActionButtonLocation,
-        floatingActionButton: floatingActionButton,
-        drawer: isShowDrawer ? AppNavigationDrawer() : null,
-        bottomNavigationBar:
-            isShowBottomNavigation ? AppBottomNavigationBar() : null,
-      ),
+    return Scaffold(
+      appBar: showAppBar
+          ? AppBar(
+              title: Text(title ?? autoTitle.tr()),
+            )
+          : null,
+      body: body,
+      bottomNavigationBar:
+          isShowBottomNavigation ? AppBottomNavigationBar() : null,
+    );
+  }
+}
+
+class AppRootScaffold extends StatelessWidget {
+  final Widget body;
+  const AppRootScaffold({super.key, required this.body});
+
+  @override
+  Widget build(BuildContext context) {
+    final devicePixelRatio = MediaQuery.of(context).devicePixelRatio;
+
+    final isCollapseDrawer =
+        ResponsiveBreakpoints.of(context).smallerOrEqualTo(MOBILE);
+    final isExpandDrawer = ResponsiveBreakpoints.of(context).largerThan(TABLET);
+
+    final innerWidget = isCollapseDrawer
+        ? body
+        : Row(
+            children: [
+              Container(
+                decoration: BoxDecoration(
+                  border: Border(
+                    right: BorderSide(
+                      color: Theme.of(context).dividerColor,
+                      width: 1 / devicePixelRatio,
+                    ),
+                  ),
+                ),
+                child: isExpandDrawer
+                    ? AppNavigationDrawer(elevation: 0)
+                    : AppRailNavigation(),
+              ),
+              Expanded(child: body),
+            ],
+          );
+
+    return AppBackground(
+      child: Scaffold(
+        body: innerWidget,
+        drawer: !isExpandDrawer ? AppNavigationDrawer() : null,
+      ),
    );
-
-    if (showDrawer && ResponsiveBreakpoints.of(context).largerThan(MOBILE)) {
-      final devicePixelRatio = MediaQuery.of(context).devicePixelRatio;
-
-      return Row(
-        children: [
-          AppNavigationDrawer(),
-          VerticalDivider(
-            width: 1 / devicePixelRatio,
-            thickness: 1 / devicePixelRatio,
-          ),
-          Expanded(child: innerWidget),
-        ],
-      );
-    }
-
-    return innerWidget;
  }
 }
--- a/lib/widgets/post/post_item.dart
+++ b/lib/widgets/post/post_item.dart
@ -4,7 +4,6 @@ import 'package:go_router/go_router.dart';
 import 'package:material_symbols_icons/symbols.dart';
 import 'package:provider/provider.dart';
 import 'package:relative_time/relative_time.dart';
-import 'package:responsive_framework/responsive_framework.dart';
 import 'package:styled_widget/styled_widget.dart';
 import 'package:surface/providers/userinfo.dart';
 import 'package:surface/types/post.dart';
@ -34,10 +33,6 @@ class PostItem extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
-    final isListAttachments =
-        ResponsiveBreakpoints.of(context).largerThan(MOBILE) ||
-            (data.preload?.attachments?.length ?? 0) > 1;
-
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
@ -52,7 +47,8 @@ class PostItem extends StatelessWidget {
            data: data.preload!.attachments!,
            bordered: true,
            maxHeight: 520,
-          ).padding(horizontal: isListAttachments ? 12 : 0),
+            listPadding: const EdgeInsets.symmetric(horizontal: 12),
+          ),
        _PostBottomAction(
          data: data,
          showComments: showComments,