💄 Optimize designs and bug fixes with background image

This commit is contained in:
LittleSheep 2024-10-06 22:38:31 +08:00
parent c5258cb9ca
commit 2e9c4d166e
5 changed files with 320 additions and 304 deletions

View File

@ -108,7 +108,7 @@ class _AccountScreenState extends State<AccountScreen> {
child: ListView( child: ListView(
children: [ children: [
if (auth.userProfile.value != null) if (auth.userProfile.value != null)
const AccountHeading().paddingOnly(bottom: 8, top: 8), const AccountHeading().paddingOnly(bottom: 8, top: 16),
...(actionItems.map( ...(actionItems.map(
(x) => ListTile( (x) => ListTile(
contentPadding: const EdgeInsets.symmetric(horizontal: 34), contentPadding: const EdgeInsets.symmetric(horizontal: 34),

View File

@ -220,6 +220,8 @@ class _SignInScreenState extends State<SignInScreen> {
return RootContainer( return RootContainer(
child: CenteredContainer( child: CenteredContainer(
maxWidth: 360, maxWidth: 360,
child: Theme(
data: Theme.of(context).copyWith(canvasColor: Colors.transparent),
child: PageTransitionSwitcher( child: PageTransitionSwitcher(
transitionBuilder: ( transitionBuilder: (
Widget child, Widget child,
@ -241,9 +243,10 @@ class _SignInScreenState extends State<SignInScreen> {
Align( Align(
alignment: Alignment.centerLeft, alignment: Alignment.centerLeft,
child: ClipRRect( child: ClipRRect(
borderRadius: const BorderRadius.all(Radius.circular(8)), borderRadius:
child: const BorderRadius.all(Radius.circular(8)),
Image.asset('assets/logo.png', width: 64, height: 64), child: Image.asset('assets/logo.png',
width: 64, height: 64),
).paddingOnly(bottom: 8, left: 4), ).paddingOnly(bottom: 8, left: 4),
), ),
Text( Text(
@ -269,7 +272,8 @@ class _SignInScreenState extends State<SignInScreen> {
Icons.question_mark, Icons.question_mark,
), ),
title: Text( title: Text(
_factorLabelMap[x.type]?.$1 ?? 'unknown'.tr, _factorLabelMap[x.type]?.$1 ??
'unknown'.tr,
), ),
enabled: !_currentTicket!.factorTrail enabled: !_currentTicket!.factorTrail
.contains(x.id), .contains(x.id),
@ -299,8 +303,8 @@ class _SignInScreenState extends State<SignInScreen> {
onPressed: (_isBusy || _period > 1) onPressed: (_isBusy || _period > 1)
? null ? null
: () => _previousStep(), : () => _previousStep(),
style: style: TextButton.styleFrom(
TextButton.styleFrom(foregroundColor: Colors.grey), foregroundColor: Colors.grey),
child: Row( child: Row(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: [ children: [
@ -331,9 +335,10 @@ class _SignInScreenState extends State<SignInScreen> {
Align( Align(
alignment: Alignment.centerLeft, alignment: Alignment.centerLeft,
child: ClipRRect( child: ClipRRect(
borderRadius: const BorderRadius.all(Radius.circular(8)), borderRadius:
child: const BorderRadius.all(Radius.circular(8)),
Image.asset('assets/logo.png', width: 64, height: 64), child: Image.asset('assets/logo.png',
width: 64, height: 64),
).paddingOnly(bottom: 8, left: 4), ).paddingOnly(bottom: 8, left: 4),
), ),
Text( Text(
@ -367,7 +372,8 @@ class _SignInScreenState extends State<SignInScreen> {
), ),
onTapOutside: (_) => onTapOutside: (_) =>
FocusManager.instance.primaryFocus?.unfocus(), FocusManager.instance.primaryFocus?.unfocus(),
onSubmitted: _isBusy ? null : (_) => _performCheckTicket(), onSubmitted:
_isBusy ? null : (_) => _performCheckTicket(),
), ),
const Gap(12), const Gap(12),
Row( Row(
@ -375,8 +381,8 @@ class _SignInScreenState extends State<SignInScreen> {
children: [ children: [
TextButton( TextButton(
onPressed: _isBusy ? null : () => _previousStep(), onPressed: _isBusy ? null : () => _previousStep(),
style: style: TextButton.styleFrom(
TextButton.styleFrom(foregroundColor: Colors.grey), foregroundColor: Colors.grey),
child: Row( child: Row(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: [ children: [
@ -386,7 +392,8 @@ class _SignInScreenState extends State<SignInScreen> {
), ),
), ),
TextButton( TextButton(
onPressed: _isBusy ? null : () => _performCheckTicket(), onPressed:
_isBusy ? null : () => _performCheckTicket(),
child: Row( child: Row(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: [ children: [
@ -406,9 +413,10 @@ class _SignInScreenState extends State<SignInScreen> {
Align( Align(
alignment: Alignment.centerLeft, alignment: Alignment.centerLeft,
child: ClipRRect( child: ClipRRect(
borderRadius: const BorderRadius.all(Radius.circular(8)), borderRadius:
child: const BorderRadius.all(Radius.circular(8)),
Image.asset('assets/logo.png', width: 64, height: 64), child: Image.asset('assets/logo.png',
width: 64, height: 64),
).paddingOnly(bottom: 8, left: 4), ).paddingOnly(bottom: 8, left: 4),
), ),
Text( Text(
@ -440,8 +448,8 @@ class _SignInScreenState extends State<SignInScreen> {
TextButton( TextButton(
onPressed: onPressed:
_isBusy ? null : () => _requestResetPassword(), _isBusy ? null : () => _requestResetPassword(),
style: style: TextButton.styleFrom(
TextButton.styleFrom(foregroundColor: Colors.grey), foregroundColor: Colors.grey),
child: Text('forgotPassword'.tr), child: Text('forgotPassword'.tr),
), ),
TextButton( TextButton(
@ -467,8 +475,10 @@ class _SignInScreenState extends State<SignInScreen> {
Text( Text(
'termAcceptNextWithAgree'.tr, 'termAcceptNextWithAgree'.tr,
textAlign: TextAlign.end, textAlign: TextAlign.end,
style: style: Theme.of(context)
Theme.of(context).textTheme.bodySmall!.copyWith( .textTheme
.bodySmall!
.copyWith(
color: Theme.of(context) color: Theme.of(context)
.colorScheme .colorScheme
.onSurface .onSurface
@ -499,6 +509,7 @@ class _SignInScreenState extends State<SignInScreen> {
), ),
}, },
), ),
),
).paddingAll(24), ).paddingAll(24),
); );
} }

View File

@ -147,7 +147,7 @@ class _DashboardScreenState extends State<DashboardScreen> {
), ),
Text(DateFormat('yyyy/MM/dd').format(DateTime.now().toUtc())), Text(DateFormat('yyyy/MM/dd').format(DateTime.now().toUtc())),
], ],
).paddingOnly(top: 8, left: 18, right: 18, bottom: 12), ).paddingOnly(top: 16, left: 18, right: 18, bottom: 12),
Card( Card(
child: Column( child: Column(
children: [ children: [

View File

@ -99,6 +99,7 @@ class _RealmListScreenState extends State<RealmListScreen> {
child: RefreshIndicator( child: RefreshIndicator(
onRefresh: () => _getRealms(), onRefresh: () => _getRealms(),
child: ListView.builder( child: ListView.builder(
padding: const EdgeInsets.symmetric(vertical: 16),
itemCount: _realms.length, itemCount: _realms.length,
itemBuilder: (context, index) { itemBuilder: (context, index) {
final element = _realms[index]; final element = _realms[index];

View File

@ -27,7 +27,9 @@ class _AppNavigationRailState extends State<AppNavigationRail> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return NavigationRail( return Material(
color: Theme.of(context).colorScheme.surface,
child: NavigationRail(
selectedIndex: _currentIndex, selectedIndex: _currentIndex,
labelType: NavigationRailLabelType.selected, labelType: NavigationRailLabelType.selected,
groupAlignment: -1, groupAlignment: -1,
@ -48,7 +50,8 @@ class _AppNavigationRailState extends State<AppNavigationRail> {
tooltip: AppNavigation.destinations.last.label, tooltip: AppNavigation.destinations.last.label,
onPressed: () { onPressed: () {
setState(() => _currentIndex = null); setState(() => _currentIndex = null);
AppRouter.instance.goNamed(AppNavigation.destinations.last.page); AppRouter.instance
.goNamed(AppNavigation.destinations.last.page);
}, },
), ),
), ),
@ -60,6 +63,7 @@ class _AppNavigationRailState extends State<AppNavigationRail> {
).paddingOnly( ).paddingOnly(
top: max(16, MediaQuery.of(context).padding.top), top: max(16, MediaQuery.of(context).padding.top),
bottom: max(16, MediaQuery.of(context).padding.bottom), bottom: max(16, MediaQuery.of(context).padding.bottom),
),
); );
} }
} }