Feat: Passt App für kleinere Bildschirme an

This commit is contained in:
2026-01-05 17:22:08 +01:00
parent a535603924
commit 531e819c69
4 changed files with 207 additions and 101 deletions

View File

@@ -1,3 +1,5 @@
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:routemaster/routemaster.dart';
@@ -41,6 +43,8 @@ class _InputFields extends State<InputFields> {
final TextEditingController _amountMaxController = TextEditingController();
final TextEditingController _dateTimeController = TextEditingController();
static const double _filterBreakpoint = 600;
@override
void initState() {
super.initState();
@@ -83,81 +87,165 @@ class _InputFields extends State<InputFields> {
Widget build(final BuildContext context) {
final ThemeData theme = Theme.of(context);
return Row(
children: <Widget>[
Expanded(
child: TextField(
controller: _nameController,
decoration: const InputDecoration(
labelText: 'Name',
border: OutlineInputBorder(),
),
onChanged: (final String value) {
_updateUrl();
},
),
),
const SizedBox(width: 8),
Expanded(
child: TextField(
controller: _amountMinController,
decoration: const InputDecoration(
labelText: 'Min Betrag €',
border: OutlineInputBorder(),
),
keyboardType: const TextInputType.numberWithOptions(decimal: true),
onChanged: (final String value) {
_updateUrl();
},
),
),
const SizedBox(width: 8),
Expanded(
child: TextField(
controller: _amountMaxController,
decoration: const InputDecoration(
labelText: 'Max Betrag €',
border: OutlineInputBorder(),
),
keyboardType: const TextInputType.numberWithOptions(decimal: true),
onChanged: (final String value) {
_updateUrl();
},
),
),
const SizedBox(width: 8),
Expanded(
child: DateRangePicker(
controller: _dateTimeController,
onChanged: (final DateTimeRange? value) {
_updateUrl();
},
decoration: InputDecoration(
labelText: 'Zeitraum',
border: const OutlineInputBorder(),
suffixIcon: Icon(
Icons.calendar_month,
color: theme.colorScheme.onSurface,
),
),
),
),
const SizedBox(width: 8),
IconButton(
onPressed: () {
_nameController.text = '';
_amountMinController.text = '';
_amountMaxController.text = '';
_dateTimeController.text = '';
return LayoutBuilder(
builder: (final context, final constraints) {
if (constraints.maxWidth < _filterBreakpoint) {
return _buildFilterButton(context, theme);
}
_updateUrl();
},
icon: const Icon(Icons.clear),
),
],
return _buildInlineFilters(theme);
},
);
}
Widget _buildInlineFilters(final ThemeData theme) => Row(
children: <Widget>[
Expanded(
child: TextField(
controller: _nameController,
decoration: const InputDecoration(
labelText: 'Name',
border: OutlineInputBorder(),
),
onChanged: (_) => _updateUrl(),
),
),
const SizedBox(width: 8),
Expanded(
child: TextField(
controller: _amountMinController,
decoration: const InputDecoration(
labelText: 'Min Betrag €',
border: OutlineInputBorder(),
),
keyboardType: const TextInputType.numberWithOptions(decimal: true),
onChanged: (_) => _updateUrl(),
),
),
const SizedBox(width: 8),
Expanded(
child: TextField(
controller: _amountMaxController,
decoration: const InputDecoration(
labelText: 'Max Betrag €',
border: OutlineInputBorder(),
),
keyboardType: const TextInputType.numberWithOptions(decimal: true),
onChanged: (_) => _updateUrl(),
),
),
const SizedBox(width: 8),
Expanded(
child: DateRangePicker(
controller: _dateTimeController,
onChanged: (_) => _updateUrl(),
decoration: InputDecoration(
labelText: 'Zeitraum',
border: const OutlineInputBorder(),
suffixIcon: Icon(
Icons.calendar_month,
color: theme.colorScheme.onSurface,
),
),
),
),
const SizedBox(width: 8),
IconButton(onPressed: _clear, icon: const Icon(Icons.clear)),
],
);
Widget _buildFilterButton(
final BuildContext context,
final ThemeData theme,
) => Align(
alignment: Alignment.centerLeft,
child: ElevatedButton.icon(
icon: const Icon(Icons.filter_alt),
label: const Text('Filter'),
onPressed: () => _openFilterDialog(context),
),
);
void _openFilterDialog(final BuildContext context) {
unawaited(
showDialog(
context: context,
builder: (final context) => AlertDialog(
title: const Text('Filter'),
content: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
TextField(
controller: _nameController,
decoration: const InputDecoration(
labelText: 'Name',
border: OutlineInputBorder(),
),
),
const SizedBox(height: 12),
TextField(
controller: _amountMinController,
decoration: const InputDecoration(
labelText: 'Min Betrag €',
border: OutlineInputBorder(),
),
keyboardType: const TextInputType.numberWithOptions(
decimal: true,
),
),
const SizedBox(height: 12),
TextField(
controller: _amountMaxController,
decoration: const InputDecoration(
labelText: 'Max Betrag €',
border: OutlineInputBorder(),
),
keyboardType: const TextInputType.numberWithOptions(
decimal: true,
),
),
const SizedBox(height: 12),
DateRangePicker(
controller: _dateTimeController,
onChanged: (_) {},
decoration: const InputDecoration(
labelText: 'Zeitraum',
border: OutlineInputBorder(),
),
),
],
),
),
actions: [
TextButton(
onPressed: () {
_clear();
Navigator.of(context).pop();
},
child: const Text('Zurücksetzen'),
),
ElevatedButton(
onPressed: () {
_updateUrl();
Navigator.of(context).pop();
},
child: const Text('Anwenden'),
),
],
),
),
);
}
void _clear() {
_nameController.clear();
_amountMinController.clear();
_amountMaxController.clear();
_dateTimeController.clear();
_updateUrl();
}
void _updateUrl() {
final params = <String, String>{
if (_nameController.text != '') 'name': _nameController.text,