feat: New onboarding design
This commit is contained in:
parent
a15b510c78
commit
87afa8ac3d
18 changed files with 862 additions and 699 deletions
45
lib/widgets/layouts/login_scaffold.dart
Normal file
45
lib/widgets/layouts/login_scaffold.dart
Normal 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,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -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)),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -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();
|
||||
}
|
||||
},
|
||||
),
|
||||
),
|
||||
),
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue