design: New design for login page

This commit is contained in:
krille-chan 2023-12-24 13:46:29 +01:00
commit 4a008d0c2d
No known key found for this signature in database
7 changed files with 240 additions and 260 deletions

View file

@ -2,10 +2,11 @@ import 'dart:math';
import 'package:flutter/material.dart';
import 'package:fluffychat/config/themes.dart';
class EmptyPage extends StatelessWidget {
final bool loading;
static const double _width = 300;
const EmptyPage({this.loading = false, super.key});
static const double _width = 128;
const EmptyPage({super.key});
@override
Widget build(BuildContext context) {
final width = min(MediaQuery.of(context).size.width, EmptyPage._width) / 2;
@ -14,31 +15,20 @@ class EmptyPage extends StatelessWidget {
appBar: AppBar(
automaticallyImplyLeading: false,
elevation: 0,
backgroundColor: Theme.of(context).scaffoldBackgroundColor,
backgroundColor: Colors.transparent,
),
extendBodyBehindAppBar: true,
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Center(
child: Hero(
tag: 'info-logo',
child: Image.asset(
'assets/favicon.png',
width: width,
height: width,
filterQuality: FilterQuality.medium,
),
),
),
if (loading)
Center(
child: SizedBox(
width: width,
child: const LinearProgressIndicator(),
),
),
],
body: Container(
decoration: BoxDecoration(
gradient: FluffyThemes.backgroundGradient(context, 128),
),
alignment: Alignment.center,
child: Image.asset(
'assets/favicon.png',
width: width,
height: width,
filterQuality: FilterQuality.medium,
),
),
);
}

View file

@ -37,9 +37,10 @@ class LoginScaffold extends StatelessWidget {
actions: appBar?.actions,
backgroundColor: isMobileMode ? null : Colors.transparent,
),
extendBodyBehindAppBar: true,
extendBody: true,
body: body,
backgroundColor: isMobileMode
? null
: Theme.of(context).colorScheme.background.withOpacity(0.9),
bottomNavigationBar: isMobileMode
? Material(
elevation: 4,
@ -52,8 +53,11 @@ class LoginScaffold extends StatelessWidget {
);
if (isMobileMode) return scaffold;
return Container(
decoration: BoxDecoration(
gradient: FluffyThemes.backgroundGradient(context, 255),
decoration: const BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover,
image: AssetImage('assets/login_wallpaper.png'),
),
),
child: Column(
children: [
@ -63,7 +67,7 @@ class LoginScaffold extends StatelessWidget {
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: Material(
color: Theme.of(context).scaffoldBackgroundColor,
color: Colors.transparent,
borderRadius: BorderRadius.circular(AppConfig.borderRadius),
clipBehavior: Clip.hardEdge,
elevation:
@ -72,34 +76,14 @@ class LoginScaffold extends StatelessWidget {
child: ConstrainedBox(
constraints: isMobileMode
? const BoxConstraints()
: const BoxConstraints(maxWidth: 960, maxHeight: 640),
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(
child: Image.asset(
'assets/login_wallpaper.png',
fit: BoxFit.cover,
),
),
Container(
width: 1,
color: Theme.of(context).dividerTheme.color,
),
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: scaffold,
),
),
],
),
: const BoxConstraints(maxWidth: 480, maxHeight: 720),
child: scaffold,
),
),
),
),
),
const _PrivacyButtons(mainAxisAlignment: MainAxisAlignment.end),
const _PrivacyButtons(mainAxisAlignment: MainAxisAlignment.center),
],
),
);
@ -112,6 +96,18 @@ class _PrivacyButtons extends StatelessWidget {
@override
Widget build(BuildContext context) {
final shadowTextStyle = FluffyThemes.isColumnMode(context)
? const TextStyle(
color: Colors.white,
shadows: [
Shadow(
offset: Offset(0.0, 0.0),
blurRadius: 3,
color: Colors.black,
),
],
)
: null;
return SizedBox(
height: 64,
child: Padding(
@ -121,11 +117,17 @@ class _PrivacyButtons extends StatelessWidget {
children: [
TextButton(
onPressed: () => PlatformInfos.showDialog(context),
child: Text(L10n.of(context)!.about),
child: Text(
L10n.of(context)!.about,
style: shadowTextStyle,
),
),
TextButton(
onPressed: () => launchUrlString(AppConfig.privacyUrl),
child: Text(L10n.of(context)!.privacy),
child: Text(
L10n.of(context)!.privacy,
style: shadowTextStyle,
),
),
],
),