MarianumMobile/Client
3
1
Fork 0
Code Issues 23 Pull Requests 2 Actions Packages Projects 1 Releases Wiki Activity

centered login view and updated layout constraints

Browse Source
This commit is contained in:
Elias Müller
2026-05-07 09:11:09 +02:00
parent e8f0c4383c
commit 517e515ac1
1 changed files with 196 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/view/login/login.dart
+196 -152
View File
@@ -46,7 +46,8 @@ class _LoginState extends State<Login> {
super.dispose(); super.dispose();
} }
String? _required(String? value) => (value ?? '').trim().isEmpty ? 'Eingabe erforderlich' : null; String? _required(String? value) =>
(value ?? '').trim().isEmpty ? 'Eingabe erforderlich' : null;
Future<void> _submit() async { Future<void> _submit() async {
if (_loading) return; if (_loading) return;
@@ -97,10 +98,7 @@ class _LoginState extends State<Login> {
icon: Icon(Icons.error_outline, color: theme.colorScheme.error), icon: Icon(Icons.error_outline, color: theme.colorScheme.error),
title: const Text('Fehlerdetails'), title: const Text('Fehlerdetails'),
content: SingleChildScrollView( content: SingleChildScrollView(
child: SelectableText( child: SelectableText(details, style: theme.textTheme.bodySmall),
details,
style: theme.textTheme.bodySmall,
),
), ),
actions: [ actions: [
TextButton.icon( TextButton.icon(
@@ -133,11 +131,15 @@ class _LoginState extends State<Login> {
return Scaffold( return Scaffold(
backgroundColor: _marianumRed, backgroundColor: _marianumRed,
body: SafeArea( body: SafeArea(
child: LayoutBuilder( child: LayoutBuilder(
builder: (context, constraints) => SingleChildScrollView( builder: (context, constraints) => SingleChildScrollView(
padding: const EdgeInsets.symmetric(horizontal: 24), padding: const EdgeInsets.symmetric(horizontal: 24),
child: Center(
child: ConstrainedBox( child: ConstrainedBox(
constraints: BoxConstraints(minHeight: constraints.maxHeight), constraints: BoxConstraints(
minHeight: constraints.maxHeight,
maxWidth: 420,
),
child: IntrinsicHeight( child: IntrinsicHeight(
child: Column( child: Column(
children: [ children: [
@@ -170,168 +172,209 @@ class _LoginState extends State<Login> {
), ),
), ),
const SizedBox(height: 28), const SizedBox(height: 28),
ConstrainedBox( Card(
constraints: const BoxConstraints(maxWidth: 420), elevation: 8,
child: Card( shadowColor: Colors.black.withValues(alpha: 0.35),
elevation: 8, shape: RoundedRectangleBorder(
shadowColor: Colors.black.withValues(alpha: 0.35), borderRadius: BorderRadius.circular(20),
shape: RoundedRectangleBorder( ),
borderRadius: BorderRadius.circular(20), color: theme.colorScheme.surface,
), child: Padding(
color: theme.colorScheme.surface, padding: const EdgeInsets.fromLTRB(24, 24, 24, 20),
child: Padding( child: Form(
padding: const EdgeInsets.fromLTRB(24, 24, 24, 20), key: _formKey,
child: Form( child: Column(
key: _formKey, crossAxisAlignment: CrossAxisAlignment.stretch,
child: Column( children: [
crossAxisAlignment: CrossAxisAlignment.stretch, Text(
children: [ 'Anmelden',
Text( style: theme.textTheme.titleLarge?.copyWith(
'Anmelden', fontWeight: FontWeight.w600,
style: theme.textTheme.titleLarge?.copyWith(
fontWeight: FontWeight.w600,
),
), ),
const SizedBox(height: 6), ),
Text( const SizedBox(height: 6),
'Melde dich mit deinen Marianum-Zugangsdaten an.', Text(
style: theme.textTheme.bodySmall?.copyWith( 'Melde dich mit deinen Marianum-Zugangsdaten an.',
color: theme.colorScheme.onSurfaceVariant, style: theme.textTheme.bodySmall?.copyWith(
), color: theme.colorScheme.onSurfaceVariant,
), ),
const SizedBox(height: 20), ),
TextFormField( const SizedBox(height: 20),
controller: _usernameController, TextFormField(
enabled: !_loading, controller: _usernameController,
validator: _required, enabled: !_loading,
autocorrect: false, validator: _required,
textInputAction: TextInputAction.next, autocorrect: false,
onFieldSubmitted: (_) => _passwordFocus.requestFocus(), textInputAction: TextInputAction.next,
decoration: InputDecoration( onFieldSubmitted: (_) =>
labelText: 'Nutzername', _passwordFocus.requestFocus(),
prefixIcon: const Icon(Icons.person_outline), decoration: InputDecoration(
filled: true, labelText: 'Nutzername',
fillColor: theme.colorScheme.surfaceContainerHighest.withValues(alpha: 0.4), prefixIcon: const Icon(
border: OutlineInputBorder( Icons.person_outline,
borderRadius: BorderRadius.circular(12), ),
borderSide: BorderSide.none, filled: true,
), fillColor: theme
enabledBorder: OutlineInputBorder( .colorScheme
borderRadius: BorderRadius.circular(12), .surfaceContainerHighest
borderSide: BorderSide.none, .withValues(alpha: 0.4),
), border: OutlineInputBorder(
focusedBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(12),
borderRadius: BorderRadius.circular(12), borderSide: BorderSide.none,
borderSide: BorderSide(color: theme.colorScheme.primary, width: 1.5), ),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: BorderSide.none,
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: BorderSide(
color: theme.colorScheme.primary,
width: 1.5,
), ),
), ),
), ),
const SizedBox(height: 12), ),
TextFormField( const SizedBox(height: 12),
controller: _passwordController, TextFormField(
focusNode: _passwordFocus, controller: _passwordController,
enabled: !_loading, focusNode: _passwordFocus,
validator: _required, enabled: !_loading,
obscureText: true, validator: _required,
obscuringCharacter: '•', obscureText: true,
autocorrect: false, obscuringCharacter: '•',
enableSuggestions: false, autocorrect: false,
keyboardType: TextInputType.visiblePassword, enableSuggestions: false,
textInputAction: TextInputAction.done, keyboardType: TextInputType.visiblePassword,
onFieldSubmitted: (_) => _submit(), textInputAction: TextInputAction.done,
decoration: InputDecoration( onFieldSubmitted: (_) => _submit(),
labelText: 'Passwort', decoration: InputDecoration(
prefixIcon: const Icon(Icons.lock_outline), labelText: 'Passwort',
filled: true, prefixIcon: const Icon(Icons.lock_outline),
fillColor: theme.colorScheme.surfaceContainerHighest.withValues(alpha: 0.4), filled: true,
border: OutlineInputBorder( fillColor: theme
borderRadius: BorderRadius.circular(12), .colorScheme
borderSide: BorderSide.none, .surfaceContainerHighest
), .withValues(alpha: 0.4),
enabledBorder: OutlineInputBorder( border: OutlineInputBorder(
borderRadius: BorderRadius.circular(12), borderRadius: BorderRadius.circular(12),
borderSide: BorderSide.none, borderSide: BorderSide.none,
), ),
focusedBorder: OutlineInputBorder( enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(12), borderRadius: BorderRadius.circular(12),
borderSide: BorderSide(color: theme.colorScheme.primary, width: 1.5), borderSide: BorderSide.none,
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: BorderSide(
color: theme.colorScheme.primary,
width: 1.5,
), ),
), ),
), ),
AnimatedSize( ),
duration: const Duration(milliseconds: 180), AnimatedSize(
curve: Curves.easeOut, duration: const Duration(milliseconds: 180),
child: _errorMessage == null curve: Curves.easeOut,
? const SizedBox(height: 0, width: double.infinity) child: _errorMessage == null
: Padding( ? const SizedBox(
padding: const EdgeInsets.only(top: 14), height: 0,
child: Material( width: double.infinity,
color: theme.colorScheme.errorContainer.withValues(alpha: 0.6), )
borderRadius: BorderRadius.circular(12), : Padding(
child: InkWell( padding: const EdgeInsets.only(
onTap: _errorDetails != null ? _showErrorDetails : null, top: 14,
borderRadius: BorderRadius.circular(12), ),
child: Padding( child: Material(
padding: const EdgeInsets.symmetric( color: theme
horizontal: 12, vertical: 10), .colorScheme
child: Row( .errorContainer
children: [ .withValues(alpha: 0.6),
Icon(Icons.error_outline, borderRadius: BorderRadius.circular(
size: 20, 12,
color: theme.colorScheme.onErrorContainer), ),
const SizedBox(width: 10), child: InkWell(
Expanded( onTap: _errorDetails != null
child: Text( ? _showErrorDetails
_errorMessage!, : null,
style: TextStyle( borderRadius:
color: theme.colorScheme.onErrorContainer, BorderRadius.circular(12),
fontSize: 13, child: Padding(
height: 1.3, padding:
), const EdgeInsets.symmetric(
horizontal: 12,
vertical: 10,
),
child: Row(
children: [
Icon(
Icons.error_outline,
size: 20,
color: theme
.colorScheme
.onErrorContainer,
),
const SizedBox(width: 10),
Expanded(
child: Text(
_errorMessage!,
style: TextStyle(
color: theme
.colorScheme
.onErrorContainer,
fontSize: 13,
height: 1.3,
), ),
), ),
if (_errorDetails != null) ...[ ),
const SizedBox(width: 8), if (_errorDetails !=
Icon(Icons.chevron_right, null) ...[
size: 20, const SizedBox(width: 8),
color: theme.colorScheme.onErrorContainer Icon(
.withValues(alpha: 0.7)), Icons.chevron_right,
], size: 20,
color: theme
.colorScheme
.onErrorContainer
.withValues(
alpha: 0.7,
),
),
], ],
), ],
), ),
), ),
), ),
), ),
),
const SizedBox(height: 20),
SizedBox(
height: 50,
child: FilledButton(
onPressed: _loading ? null : _submit,
style: FilledButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
textStyle: const TextStyle(
fontSize: 15,
fontWeight: FontWeight.w600,
), ),
),
const SizedBox(height: 20),
SizedBox(
height: 50,
child: FilledButton(
onPressed: _loading ? null : _submit,
style: FilledButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
textStyle: const TextStyle(
fontSize: 15,
fontWeight: FontWeight.w600,
), ),
child: _loading
? const SizedBox(
height: 22,
width: 22,
child: CircularProgressIndicator(
strokeWidth: 2.5,
color: Colors.white,
),
)
: const Text('Anmelden'),
), ),
child: _loading
? const SizedBox(
height: 22,
width: 22,
child: CircularProgressIndicator(
strokeWidth: 2.5,
color: Colors.white,
),
)
: const Text('Anmelden'),
), ),
], ),
), ],
), ),
), ),
), ),
@@ -368,6 +411,7 @@ class _LoginState extends State<Login> {
), ),
), ),
), ),
),
), ),
); );
} }