HyperNet/Surface
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

♻️ Optimized responsive navigation

Browse Source
This commit is contained in:
LittleSheep 2024-11-14 22:21:13 +08:00
parent 00eef6e45a
commit e4582b7d25
15 changed files with 275 additions and 220 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
lib/router.dart
View File

@ -16,13 +16,12 @@ import 'package:surface/screens/settings.dart';
import 'package:surface/types/post.dart';
import 'package:surface/widgets/navigation/app_scaffold.dart';
final appRouter = GoRouter(
routes: [
final _appRoutes = [
ShellRoute(
builder: (context, state, child) => AppScaffold(
body: child,
showBottomNavigation: true,
showDrawer: true,
showAppBar: false,
),
routes: [
GoRoute(
@ -53,9 +52,7 @@ final appRouter = GoRouter(
],
),
ShellRoute(
builder: (context, state, child) => AppScaffold(
body: child,
),
builder: (context, state, child) => child,
routes: [
GoRoute(
path: '/post/write/:mode',
@ -84,11 +81,7 @@ final appRouter = GoRouter(
],
),
ShellRoute(
builder: (context, state, child) => AppScaffold(
body: child,
autoImplyAppBar: true,
showDrawer: true,
),
builder: (context, state, child) => AppScaffold(body: child),
routes: [
GoRoute(
path: '/auth/login',
@ -125,10 +118,7 @@ final appRouter = GoRouter(
],
),
ShellRoute(
builder: (context, state, child) => AppScaffold(
body: child,
autoImplyAppBar: true,
),
builder: (context, state, child) => AppScaffold(body: child),
routes: [
GoRoute(
path: '/settings',
@ -137,5 +127,13 @@ final appRouter = GoRouter(
),
],
),
];
final appRouter = GoRouter(
routes: [
ShellRoute(
builder: (context, state, child) => AppRootScaffold(body: child),
routes: _appRoutes,
),
],
);

3
lib/screens/account.dart
View File

@ -8,7 +8,6 @@ import 'package:styled_widget/styled_widget.dart';
import 'package:surface/providers/userinfo.dart';
import 'package:surface/widgets/account/account_image.dart';
import 'package:surface/widgets/dialog.dart';
import 'package:surface/widgets/navigation/app_scaffold.dart';
class AccountScreen extends StatelessWidget {
const AccountScreen({super.key});
@ -17,7 +16,7 @@ class AccountScreen extends StatelessWidget {
Widget build(BuildContext context) {
final ua = context.watch<UserProvider>();
return AppScaffold(
return Scaffold(
appBar: AppBar(
title: Text("screenAccount").tr(),
actions: [

3
lib/screens/account/publishers/publisher_edit.dart
View File

@ -18,7 +18,6 @@ import 'package:surface/types/post.dart';
import 'package:surface/widgets/account/account_image.dart';
import 'package:surface/widgets/dialog.dart';
import 'package:surface/widgets/loading_indicator.dart';
import 'package:surface/widgets/navigation/app_scaffold.dart';
import 'package:surface/widgets/universal_image.dart';
class AccountPublisherEditScreen extends StatefulWidget {
@ -189,7 +188,7 @@ class _AccountPublisherEditScreenState
Widget build(BuildContext context) {
final sn = context.read<SnNetworkProvider>();
return AppScaffold(
return Scaffold(
body: SingleChildScrollView(
child: Column(
children: [

3
lib/screens/account/publishers/publisher_new.dart
View File

@ -8,7 +8,6 @@ import 'package:surface/providers/sn_network.dart';
import 'package:surface/providers/userinfo.dart';
import 'package:surface/widgets/account/account_image.dart';
import 'package:surface/widgets/dialog.dart';
import 'package:surface/widgets/navigation/app_scaffold.dart';
class AccountPublisherNewScreen extends StatefulWidget {
const AccountPublisherNewScreen({super.key});
@ -23,7 +22,7 @@ class _AccountPublisherNewScreenState extends State<AccountPublisherNewScreen> {
@override
Widget build(BuildContext context) {
return AppScaffold(
return Scaffold(
body: SingleChildScrollView(
child: Column(
children: [

4
lib/screens/account/publishers/publishers.dart
View File

@ -1,5 +1,4 @@
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:gap/gap.dart';
import 'package:go_router/go_router.dart';
@ -11,7 +10,6 @@ import 'package:surface/types/post.dart';
import 'package:surface/widgets/account/account_image.dart';
import 'package:surface/widgets/dialog.dart';
import 'package:surface/widgets/loading_indicator.dart';
import 'package:surface/widgets/navigation/app_scaffold.dart';
class PublisherScreen extends StatefulWidget {
const PublisherScreen({super.key});
@ -55,7 +53,7 @@ class _PublisherScreenState extends State<PublisherScreen> {
@override
Widget build(BuildContext context) {
return AppScaffold(
return Scaffold(
body: Column(
children: [
ListTile(

3
lib/screens/explore.dart
View File

@ -8,7 +8,6 @@ import 'package:provider/provider.dart';
import 'package:surface/providers/sn_attachment.dart';
import 'package:surface/providers/sn_network.dart';
import 'package:surface/types/post.dart';
import 'package:surface/widgets/navigation/app_scaffold.dart';
import 'package:surface/widgets/post/post_item.dart';
import 'package:very_good_infinite_list/very_good_infinite_list.dart';
@ -74,7 +73,7 @@ class _ExploreScreenState extends State<ExploreScreen> {
@override
Widget build(BuildContext context) {
return AppScaffold(
return Scaffold(
floatingActionButtonLocation: ExpandableFab.location,
floatingActionButton: ExpandableFab(
key: _fabKey,

3
lib/screens/home.dart
View File

@ -1,7 +1,6 @@
import 'package:easy_localization/easy_localization.dart';
import 'package:material_symbols_icons/symbols.dart';
import 'package:styled_widget/styled_widget.dart';
import 'package:surface/widgets/navigation/app_scaffold.dart';
import 'package:flutter/material.dart';
class HomeScreen extends StatefulWidget {
@ -14,7 +13,7 @@ class HomeScreen extends StatefulWidget {
class _HomeScreenState extends State<HomeScreen> {
@override
Widget build(BuildContext context) {
return AppScaffold(
return Scaffold(
appBar: AppBar(
title: Text("screenHome").tr(),
),

3
lib/screens/post/post_detail.dart
View File

@ -12,7 +12,6 @@ import 'package:surface/providers/sn_network.dart';
import 'package:surface/types/post.dart';
import 'package:surface/widgets/dialog.dart';
import 'package:surface/widgets/loading_indicator.dart';
import 'package:surface/widgets/navigation/app_scaffold.dart';
import 'package:surface/widgets/post/post_comment_list.dart';
import 'package:surface/widgets/post/post_item.dart';
import 'package:surface/widgets/post/post_mini_editor.dart';
@ -74,7 +73,7 @@ class _PostDetailScreenState extends State<PostDetailScreen> {
Widget build(BuildContext context) {
final devicePixelRatio = MediaQuery.of(context).devicePixelRatio;
return AppScaffold(
return Scaffold(
appBar: AppBar(
leading: BackButton(
onPressed: () {

3
lib/screens/post/post_editor.dart
View File

@ -15,7 +15,6 @@ import 'package:surface/providers/sn_network.dart';
import 'package:surface/types/post.dart';
import 'package:surface/widgets/account/account_image.dart';
import 'package:surface/widgets/loading_indicator.dart';
import 'package:surface/widgets/navigation/app_scaffold.dart';
import 'package:surface/widgets/post/post_item.dart';
import 'package:surface/widgets/post/post_media_pending_list.dart';
import 'package:surface/widgets/post/post_meta_editor.dart';
@ -111,7 +110,7 @@ class _PostEditorScreenState extends State<PostEditorScreen> {
return ListenableBuilder(
listenable: _writeController,
builder: (context, _) {
return AppScaffold(
return Scaffold(
appBar: AppBar(
leading: BackButton(
onPressed: () {

3
lib/screens/settings.dart
View File

@ -15,7 +15,6 @@ import 'package:surface/providers/sn_network.dart';
import 'package:surface/providers/theme.dart';
import 'package:surface/theme.dart';
import 'package:surface/widgets/dialog.dart';
import 'package:surface/widgets/navigation/app_scaffold.dart';
class SettingsScreen extends StatefulWidget {
const SettingsScreen({super.key});
@ -58,7 +57,7 @@ class _SettingsScreenState extends State<SettingsScreen> {
Widget build(BuildContext context) {
final sn = context.read<SnNetworkProvider>();
return AppScaffold(
return Scaffold(
body: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,

23
lib/widgets/attachment/attachment_list.dart
View File

@ -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,13 +30,13 @@ class AttachmentList extends StatelessWidget {
if (data.isEmpty) return const SizedBox.shrink();
if (data.length == 1) {
if (ResponsiveBreakpoints.of(context).largerThan(MOBILE)) {
return Container(
return Padding(
// Single child list-like displaying
padding: listPadding ?? EdgeInsets.zero,
child: 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),
@ -50,6 +49,7 @@ class AttachmentList extends StatelessWidget {
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,
),

8
lib/widgets/navigation/app_drawer_navigation.dart
View File

@ -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) {

68
lib/widgets/navigation/app_rail_navigation.dart Normal file
View File

@ -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);
},
);
},
);
}
}

98
lib/widgets/navigation/app_scaffold.dart
View File

@ -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
return Scaffold(
appBar: showAppBar
? AppBar(
title: title != null
? Text(title!)
: state != null
? Text(
('screen${state.routerDelegate.currentConfiguration.last.route.name?.capitalize()}')
.tr(),
title: Text(title ?? autoTitle.tr()),
)
: null)
: null),
: null,
body: body,
floatingActionButtonLocation: floatingActionButtonLocation,
floatingActionButton: floatingActionButton,
drawer: isShowDrawer ? AppNavigationDrawer() : null,
bottomNavigationBar:
isShowBottomNavigation ? AppBottomNavigationBar() : 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;
}
}
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,
),
);
}
}

8
lib/widgets/post/post_item.dart
View File

@ -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,