gitea/ingtrakapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 6 Wiki Activity

widgets looking very ok

Browse Source
This commit is contained in:
davmar
2026-09-10 18:56:50 +02:00
parent 55a13ee650
commit 4dde907f52
1 changed files with 259 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/screens/overview_screen.dart
+186 -66
View File
@@ -332,7 +332,7 @@ class _OverviewScreenState extends State<OverviewScreen> {
return ListView(
physics: const AlwaysScrollableScrollPhysics(),
padding: const EdgeInsets.fromLTRB(0, 8, 0, 32),
padding: const EdgeInsets.fromLTRB(0, 4, 0, 24),
children: [
if (bank.error != null) ...[
Text(
@@ -341,7 +341,7 @@ class _OverviewScreenState extends State<OverviewScreen> {
color: theme.colorScheme.error,
),
),
const SizedBox(height: 12),
const SizedBox(height: 8),
],
Row(
children: [
@@ -355,23 +355,33 @@ class _OverviewScreenState extends State<OverviewScreen> {
),
TextButton(
onPressed: _openFavouritesManager,
style: TextButton.styleFrom(
visualDensity: VisualDensity.compact,
tapTargetSize: MaterialTapTargetSize.shrinkWrap,
padding: const EdgeInsets.symmetric(horizontal: 8),
),
child: const Text('Manage'),
),
TextButton.icon(
onPressed: () => setState(() => _showFavouritesView = false),
icon: const Icon(Icons.insights_outlined, size: 18),
style: TextButton.styleFrom(
visualDensity: VisualDensity.compact,
tapTargetSize: MaterialTapTargetSize.shrinkWrap,
padding: const EdgeInsets.symmetric(horizontal: 8),
),
icon: const Icon(Icons.open_in_new, size: 16),
label: const Text('Full overview'),
),
],
),
const SizedBox(height: 4),
if (displayed.isEmpty) ...[
const SizedBox(height: 8),
Text(
'All favourites with Display checked appear here. '
'Use Full overview to set a filter, then ★ → Save current filter.',
style: theme.textTheme.labelMedium,
),
if (displayed.isEmpty) ...[
const SizedBox(height: 24),
const SizedBox(height: 16),
Text(
'No displayed favourites yet. Tap Manage to enable Display, '
'or save a new filter from Full overview.',
@@ -380,9 +390,9 @@ class _OverviewScreenState extends State<OverviewScreen> {
),
),
] else ...[
const SizedBox(height: 12),
const SizedBox(height: 8),
for (var i = 0; i < displayed.length; i++) ...[
if (i > 0) const SizedBox(height: 14),
if (i > 0) const SizedBox(height: 10),
_favouriteChartCard(
context: context,
favourite: displayed[i],
@@ -1176,10 +1186,13 @@ class _ChartCard extends StatelessWidget {
final VoidCallback? onEdit;
static const _compactSegmentStyle = ButtonStyle(
visualDensity: VisualDensity(horizontal: -4, vertical: -3),
visualDensity: VisualDensity(horizontal: -4, vertical: -4),
tapTargetSize: MaterialTapTargetSize.shrinkWrap,
padding: WidgetStatePropertyAll(EdgeInsets.symmetric(horizontal: 8)),
minimumSize: WidgetStatePropertyAll(Size(0, 32)),
padding: WidgetStatePropertyAll(EdgeInsets.symmetric(horizontal: 6)),
minimumSize: WidgetStatePropertyAll(Size(0, 28)),
textStyle: WidgetStatePropertyAll(
TextStyle(fontSize: 12, fontWeight: FontWeight.w600),
),
);
Widget _filterButton(ColorScheme colors) {
@@ -1216,44 +1229,152 @@ class _ChartCard extends StatelessWidget {
);
}
Widget _editButton(ColorScheme colors) {
Widget _editButton(ColorScheme colors, {required bool compact}) {
return IconButton(
tooltip: 'Edit favourite',
onPressed: onEdit,
visualDensity: const VisualDensity(horizontal: -4, vertical: -4),
constraints: const BoxConstraints(minWidth: 36, minHeight: 36),
constraints: BoxConstraints(
minWidth: compact ? 28 : 36,
minHeight: compact ? 28 : 36,
),
padding: EdgeInsets.zero,
style: IconButton.styleFrom(
backgroundColor: colors.surfaceContainerHigh,
backgroundColor:
compact ? null : colors.surfaceContainerHigh,
foregroundColor: colors.onSurfaceVariant,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
),
icon: const Icon(Icons.edit_outlined, size: 18),
icon: Icon(Icons.edit_outlined, size: compact ? 16 : 18),
);
}
Widget _legendRow(ColorScheme colors, {required bool compact}) {
if (metric == OverviewMetricMode.flow) {
return Row(
mainAxisSize: MainAxisSize.min,
children: [
_LegendDot(
color: _kIncomeColor,
label: 'Income',
compact: compact,
),
SizedBox(width: compact ? 10 : 14),
_LegendDot(
color: _kExpenseColor,
label: 'Expense',
compact: compact,
),
],
);
}
if (labelSpend.isEmpty) return const SizedBox.shrink();
return Wrap(
spacing: compact ? 8 : 12,
runSpacing: 2,
alignment: WrapAlignment.end,
children: [
for (final row in labelSpend.take(compact ? 3 : 5))
GestureDetector(
onTap: () => onLabelTap(row.label),
child: _LegendDot(
color: row.label.color,
label: row.label.name,
compact: compact,
),
),
if (labelSpend.length > (compact ? 3 : 5))
_LegendDot(
color: colors.outline,
label: 'Other',
compact: compact,
),
],
);
}
Widget _periodControls(ThemeData theme, {required bool compact}) {
final titleStyle = (compact
? theme.textTheme.labelMedium
: theme.textTheme.titleMedium)
?.copyWith(
fontWeight: FontWeight.w600,
color: compact ? theme.colorScheme.onSurfaceVariant : null,
);
if (period == OverviewPeriodMode.monthly) {
return Row(
children: [
IconButton(
tooltip: 'Previous year',
onPressed: canGoBack ? onBack : null,
visualDensity: const VisualDensity(horizontal: -4, vertical: -4),
constraints: BoxConstraints(
minWidth: compact ? 28 : 32,
minHeight: compact ? 28 : 32,
),
padding: EdgeInsets.zero,
icon: Icon(Icons.chevron_left, size: compact ? 20 : 22),
),
Flexible(
child: Text(
periodTitle,
textAlign: TextAlign.left,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: titleStyle,
),
),
IconButton(
tooltip: 'Next year',
onPressed: canGoForward ? onForward : null,
visualDensity: const VisualDensity(horizontal: -4, vertical: -4),
constraints: BoxConstraints(
minWidth: compact ? 28 : 32,
minHeight: compact ? 28 : 32,
),
padding: EdgeInsets.zero,
icon: Icon(Icons.chevron_right, size: compact ? 20 : 22),
),
],
);
}
return Text(periodTitle, style: titleStyle);
}
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
final colors = theme.colorScheme;
final showFilter =
metric == OverviewMetricMode.labels && onPickLabels != null;
final showFavouriteChrome =
onPeriodModeChanged != null || onEdit != null;
final compact = onPeriodModeChanged != null || onEdit != null;
final chartHeight = compact ? 176.0 : 220.0;
final legend = _legendRow(colors, compact: compact);
final hasLegend = metric == OverviewMetricMode.flow ||
labelSpend.isNotEmpty;
return Card(
color: colors.surfaceContainer,
elevation: 0,
margin: EdgeInsets.zero,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
borderRadius: BorderRadius.circular(compact ? 16 : 20),
),
child: Padding(
padding: const EdgeInsets.fromLTRB(14, 12, 14, 16),
padding: EdgeInsets.fromLTRB(
compact ? 12 : 14,
compact ? 10 : 12,
compact ? 10 : 14,
compact ? 12 : 16,
),
child: Column(
children: [
if (showFavouriteChrome) ...[
if (compact) ...[
Row(
children: [
if (onPeriodModeChanged != null)
@@ -1274,31 +1395,47 @@ class _ChartCard extends StatelessWidget {
onSelectionChanged: (selection) {
onPeriodModeChanged!(selection.first);
},
)
else
const SizedBox.shrink(),
),
if (heading != null) ...[
const SizedBox(width: 10),
const SizedBox(width: 8),
Expanded(
child: Text(
heading!,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: theme.textTheme.titleMedium?.copyWith(
style: theme.textTheme.titleSmall?.copyWith(
fontWeight: FontWeight.w700,
),
),
),
] else
const Spacer(),
if (showFilter) ...[
const SizedBox(width: 4),
_filterButton(colors),
],
if (onEdit != null) ...[
const SizedBox(width: 6),
_editButton(colors),
const SizedBox(width: 2),
_editButton(colors, compact: true),
],
],
),
const SizedBox(height: 8),
] else if (heading != null) ...[
const SizedBox(height: 4),
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
child: _periodControls(theme, compact: true),
),
if (hasLegend) ...[
const SizedBox(width: 8),
Flexible(child: legend),
],
],
),
const SizedBox(height: 6),
] else ...[
if (heading != null) ...[
Align(
alignment: Alignment.centerLeft,
child: Text(
@@ -1375,44 +1512,16 @@ class _ChartCard extends StatelessWidget {
const SizedBox(width: 0),
],
),
if (metric == OverviewMetricMode.flow) ...[
const Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
_LegendDot(color: _kIncomeColor, label: 'Income'),
SizedBox(width: 14),
_LegendDot(color: _kExpenseColor, label: 'Expense'),
],
),
const SizedBox(height: 8),
] else if (labelSpend.isNotEmpty) ...[
if (hasLegend) ...[
Align(
alignment: Alignment.centerRight,
child: Wrap(
spacing: 12,
runSpacing: 4,
alignment: WrapAlignment.end,
children: [
for (final row in labelSpend.take(5))
GestureDetector(
onTap: () => onLabelTap(row.label),
child: _LegendDot(
color: row.label.color,
label: row.label.name,
),
),
if (labelSpend.length > 5)
_LegendDot(
color: colors.outline,
label: 'Other',
),
],
),
child: legend,
),
const SizedBox(height: 8),
],
],
SizedBox(
height: 220,
height: chartHeight,
child: metric == OverviewMetricMode.flow
? _FlowBars(
months: months,
@@ -1908,23 +2017,34 @@ class _LabelMonthBars extends StatelessWidget {
}
class _LegendDot extends StatelessWidget {
const _LegendDot({required this.color, required this.label});
const _LegendDot({
required this.color,
required this.label,
this.compact = false,
});
final Color color;
final String label;
final bool compact;
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
return Row(
mainAxisSize: MainAxisSize.min,
children: [
Container(
width: 8,
height: 8,
width: compact ? 6 : 8,
height: compact ? 6 : 8,
decoration: BoxDecoration(color: color, shape: BoxShape.circle),
),
const SizedBox(width: 6),
Text(label, style: Theme.of(context).textTheme.labelMedium),
SizedBox(width: compact ? 4 : 6),
Text(
label,
style: compact
? theme.textTheme.labelSmall
: theme.textTheme.labelMedium,
),
],
);
}