💄 Better large screen optimization!

This commit is contained in:
LittleSheep 2024-05-03 13:51:44 +08:00
parent c0680a3134
commit d179d907ad
4 changed files with 111 additions and 162 deletions

View File

@ -26,16 +26,52 @@ import 'package:solian/widgets/layouts/two_column.dart';
abstract class SolianRouter { abstract class SolianRouter {
static final router = GoRouter( static final router = GoRouter(
routes: [ routes: [
GoRoute(
path: '/',
name: 'explore',
builder: (context, state) => const ExploreScreen(),
),
GoRoute( GoRoute(
path: '/notification', path: '/notification',
name: 'notification', name: 'notification',
builder: (context, state) => const NotificationScreen(), builder: (context, state) => const NotificationScreen(),
), ),
ShellRoute(
pageBuilder: (context, state, child) => defaultPageBuilder(
context,
state,
SolianTheme.isLargeScreen(context)
? TwoColumnLayout(
sideChild: const ExplorePostScreen(),
mainChild: child,
)
: child,
),
routes: [
GoRoute(
path: '/',
name: 'explore',
builder: (context, state) =>
!SolianTheme.isLargeScreen(context) ? const ExplorePostScreen() : const PageEmptyWidget(),
),
GoRoute(
path: '/posts/publish/moments',
name: 'posts.moments.editor',
builder: (context, state) => MomentEditorScreen(editing: state.extra as Post?),
),
GoRoute(
path: '/posts/publish/comments',
name: 'posts.comments.editor',
builder: (context, state) {
final args = state.extra as CommentPostArguments;
return CommentEditorScreen(editing: args.editing, related: args.related);
},
),
GoRoute(
path: '/posts/:dataset/:alias',
name: 'posts.screen',
builder: (context, state) => PostScreen(
alias: state.pathParameters['alias'] as String,
dataset: state.pathParameters['dataset'] as String,
),
),
],
),
ShellRoute( ShellRoute(
pageBuilder: (context, state, child) => defaultPageBuilder( pageBuilder: (context, state, child) => defaultPageBuilder(
context, context,
@ -81,31 +117,23 @@ abstract class SolianRouter {
), ),
], ],
), ),
ShellRoute(
pageBuilder: (context, state, child) => defaultPageBuilder(
context,
state,
SolianTheme.isLargeScreen(context)
? TwoColumnLayout(
sideChild: const AccountScreen(),
mainChild: child,
)
: child,
),
routes: [
GoRoute( GoRoute(
path: '/account', path: '/account',
name: 'account', name: 'account',
builder: (context, state) => const AccountScreen(), builder: (context, state) =>
), !SolianTheme.isLargeScreen(context) ? const AccountScreen() : const PageEmptyWidget(),
GoRoute(
path: '/posts/publish/moments',
name: 'posts.moments.editor',
builder: (context, state) => MomentEditorScreen(editing: state.extra as Post?),
),
GoRoute(
path: '/posts/publish/comments',
name: 'posts.comments.editor',
builder: (context, state) {
final args = state.extra as CommentPostArguments;
return CommentEditorScreen(editing: args.editing, related: args.related);
},
),
GoRoute(
path: '/posts/:dataset/:alias',
name: 'posts.screen',
builder: (context, state) => PostScreen(
alias: state.pathParameters['alias'] as String,
dataset: state.pathParameters['dataset'] as String,
),
), ),
GoRoute( GoRoute(
path: '/auth/sign-in', path: '/auth/sign-in',
@ -127,6 +155,7 @@ abstract class SolianRouter {
name: 'account.personalize', name: 'account.personalize',
builder: (context, state) => const PersonalizeScreen(), builder: (context, state) => const PersonalizeScreen(),
), ),
]),
], ],
); );

View File

@ -2,64 +2,21 @@ import 'package:flutter/material.dart';
import 'package:provider/provider.dart'; import 'package:provider/provider.dart';
import 'package:solian/providers/auth.dart'; import 'package:solian/providers/auth.dart';
import 'package:solian/router.dart'; import 'package:solian/router.dart';
import 'package:solian/screens/account/friend.dart';
import 'package:solian/screens/account/personalize.dart';
import 'package:solian/widgets/account/account_avatar.dart'; import 'package:solian/widgets/account/account_avatar.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart'; import 'package:flutter_gen/gen_l10n/app_localizations.dart';
import 'package:solian/widgets/empty.dart';
import 'package:solian/widgets/scaffold.dart'; import 'package:solian/widgets/scaffold.dart';
class AccountScreen extends StatefulWidget { class AccountScreen extends StatelessWidget {
const AccountScreen({super.key}); const AccountScreen({super.key});
@override
State<AccountScreen> createState() => _AccountScreenState();
}
class _AccountScreenState extends State<AccountScreen> {
String? _title;
String? _selectedTab;
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final screenWidth = MediaQuery.of(context).size.width;
final isLargeScreen = screenWidth >= 600;
Widget renderContent() {
switch (_selectedTab) {
case 'account.friend':
return const FriendScreenWidget();
case 'account.personalize':
return const PersonalizeScreenWidget();
default:
return const PageEmptyWidget();
}
}
return IndentScaffold( return IndentScaffold(
title: _title ?? AppLocalizations.of(context)!.account, title: AppLocalizations.of(context)!.account,
noSafeArea: true, noSafeArea: true,
fixedAppBarColor: true, fixedAppBarColor: true,
child: isLargeScreen
? Row(
children: [
Flexible(
flex: 2,
child: AccountScreenWidget( child: AccountScreenWidget(
onSelect: (item, title) { onSelect: (item) {
setState(() {
_selectedTab = item;
_title = title;
});
},
),
),
const VerticalDivider(thickness: 0.3, width: 0.3),
Flexible(flex: 4, child: renderContent()),
],
)
: AccountScreenWidget(
onSelect: (item, _) {
SolianRouter.router.pushNamed(item); SolianRouter.router.pushNamed(item);
}, },
), ),
@ -68,7 +25,7 @@ class _AccountScreenState extends State<AccountScreen> {
} }
class AccountScreenWidget extends StatefulWidget { class AccountScreenWidget extends StatefulWidget {
final Function(String item, String title) onSelect; final Function(String item) onSelect;
const AccountScreenWidget({super.key, required this.onSelect}); const AccountScreenWidget({super.key, required this.onSelect});
@ -105,7 +62,7 @@ class _AccountScreenWidgetState extends State<AccountScreenWidget> {
leading: const Icon(Icons.color_lens), leading: const Icon(Icons.color_lens),
title: Text(AppLocalizations.of(context)!.personalize), title: Text(AppLocalizations.of(context)!.personalize),
onTap: () { onTap: () {
widget.onSelect('account.personalize', AppLocalizations.of(context)!.personalize); widget.onSelect('account.personalize');
}, },
), ),
ListTile( ListTile(
@ -113,7 +70,7 @@ class _AccountScreenWidgetState extends State<AccountScreenWidget> {
leading: const Icon(Icons.diversity_1), leading: const Icon(Icons.diversity_1),
title: Text(AppLocalizations.of(context)!.friend), title: Text(AppLocalizations.of(context)!.friend),
onTap: () { onTap: () {
widget.onSelect('account.friend', AppLocalizations.of(context)!.friend); widget.onSelect('account.friend');
}, },
), ),
ListTile( ListTile(

View File

@ -6,61 +6,26 @@ import 'package:solian/models/pagination.dart';
import 'package:solian/models/post.dart'; import 'package:solian/models/post.dart';
import 'package:solian/providers/auth.dart'; import 'package:solian/providers/auth.dart';
import 'package:solian/router.dart'; import 'package:solian/router.dart';
import 'package:solian/screens/posts/screen.dart';
import 'package:solian/utils/service_url.dart'; import 'package:solian/utils/service_url.dart';
import 'package:infinite_scroll_pagination/infinite_scroll_pagination.dart'; import 'package:infinite_scroll_pagination/infinite_scroll_pagination.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart'; import 'package:flutter_gen/gen_l10n/app_localizations.dart';
import 'package:http/http.dart' as http; import 'package:http/http.dart' as http;
import 'package:solian/widgets/empty.dart'; import 'package:solian/utils/theme.dart';
import 'package:solian/widgets/scaffold.dart'; import 'package:solian/widgets/scaffold.dart';
import 'package:solian/widgets/notification_notifier.dart'; import 'package:solian/widgets/notification_notifier.dart';
import 'package:solian/widgets/posts/post.dart'; import 'package:solian/widgets/posts/post.dart';
class ExploreScreen extends StatefulWidget { class ExplorePostScreen extends StatelessWidget {
const ExploreScreen({super.key}); const ExplorePostScreen({super.key});
@override
State<ExploreScreen> createState() => _ExploreScreenState();
}
class _ExploreScreenState extends State<ExploreScreen> {
Post? _selectedPost;
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final screenWidth = MediaQuery.of(context).size.width;
final isLargeScreen = screenWidth >= 600;
return IndentScaffold( return IndentScaffold(
noSafeArea: true, noSafeArea: true,
fixedAppBarColor: isLargeScreen, fixedAppBarColor: SolianTheme.isLargeScreen(context),
appBarActions: const [NotificationButton()], appBarActions: const [NotificationButton()],
title: AppLocalizations.of(context)!.explore, title: AppLocalizations.of(context)!.explore,
child: isLargeScreen child: ExplorePostWidget(
? Row(
children: [
Flexible(
flex: 2,
child: ExploreScreenWidget(
onSelect: (item) {
setState(() => _selectedPost = item);
},
),
),
const VerticalDivider(thickness: 0.3, width: 0.3),
Flexible(
flex: 4,
child: _selectedPost == null
? const PageEmptyWidget()
: PostScreenWidget(
key: Key('p${_selectedPost!.id}'),
dataset: _selectedPost!.dataset,
alias: _selectedPost!.alias,
),
),
],
)
: ExploreScreenWidget(
onSelect: (item) { onSelect: (item) {
SolianRouter.router.pushNamed( SolianRouter.router.pushNamed(
'posts.screen', 'posts.screen',
@ -75,16 +40,16 @@ class _ExploreScreenState extends State<ExploreScreen> {
} }
} }
class ExploreScreenWidget extends StatefulWidget { class ExplorePostWidget extends StatefulWidget {
final Function(Post item) onSelect; final Function(Post item) onSelect;
const ExploreScreenWidget({super.key, required this.onSelect}); const ExplorePostWidget({super.key, required this.onSelect});
@override @override
State<ExploreScreenWidget> createState() => _ExploreScreenWidgetState(); State<ExplorePostWidget> createState() => _ExplorePostWidgetState();
} }
class _ExploreScreenWidgetState extends State<ExploreScreenWidget> { class _ExplorePostWidgetState extends State<ExplorePostWidget> {
final PagingController<int, Post> _pagingController = PagingController(firstPageKey: 0); final PagingController<int, Post> _pagingController = PagingController(firstPageKey: 0);
final http.Client _client = http.Client(); final http.Client _client = http.Client();

View File

@ -1,6 +1,7 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:infinite_scroll_pagination/infinite_scroll_pagination.dart'; import 'package:infinite_scroll_pagination/infinite_scroll_pagination.dart';
import 'package:solian/models/post.dart'; import 'package:solian/models/post.dart';
import 'package:solian/utils/theme.dart';
import 'package:solian/widgets/account/account_avatar.dart'; import 'package:solian/widgets/account/account_avatar.dart';
import 'package:solian/widgets/posts/comment_list.dart'; import 'package:solian/widgets/posts/comment_list.dart';
import 'package:solian/widgets/posts/content/article.dart'; import 'package:solian/widgets/posts/content/article.dart';
@ -87,16 +88,13 @@ class _PostItemState extends State<PostItem> {
Widget renderAttachments() { Widget renderAttachments() {
if (widget.item.modelType == 'article') return Container(); if (widget.item.modelType == 'article') return Container();
final screenWidth = MediaQuery.of(context).size.width;
final isLargeScreen = screenWidth >= 600;
if (widget.item.attachments != null && widget.item.attachments!.isNotEmpty) { if (widget.item.attachments != null && widget.item.attachments!.isNotEmpty) {
return Padding( return Padding(
padding: const EdgeInsets.only(top: 8), padding: const EdgeInsets.only(top: 8),
child: AttachmentList( child: AttachmentList(
items: widget.item.attachments!, items: widget.item.attachments!,
provider: 'interactive', provider: 'interactive',
noTag: isLargeScreen && widget.brief, noTag: SolianTheme.isLargeScreen(context) && widget.brief,
), ),
); );
} else { } else {