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

@@ -20,6 +20,7 @@ class Dashboard extends StatelessWidget {
body: SafeArea(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 16, vertical: 24),
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
@@ -44,5 +45,6 @@ class Dashboard extends StatelessWidget {
),
),
),
),
);
}

View File

@@ -111,7 +111,12 @@ class DynamicDialog {
),
],
),
content: Column(
content: ConstrainedBox(
constraints: BoxConstraints(
maxHeight: MediaQuery.of(ctx).size.height * 0.7,
),
child: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
if (content != null) content!,
@@ -123,6 +128,8 @@ class DynamicDialog {
),
],
),
),
),
actions: actions
.map(
(final action) => TextButton(

View File

@@ -70,6 +70,7 @@ class _MonthlyBalanceChart extends State<MonthlyBalanceChart> {
final AsyncSnapshot<List<Map<String, dynamic>>> snapshot,
) {
final ThemeData theme = Theme.of(context);
final MediaQueryData mediaQuery = MediaQuery.of(context);
if (snapshot.hasData) {
final List<Map<String, dynamic>> monthlyBalances = snapshot.data!;
@@ -109,7 +110,15 @@ class _MonthlyBalanceChart extends State<MonthlyBalanceChart> {
final DateTime date = value['date'];
final DateFormat format = DateFormat('MMMM');
return format.format(date);
String month = format.format(date);
if (mediaQuery.size.width < 470) {
month = month.substring(0, 1);
} else if (mediaQuery.size.width < 920) {
month = month.substring(0, 3);
}
return month;
}).toList();
if (value.toInt() >= 0 &&

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,7 +87,18 @@ class _InputFields extends State<InputFields> {
Widget build(final BuildContext context) {
final ThemeData theme = Theme.of(context);
return Row(
return LayoutBuilder(
builder: (final context, final constraints) {
if (constraints.maxWidth < _filterBreakpoint) {
return _buildFilterButton(context, theme);
}
return _buildInlineFilters(theme);
},
);
}
Widget _buildInlineFilters(final ThemeData theme) => Row(
children: <Widget>[
Expanded(
child: TextField(
@@ -92,9 +107,7 @@ class _InputFields extends State<InputFields> {
labelText: 'Name',
border: OutlineInputBorder(),
),
onChanged: (final String value) {
_updateUrl();
},
onChanged: (_) => _updateUrl(),
),
),
const SizedBox(width: 8),
@@ -106,9 +119,7 @@ class _InputFields extends State<InputFields> {
border: OutlineInputBorder(),
),
keyboardType: const TextInputType.numberWithOptions(decimal: true),
onChanged: (final String value) {
_updateUrl();
},
onChanged: (_) => _updateUrl(),
),
),
const SizedBox(width: 8),
@@ -120,18 +131,14 @@ class _InputFields extends State<InputFields> {
border: OutlineInputBorder(),
),
keyboardType: const TextInputType.numberWithOptions(decimal: true),
onChanged: (final String value) {
_updateUrl();
},
onChanged: (_) => _updateUrl(),
),
),
const SizedBox(width: 8),
Expanded(
child: DateRangePicker(
controller: _dateTimeController,
onChanged: (final DateTimeRange? value) {
_updateUrl();
},
onChanged: (_) => _updateUrl(),
decoration: InputDecoration(
labelText: 'Zeitraum',
border: const OutlineInputBorder(),
@@ -143,19 +150,100 @@ class _InputFields extends State<InputFields> {
),
),
const SizedBox(width: 8),
IconButton(
onPressed: () {
_nameController.text = '';
_amountMinController.text = '';
_amountMaxController.text = '';
_dateTimeController.text = '';
_updateUrl();
},
icon: const Icon(Icons.clear),
),
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() {