Skip to content

Commit

Permalink
Update layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@PlugFox
PlugFox committed Dec 19, 2023
1 parent 6cd3415 commit 636bace
Show file tree
Hide file tree
Showing 7 changed files with 455 additions and 286 deletions.
35 changes: 19 additions & 16 deletions example/lib/src/common/router/routes.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,27 +17,30 @@ import 'package:flutter/material.dart';
import 'package:octopus/octopus.dart';

enum Routes with OctopusRoute {
signin('signin'),
signup('signup'),
home('home'),
shop('shop'),
catalog('catalog'),
category('category'),
product('product'),
productImage('product-img-dialog'),
basket('basket'),
checkout('checkout'),
favorites('favorites'),
gallery('gallery'),
profile('profile'),
settingsDialog('settings-dialog'),
aboutAppDialog('about-app-dialog');
signin('signin', title: 'Sign-In'),
signup('signup', title: 'Sign-Up'),
home('home', title: 'Octopus'),
shop('shop', title: 'Shop'),
catalog('catalog', title: 'Catalog'),
category('category', title: 'Category'),
product('product', title: 'Product'),
productImage('product-img-dialog', title: 'Product Image'),
basket('basket', title: 'Basket'),
checkout('checkout', title: 'Checkout'),
favorites('favorites', title: 'Favorites'),
gallery('gallery', title: 'Gallery'),
profile('profile', title: 'Profile'),
settingsDialog('settings-dialog', title: 'Settings'),
aboutAppDialog('about-app-dialog', title: 'About Application');

const Routes(this.name);
const Routes(this.name, {this.title});

@override
final String name;

@override
final String? title;

@override
Widget builder(BuildContext context, OctopusNode node) => switch (this) {
Routes.signin => const SignInScreen(),
Expand Down
263 changes: 129 additions & 134 deletions example/lib/src/feature/authentication/widget/signin_screen.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,147 +39,142 @@ class _SignInScreenState extends State<SignInScreen>
bool _obscurePassword = true;

@override
Widget build(BuildContext context) => Title(
title: 'Sign-In',
color: Theme.of(context).colorScheme.primary,
child: Scaffold(
body: SafeArea(
child: Center(
child: LayoutBuilder(
builder: (context, constraints) => SingleChildScrollView(
padding: EdgeInsets.symmetric(
horizontal: math.max(16, (constraints.maxWidth - 620) / 2),
),
child: StateConsumer<AuthenticationState>(
controller: _authenticationController,
buildWhen: (previous, current) => previous != current,
builder: (context, state, _) => Column(
children: <Widget>[
SizedBox(
height: 50,
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
const SizedBox(width: 50),
Text(
'Sign-In',
maxLines: 1,
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.center,
style: Theme.of(context)
.textTheme
.headlineLarge
?.copyWith(height: 1),
),
const SizedBox(width: 2),
Align(
alignment: Alignment.bottomRight,
child: IconButton(
icon: const Icon(Icons.casino),
padding: EdgeInsets.zero,
constraints: const BoxConstraints.tightFor(
width: 48,
height: 48,
),
tooltip: 'Generate password',
onPressed: state.isIdling
? () {
if (_obscurePassword)
setState(
() => _obscurePassword = false,
);
generatePassword();
}
: null,
Widget build(BuildContext context) => Scaffold(
body: SafeArea(
child: Center(
child: LayoutBuilder(
builder: (context, constraints) => SingleChildScrollView(
padding: EdgeInsets.symmetric(
horizontal: math.max(16, (constraints.maxWidth - 620) / 2),
),
child: StateConsumer<AuthenticationState>(
controller: _authenticationController,
buildWhen: (previous, current) => previous != current,
builder: (context, state, _) => Column(
children: <Widget>[
SizedBox(
height: 50,
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
const SizedBox(width: 50),
Text(
'Sign-In',
maxLines: 1,
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.center,
style: Theme.of(context)
.textTheme
.headlineLarge
?.copyWith(height: 1),
),
const SizedBox(width: 2),
Align(
alignment: Alignment.bottomRight,
child: IconButton(
icon: const Icon(Icons.casino),
padding: EdgeInsets.zero,
constraints: const BoxConstraints.tightFor(
width: 48,
height: 48,
),
tooltip: 'Generate password',
onPressed: state.isIdling
? () {
if (_obscurePassword)
setState(
() => _obscurePassword = false,
);
generatePassword();
}
: null,
),
],
),
),
const SizedBox(height: 32),
TextField(
focusNode: _usernameFocusNode,
enabled: state.isIdling,
maxLines: 1,
minLines: 1,
controller: _usernameController,
autocorrect: false,
autofillHints: const <String>[
AutofillHints.username,
AutofillHints.email
),
],
keyboardType: TextInputType.emailAddress,
inputFormatters: _usernameFormatters,
decoration: InputDecoration(
labelText: 'Username',
hintText: 'Enter your username',
helperText: '',
helperMaxLines: 1,
errorText: _usernameError ?? state.error,
errorMaxLines: 1,
prefixIcon: const Icon(Icons.person),
),
),
const SizedBox(height: 8),
TextField(
focusNode: _passwordFocusNode,
enabled: state.isIdling,
maxLines: 1,
minLines: 1,
controller: _passwordController,
autocorrect: false,
obscureText: _obscurePassword,
maxLength: Config.passwordMaxLength,
autofillHints: const <String>[AutofillHints.password],
keyboardType: TextInputType.visiblePassword,
decoration: InputDecoration(
labelText: 'Password',
hintText: 'Enter your password',
helperText: '',
helperMaxLines: 1,
errorText: _passwordError ?? state.error,
errorMaxLines: 1,
prefixIcon: const Icon(Icons.lock),
suffixIcon: IconButton(
icon: Icon(_obscurePassword
? Icons.visibility
: Icons.visibility_off),
onPressed: () => setState(
() => _obscurePassword = !_obscurePassword),
),
),
),
const SizedBox(height: 32),
TextField(
focusNode: _usernameFocusNode,
enabled: state.isIdling,
maxLines: 1,
minLines: 1,
controller: _usernameController,
autocorrect: false,
autofillHints: const <String>[
AutofillHints.username,
AutofillHints.email
],
keyboardType: TextInputType.emailAddress,
inputFormatters: _usernameFormatters,
decoration: InputDecoration(
labelText: 'Username',
hintText: 'Enter your username',
helperText: '',
helperMaxLines: 1,
errorText: _usernameError ?? state.error,
errorMaxLines: 1,
prefixIcon: const Icon(Icons.person),
),
const SizedBox(height: 32),
SizedBox(
height: 48,
child: AnimatedBuilder(
animation: _formChangedNotifier,
builder: (context, _) {
final formFilled =
_usernameController.text.length > 3 &&
_passwordController.text.length >=
Config.passwordMinLength;
final signInCallback =
state.isIdling && formFilled
? () => signIn(context)
: null;
final signUpCallback =
state.isIdling ? () => signUp(context) : null;
final key = ValueKey<int>(
(signInCallback == null ? 0 : 1 << 1) |
(signUpCallback == null ? 0 : 1));
return _SignInScreen$Buttons(
signIn: signInCallback,
signUp: signUpCallback,
key: key,
);
},
),
const SizedBox(height: 8),
TextField(
focusNode: _passwordFocusNode,
enabled: state.isIdling,
maxLines: 1,
minLines: 1,
controller: _passwordController,
autocorrect: false,
obscureText: _obscurePassword,
maxLength: Config.passwordMaxLength,
autofillHints: const <String>[AutofillHints.password],
keyboardType: TextInputType.visiblePassword,
decoration: InputDecoration(
labelText: 'Password',
hintText: 'Enter your password',
helperText: '',
helperMaxLines: 1,
errorText: _passwordError ?? state.error,
errorMaxLines: 1,
prefixIcon: const Icon(Icons.lock),
suffixIcon: IconButton(
icon: Icon(_obscurePassword
? Icons.visibility
: Icons.visibility_off),
onPressed: () => setState(
() => _obscurePassword = !_obscurePassword),
),
),
],
),
),
const SizedBox(height: 32),
SizedBox(
height: 48,
child: AnimatedBuilder(
animation: _formChangedNotifier,
builder: (context, _) {
final formFilled =
_usernameController.text.length > 3 &&
_passwordController.text.length >=
Config.passwordMinLength;
final signInCallback = state.isIdling && formFilled
? () => signIn(context)
: null;
final signUpCallback =
state.isIdling ? () => signUp(context) : null;
final key = ValueKey<int>(
(signInCallback == null ? 0 : 1 << 1) |
(signUpCallback == null ? 0 : 1));
return _SignInScreen$Buttons(
signIn: signInCallback,
signUp: signUpCallback,
key: key,
);
},
),
),
],
),
),
),
Expand Down
Loading

0 comments on commit 636bace

Please sign in to comment.