feat: New onboarding design

This commit is contained in:
Christian Pauly 2022-04-15 11:42:59 +02:00
commit 87afa8ac3d
18 changed files with 862 additions and 699 deletions

View file

@ -0,0 +1,45 @@
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
class LoginScaffold extends StatelessWidget {
final Widget body;
final AppBar? appBar;
const LoginScaffold({
Key? key,
required this.body,
this.appBar,
}) : super(key: key);
@override
Widget build(BuildContext context) {
SystemChrome.setSystemUIOverlayStyle(
const SystemUiOverlayStyle(
statusBarIconBrightness: Brightness.light,
statusBarColor: Colors.transparent,
systemNavigationBarContrastEnforced: false,
systemNavigationBarColor: Colors.transparent,
systemNavigationBarIconBrightness: Brightness.light,
),
);
return Scaffold(
appBar: appBar,
extendBodyBehindAppBar: true,
body: Container(
decoration: const BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover,
image: AssetImage(
'assets/login_wallpaper.png',
),
),
),
alignment: Alignment.center,
child: ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 480),
child: body,
),
),
);
}
}

View file

@ -1,48 +0,0 @@
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:fluffychat/config/themes.dart';
import 'package:fluffychat/widgets/matrix.dart';
class OnePageCard extends StatelessWidget {
final Widget child;
/// This will cause the "isLogged()" check to be skipped and force a
/// OnePageCard without login wallpaper. This can be used in situations where
/// "Matrix.of(context) is not yet available, e.g. in the LockScreen widget.
final bool forceBackgroundless;
const OnePageCard(
{Key? key, required this.child, this.forceBackgroundless = false})
: super(key: key);
static const int alpha = 12;
static num breakpoint = FluffyThemes.columnWidth * 2;
@override
Widget build(BuildContext context) {
final horizontalPadding =
max<double>((MediaQuery.of(context).size.width - 600) / 2, 24);
return MediaQuery.of(context).size.width <= breakpoint ||
forceBackgroundless ||
Matrix.of(context).client.isLogged()
? child
: Container(
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/login_wallpaper.jpg'),
fit: BoxFit.cover,
),
),
child: Padding(
padding: EdgeInsets.only(
top: 16,
left: horizontalPadding,
right: horizontalPadding,
bottom: max((MediaQuery.of(context).size.height - 600) / 2, 24),
),
child: SafeArea(child: Card(elevation: 16, child: child)),
),
);
}
}

View file

@ -9,7 +9,7 @@ import 'package:shared_preferences/shared_preferences.dart';
import 'package:fluffychat/config/app_config.dart';
import 'package:fluffychat/config/setting_keys.dart';
import 'package:fluffychat/config/themes.dart';
import 'layouts/one_page_card.dart';
import 'layouts/login_scaffold.dart';
class LockScreen extends StatefulWidget {
const LockScreen({Key? key}) : super(key: key);
@ -30,62 +30,58 @@ class _LockScreenState extends State<LockScreen> {
localizationsDelegates: L10n.localizationsDelegates,
supportedLocales: L10n.supportedLocales,
home: Builder(
builder: (context) => OnePageCard(
forceBackgroundless: true,
child: Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false,
elevation: 0,
centerTitle: true,
title: Text(L10n.of(context)!.pleaseEnterYourPin),
backgroundColor: Colors.transparent,
builder: (context) => LoginScaffold(
appBar: AppBar(
automaticallyImplyLeading: false,
elevation: 0,
centerTitle: true,
title: Text(L10n.of(context)!.pleaseEnterYourPin),
backgroundColor: Colors.transparent,
),
body: Container(
decoration: BoxDecoration(
color: Theme.of(context).backgroundColor,
gradient: LinearGradient(
begin: Alignment.topRight,
end: Alignment.bottomLeft,
stops: const [
0.1,
0.4,
0.6,
0.9,
],
colors: [
Theme.of(context).secondaryHeaderColor.withAlpha(16),
Theme.of(context).primaryColor.withAlpha(16),
Theme.of(context).colorScheme.secondary.withAlpha(16),
Theme.of(context).backgroundColor.withAlpha(16),
],
),
),
extendBodyBehindAppBar: true,
body: Container(
decoration: BoxDecoration(
color: Theme.of(context).backgroundColor,
gradient: LinearGradient(
begin: Alignment.topRight,
end: Alignment.bottomLeft,
stops: const [
0.1,
0.4,
0.6,
0.9,
],
colors: [
Theme.of(context).secondaryHeaderColor.withAlpha(16),
Theme.of(context).primaryColor.withAlpha(16),
Theme.of(context).colorScheme.secondary.withAlpha(16),
Theme.of(context).backgroundColor.withAlpha(16),
],
),
),
alignment: Alignment.center,
child: PinCodeTextField(
autofocus: true,
controller: _textEditingController,
focusNode: _focusNode,
pinBoxRadius: AppConfig.borderRadius,
pinTextStyle: const TextStyle(fontSize: 32),
hideCharacter: true,
hasError: _wrongInput,
onDone: (String input) async {
if (input ==
await ([TargetPlatform.linux]
.contains(Theme.of(context).platform)
? SharedPreferences.getInstance().then((prefs) =>
prefs.getString(SettingKeys.appLockKey))
: const FlutterSecureStorage()
.read(key: SettingKeys.appLockKey))) {
AppLock.of(context)!.didUnlock();
} else {
_textEditingController.clear();
setState(() => _wrongInput = true);
_focusNode.requestFocus();
}
},
),
alignment: Alignment.center,
child: PinCodeTextField(
autofocus: true,
controller: _textEditingController,
focusNode: _focusNode,
pinBoxRadius: AppConfig.borderRadius,
pinTextStyle: const TextStyle(fontSize: 32),
hideCharacter: true,
hasError: _wrongInput,
onDone: (String input) async {
if (input ==
await ([TargetPlatform.linux]
.contains(Theme.of(context).platform)
? SharedPreferences.getInstance().then(
(prefs) => prefs.getString(SettingKeys.appLockKey))
: const FlutterSecureStorage()
.read(key: SettingKeys.appLockKey))) {
AppLock.of(context)!.didUnlock();
} else {
_textEditingController.clear();
setState(() => _wrongInput = true);
_focusNode.requestFocus();
}
},
),
),
),

View file

@ -12,6 +12,7 @@ import 'package:flutter_app_lock/flutter_app_lock.dart';
import 'package:flutter_gen/gen_l10n/l10n.dart';
import 'package:flutter_secure_storage/flutter_secure_storage.dart';
import 'package:http/http.dart' as http;
import 'package:image_picker/image_picker.dart';
import 'package:matrix/encryption.dart';
import 'package:matrix/matrix.dart';
import 'package:provider/provider.dart';
@ -71,6 +72,11 @@ class MatrixState extends State<Matrix> with WidgetsBindingObserver {
Store store = Store();
late BuildContext navigatorContext;
HomeserverSummary? loginHomeserverSummary;
XFile? loginAvatar;
String? loginUsername;
bool? loginRegistrationSupported;
BackgroundPush? _backgroundPush;
Client get client {