centered login view and updated layout constraints

This commit is contained in:
2026-05-07 09:11:09 +02:00
parent e8f0c4383c
commit 517e515ac1
+75 -31
View File
@@ -46,7 +46,8 @@ class _LoginState extends State<Login> {
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 {
if (_loading) return;
@@ -97,10 +98,7 @@ class _LoginState extends State<Login> {
icon: Icon(Icons.error_outline, color: theme.colorScheme.error),
title: const Text('Fehlerdetails'),
content: SingleChildScrollView(
child: SelectableText(
details,
style: theme.textTheme.bodySmall,
),
child: SelectableText(details, style: theme.textTheme.bodySmall),
),
actions: [
TextButton.icon(
@@ -136,8 +134,12 @@ class _LoginState extends State<Login> {
child: LayoutBuilder(
builder: (context, constraints) => SingleChildScrollView(
padding: const EdgeInsets.symmetric(horizontal: 24),
child: Center(
child: ConstrainedBox(
constraints: BoxConstraints(minHeight: constraints.maxHeight),
constraints: BoxConstraints(
minHeight: constraints.maxHeight,
maxWidth: 420,
),
child: IntrinsicHeight(
child: Column(
children: [
@@ -170,9 +172,7 @@ class _LoginState extends State<Login> {
),
),
const SizedBox(height: 28),
ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 420),
child: Card(
Card(
elevation: 8,
shadowColor: Colors.black.withValues(alpha: 0.35),
shape: RoundedRectangleBorder(
@@ -206,12 +206,18 @@ class _LoginState extends State<Login> {
validator: _required,
autocorrect: false,
textInputAction: TextInputAction.next,
onFieldSubmitted: (_) => _passwordFocus.requestFocus(),
onFieldSubmitted: (_) =>
_passwordFocus.requestFocus(),
decoration: InputDecoration(
labelText: 'Nutzername',
prefixIcon: const Icon(Icons.person_outline),
prefixIcon: const Icon(
Icons.person_outline,
),
filled: true,
fillColor: theme.colorScheme.surfaceContainerHighest.withValues(alpha: 0.4),
fillColor: theme
.colorScheme
.surfaceContainerHighest
.withValues(alpha: 0.4),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: BorderSide.none,
@@ -222,7 +228,10 @@ class _LoginState extends State<Login> {
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: BorderSide(color: theme.colorScheme.primary, width: 1.5),
borderSide: BorderSide(
color: theme.colorScheme.primary,
width: 1.5,
),
),
),
),
@@ -243,7 +252,10 @@ class _LoginState extends State<Login> {
labelText: 'Passwort',
prefixIcon: const Icon(Icons.lock_outline),
filled: true,
fillColor: theme.colorScheme.surfaceContainerHighest.withValues(alpha: 0.4),
fillColor: theme
.colorScheme
.surfaceContainerHighest
.withValues(alpha: 0.4),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: BorderSide.none,
@@ -254,7 +266,10 @@ class _LoginState extends State<Login> {
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: BorderSide(color: theme.colorScheme.primary, width: 1.5),
borderSide: BorderSide(
color: theme.colorScheme.primary,
width: 1.5,
),
),
),
),
@@ -262,40 +277,69 @@ class _LoginState extends State<Login> {
duration: const Duration(milliseconds: 180),
curve: Curves.easeOut,
child: _errorMessage == null
? const SizedBox(height: 0, width: double.infinity)
? const SizedBox(
height: 0,
width: double.infinity,
)
: Padding(
padding: const EdgeInsets.only(top: 14),
padding: const EdgeInsets.only(
top: 14,
),
child: Material(
color: theme.colorScheme.errorContainer.withValues(alpha: 0.6),
borderRadius: BorderRadius.circular(12),
color: theme
.colorScheme
.errorContainer
.withValues(alpha: 0.6),
borderRadius: BorderRadius.circular(
12,
),
child: InkWell(
onTap: _errorDetails != null ? _showErrorDetails : null,
borderRadius: BorderRadius.circular(12),
onTap: _errorDetails != null
? _showErrorDetails
: null,
borderRadius:
BorderRadius.circular(12),
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 12, vertical: 10),
padding:
const EdgeInsets.symmetric(
horizontal: 12,
vertical: 10,
),
child: Row(
children: [
Icon(Icons.error_outline,
Icon(
Icons.error_outline,
size: 20,
color: theme.colorScheme.onErrorContainer),
color: theme
.colorScheme
.onErrorContainer,
),
const SizedBox(width: 10),
Expanded(
child: Text(
_errorMessage!,
style: TextStyle(
color: theme.colorScheme.onErrorContainer,
color: theme
.colorScheme
.onErrorContainer,
fontSize: 13,
height: 1.3,
),
),
),
if (_errorDetails != null) ...[
if (_errorDetails !=
null) ...[
const SizedBox(width: 8),
Icon(Icons.chevron_right,
Icon(
Icons.chevron_right,
size: 20,
color: theme.colorScheme.onErrorContainer
.withValues(alpha: 0.7)),
color: theme
.colorScheme
.onErrorContainer
.withValues(
alpha: 0.7,
),
),
],
],
),
@@ -335,7 +379,6 @@ class _LoginState extends State<Login> {
),
),
),
),
const SizedBox(height: 18),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 8),
@@ -369,6 +412,7 @@ class _LoginState extends State<Login> {
),
),
),
),
);
}
}