gltron/Krezus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improved json auto save & budget mobile UI

Browse Source
This commit is contained in:
gltron
2024-03-03 17:14:00 +01:00
parent f86c4cd18b
commit fc6f64a271
20 changed files with 570 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
lib/pages/budgets/widgets/budget_cards.dart Normal file
View File

@@ -0,0 +1,124 @@
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:intl/intl.dart';
import 'package:tunas/domains/budget/budget_bloc.dart';
import 'package:tunas/repositories/metadata/models/budget.dart';
class BudgetCards extends StatelessWidget {
const BudgetCards({super.key});
List<Widget> _computeBudgetsCompare(BuildContext context, List<Budget> targetBudgets, List<Budget> realBudgets) {
List<Widget> list = [
const Text('Budget'),
Container(
margin: const EdgeInsets.only(bottom: 10),
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
width: 2,
color: Theme.of(context).colorScheme.onPrimaryContainer
)
)
),
)
];
list.addAll(targetBudgets.map((budget) => Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
Container(width: 5),
Text(budget.label),
],
),
Text(
'${NumberFormat("#00").format(budget.value.abs())}/${NumberFormat("#00 €").format(realBudgets.firstWhere((rbudget) => rbudget.label == budget.label).value.abs())}',
style: const TextStyle(
fontFamily: 'NovaMono',
)
)
],
)));
return list;
}
List<Widget> _computeOtherBudgets(BuildContext context, List<Budget> otherBudgets) {
List<Widget> list = [
const Text('Hors budget'),
Container(
margin: const EdgeInsets.only(bottom: 10),
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
width: 2,
color: Theme.of(context).colorScheme.onPrimaryContainer
)
)
),
)
];
list.addAll(otherBudgets.map((budget) => Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
Container(width: 5),
Text(budget.label),
],
),
Text(
NumberFormat("#00 €").format(budget.value.abs()),
style: const TextStyle(
fontFamily: 'NovaMono',
)
)
],
)));
return list;
}
@override
Widget build(BuildContext context) {
bool smallVerticalScreen = MediaQuery.sizeOf(context).width < 800;
return BlocBuilder<BudgetBloc, BudgetState>(
builder: (context, state) => Column(
children: [
Container(
width: smallVerticalScreen ? null : 300,
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
color: Theme.of(context).colorScheme.secondaryContainer
),
child: SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: _computeBudgetsCompare(context, state.budgets, state.compareBudgets),
),
)
),
Container(
width: smallVerticalScreen ? null : 300,
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
color: Theme.of(context).colorScheme.secondaryContainer
),
child: SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: _computeOtherBudgets(context, state.otherBudgets),
),
)
),
],
),
);
}
}

137
lib/pages/budgets/widgets/budget_comparator.dart
View File

@@ -1,135 +1,50 @@
import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:intl/intl.dart';
import 'package:tunas/domains/budget/budget_bloc.dart';
import 'package:tunas/pages/budgets/widgets/budget_cards.dart';
import 'package:tunas/pages/budgets/widgets/budget_compare_selector.dart';
import 'package:tunas/pages/budgets/widgets/budget_radar.dart';
import 'package:tunas/pages/common/titled_container.dart';
import 'package:tunas/repositories/metadata/models/budget.dart';
class BudgetComparator extends StatelessWidget {
const BudgetComparator({super.key});
List<RadarDataSet> _computeDataSet(BuildContext context, List<Budget> targetBudgets, List<Budget> realBudgets) {
RadarDataSet targetDataSet = RadarDataSet(
fillColor: Theme.of(context).colorScheme.primary.withAlpha(100),
borderColor: Theme.of(context).colorScheme.primary,
entryRadius: 5,
dataEntries: targetBudgets.map((budget) => RadarEntry(value: budget.value)).toList(),
);
if (realBudgets.isNotEmpty) {
targetDataSet.dataEntries.add(const RadarEntry(value: 0));
}
RadarDataSet realDataSet = RadarDataSet(
fillColor: Theme.of(context).colorScheme.onPrimary.withAlpha(100),
borderColor: Theme.of(context).colorScheme.onPrimary,
entryRadius: 8,
dataEntries: realBudgets.map((budget) => RadarEntry(value: budget.value)).toList(),
);
return realBudgets.isEmpty ? [RadarDataSet(dataEntries: [const RadarEntry(value: 1), const RadarEntry(value: 2), const RadarEntry(value: 3)])] : [realDataSet, targetDataSet];
}
RadarChartTitle _computeDataSetTitle(int index, List<Budget> realBudgets) {
return realBudgets.isEmpty ? const RadarChartTitle(text: 'No data') : RadarChartTitle(text: realBudgets[index].label);
}
List<Widget> _computeOtherBudgets(BuildContext context, List<Budget> otherBudgets) {
List<Widget> list = [
const Text('Hors budget'),
Container(
margin: const EdgeInsets.only(bottom: 10),
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
width: 2,
color: Theme.of(context).colorScheme.onPrimaryContainer
)
)
),
)
];
list.addAll(otherBudgets.map((budget) => Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
Container(width: 5),
Text(budget.label),
],
),
Text(
NumberFormat("#00 €").format(budget.value.abs()),
style: const TextStyle(
fontFamily: 'NovaMono',
)
)
],
)));
return list;
}
@override
Widget build(BuildContext context) {
bool smallVerticalScreen = MediaQuery.sizeOf(context).width < 800;
return BlocBuilder<BudgetBloc, BudgetState>(
builder: (context, state) => TitledContainer(
title: 'Compare',
child: Column(
child: smallVerticalScreen
? const Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
IconButton(
onPressed: () => context.read<BudgetBloc>().add(BudgetComparePrevious()),
icon: const Icon(Icons.skip_previous)
),
Text('${NumberFormat('00', 'fr_FR').format(state.compareMonth)} - ${state.compareYear}'),
IconButton(
onPressed: () => context.read<BudgetBloc>().add(BudgetCompareNext()),
icon: const Icon(Icons.skip_next)
),
],
BudgetCompareSelector(),
SizedBox(
height: 500,
child: BudgetRadar(),
),
SizedBox(
height: 10,
),
SizedBox(
height: 500,
child: BudgetCards(),
),
],
)
: const Column(
children: [
BudgetCompareSelector(),
Row(
children: [
Container(
height: 300,
width: 250,
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
color: Theme.of(context).colorScheme.secondaryContainer
),
child: SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: _computeOtherBudgets(context, state.otherBudgets),
),
)
),
Expanded(
child: AspectRatio(
aspectRatio: 1.3,
child: RadarChart(
RadarChartData(
titlePositionPercentageOffset: 0.15,
tickBorderData: BorderSide(color: Theme.of(context).colorScheme.secondary, width: 1),
gridBorderData: BorderSide(color: Theme.of(context).colorScheme.secondary, width: 2),
radarBorderData: BorderSide(color: Theme.of(context).colorScheme.secondary, width: 3),
radarBackgroundColor: Theme.of(context).colorScheme.secondaryContainer.withAlpha(100),
radarShape: RadarShape.circle,
dataSets: _computeDataSet(context, state.budgets, state.compareBudgets),
getTitle: (index, angle) => _computeDataSetTitle(index, state.compareBudgets),
)
),
)
),
BudgetCards(),
BudgetRadar(),
],
)
],
]
),
),
)
);
}
}

28
lib/pages/budgets/widgets/budget_compare_selector.dart Normal file
View File

@@ -0,0 +1,28 @@
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:intl/intl.dart';
import 'package:tunas/domains/budget/budget_bloc.dart';
class BudgetCompareSelector extends StatelessWidget {
const BudgetCompareSelector({super.key});
@override
Widget build(BuildContext context) {
return BlocBuilder<BudgetBloc, BudgetState>(
builder: (context, state) => Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
IconButton(
onPressed: () => context.read<BudgetBloc>().add(BudgetComparePrevious()),
icon: const Icon(Icons.skip_previous)
),
Text('${NumberFormat('00', 'fr_FR').format(state.compareMonth)} - ${state.compareYear}'),
IconButton(
onPressed: () => context.read<BudgetBloc>().add(BudgetCompareNext()),
icon: const Icon(Icons.skip_next)
),
],
)
);
}
}

124
lib/pages/budgets/widgets/budget_line.dart Normal file
View File

@@ -0,0 +1,124 @@
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:intl/intl.dart';
import 'package:tunas/domains/budget/budget_bloc.dart';
import 'package:tunas/domains/category/category_bloc.dart';
import 'package:tunas/repositories/metadata/models/budget.dart';
import 'package:tunas/repositories/metadata/models/category.dart';
class BudgetLine extends StatelessWidget {
final Budget budget;
const BudgetLine({super.key, required this.budget});
Widget _largeScreenLine(BuildContext context, List<Category> categories, double initialBudget, double remainingBudget) {
return Row (
children: [
Expanded(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: DropdownButtonFormField<String>(
value: budget.label,
onChanged: (value) => context.read<BudgetBloc>().add(BudgetSetLabel(budget, value!)),
items: categories.map((e) => DropdownMenuItem(value: e.label, child: Text(e.label))).toList(),
),
),
const SizedBox(width: 30),
IconButton(
onPressed: () => context.read<BudgetBloc>().add(BudgetSetValue(budget, budget.value.round().toDouble() - 1)),
icon: const Icon(Icons.remove_circle)
),
Text(
NumberFormat('####000 €', 'fr_FR').format(budget.value),
style: const TextStyle(
fontFamily: 'NovaMono',
fontWeight: FontWeight.bold,
fontSize: 15,
)
),
IconButton(
onPressed: () => context.read<BudgetBloc>().add(BudgetSetValue(budget, budget.value.round().toDouble() + 1)),
icon: const Icon(Icons.add_circle)
),
const SizedBox(width: 5),
],
)
),
Expanded(
child: Slider(
min: 0,
max: initialBudget,
label: budget.value.round().toString(),
value: budget.value,
secondaryTrackValue: remainingBudget + budget.value,
onChanged: (value) => context.read<BudgetBloc>().add(BudgetSetValue(budget, value.round().toDouble())),
),
),
IconButton(
onPressed: () => context.read<BudgetBloc>().add(BudgetRemove(budget)),
icon: const Icon(Icons.delete),
),
]
);
}
Widget _smallScreenLine(BuildContext context, List<Category> categories, double initialBudget, double remainingBudget) {
return Column(
children: [
Row(
children: [
Expanded(
child: DropdownButtonFormField<String>(
value: budget.label,
onChanged: (value) => context.read<BudgetBloc>().add(BudgetSetLabel(budget, value!)),
items: categories.map((e) => DropdownMenuItem(value: e.label, child: Text(e.label))).toList(),
),
),
const SizedBox(width: 30),
Text(
NumberFormat('####000 €', 'fr_FR').format(budget.value),
style: const TextStyle(
fontFamily: 'NovaMono',
fontWeight: FontWeight.bold,
fontSize: 15,
)
),
IconButton(
onPressed: () => context.read<BudgetBloc>().add(BudgetSetValue(budget, budget.value.round().toDouble() - 1)),
icon: const Icon(Icons.remove_circle)
),
IconButton(
onPressed: () => context.read<BudgetBloc>().add(BudgetSetValue(budget, budget.value.round().toDouble() + 1)),
icon: const Icon(Icons.add_circle)
),
IconButton(
onPressed: () => context.read<BudgetBloc>().add(BudgetRemove(budget)),
icon: const Icon(Icons.delete),
),
],
),
Slider(
min: 0,
max: initialBudget,
label: budget.value.round().toString(),
value: budget.value,
secondaryTrackValue: remainingBudget + budget.value,
onChanged: (value) => context.read<BudgetBloc>().add(BudgetSetValue(budget, value.round().toDouble())),
),
],
);
}
@override
Widget build(BuildContext context) {
final categoryState = context.watch<CategoryBloc>().state;
bool smallVerticalScreen = MediaQuery.sizeOf(context).width < 800;
return BlocBuilder<BudgetBloc, BudgetState>(
builder: (context, state) => smallVerticalScreen
? _smallScreenLine(context, categoryState.categories, state.initialBudget, state.remainingBudget)
: _largeScreenLine(context, categoryState.categories, state.initialBudget, state.remainingBudget),
);
}
}

50
lib/pages/budgets/widgets/budget_maker.dart
View File

@@ -3,6 +3,7 @@ import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:intl/intl.dart';
import 'package:tunas/domains/budget/budget_bloc.dart';
import 'package:tunas/domains/category/category_bloc.dart';
import 'package:tunas/pages/budgets/widgets/budget_line.dart';
import 'package:tunas/pages/common/titled_container.dart';
import 'package:tunas/repositories/metadata/models/budget.dart';
@@ -10,7 +11,6 @@ class BudgetMaker extends StatelessWidget {
const BudgetMaker({super.key});
List<Widget> _computeBudgetLines(BuildContext context, List<Budget> budgets, double initialBudget, double remainingBudget) {
final categoryState = context.watch<CategoryBloc>().state;
List<Widget> list = [];
list.add(
@@ -38,50 +38,7 @@ class BudgetMaker extends StatelessWidget {
))
);
list.addAll(budgets.map((budget) => Row(
children: [
Expanded(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: DropdownButtonFormField<String>(
value: budget.label,
onChanged: (value) => context.read<BudgetBloc>().add(BudgetSetLabel(budget, value!)),
items: categoryState.categories.map((e) => DropdownMenuItem(value: e.label, child: Text(e.label))).toList(),
),
),
const SizedBox(width: 20),
Text(
NumberFormat('####000 €', 'fr_FR').format(budget.value),
style: const TextStyle(
fontFamily: 'NovaMono',
fontWeight: FontWeight.bold,
fontSize: 15,
)
),
],
)
),
Expanded(
child: SliderTheme(
data: const SliderThemeData(),
child: Slider(
min: 0,
max: initialBudget,
label: budget.value.round().toString(),
value: budget.value,
secondaryTrackValue: remainingBudget + budget.value,
onChanged: (value) => context.read<BudgetBloc>().add(BudgetSetValue(budget, value.round().toDouble())),
),
)
),
IconButton(
onPressed: () => context.read<BudgetBloc>().add(BudgetRemove(budget)),
icon: const Icon(Icons.delete),
),
],
)).toList());
list.addAll(budgets.map((budget) => BudgetLine(budget: budget)).toList());
list.add(
Container(
@@ -99,9 +56,10 @@ class BudgetMaker extends StatelessWidget {
list.add(
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Text(
' Remaining ${NumberFormat('#####00 €', 'fr_FR').format(remainingBudget)} out of ${NumberFormat('#####00 €', 'fr_FR').format(initialBudget)}',
'${NumberFormat('#####00 €', 'fr_FR').format(remainingBudget)} remaining ',
style: const TextStyle(
fontFamily: 'NovaMono',
fontWeight: FontWeight.bold,

67
lib/pages/budgets/widgets/budget_radar.dart Normal file
View File

@@ -0,0 +1,67 @@
import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:tunas/domains/budget/budget_bloc.dart';
import 'package:tunas/repositories/metadata/models/budget.dart';
class BudgetRadar extends StatelessWidget {
const BudgetRadar({super.key});
List<RadarDataSet> _computeDataSet(BuildContext context, List<Budget> targetBudgets, List<Budget> realBudgets) {
if (realBudgets.isEmpty || targetBudgets.isEmpty) {
return [RadarDataSet(dataEntries: [const RadarEntry(value: 1), const RadarEntry(value: 2), const RadarEntry(value: 3)])];
}
RadarDataSet targetDataSet = RadarDataSet(
fillColor: Theme.of(context).colorScheme.primary.withAlpha(100),
borderColor: Theme.of(context).colorScheme.primary,
entryRadius: 5,
dataEntries: targetBudgets.map((budget) => RadarEntry(value: budget.value)).toList(),
);
if (realBudgets.isNotEmpty) {
targetDataSet.dataEntries.add(const RadarEntry(value: 0));
}
RadarDataSet realDataSet = RadarDataSet(
fillColor: Theme.of(context).colorScheme.onPrimary.withAlpha(100),
borderColor: Theme.of(context).colorScheme.onPrimary,
entryRadius: 8,
dataEntries: realBudgets.map((budget) => RadarEntry(value: budget.value)).toList(),
);
return [realDataSet, targetDataSet];
}
RadarChartTitle _computeDataSetTitle(int index, List<Budget> realBudgets) {
return RadarChartTitle(text: realBudgets[index].label);
}
bool canShowData(List<Budget> targetBudgets, List<Budget> realBudgets) {
return realBudgets.length >= 3 && targetBudgets.length >= 3;
}
@override
Widget build(BuildContext context) {
return BlocBuilder<BudgetBloc, BudgetState>(
builder: (context, state) => canShowData(state.budgets, state.compareBudgets) ? Expanded(
child: AspectRatio(
aspectRatio: 1.3,
child: RadarChart(
RadarChartData(
titlePositionPercentageOffset: 0.15,
tickBorderData: BorderSide(color: Theme.of(context).colorScheme.secondary, width: 1),
gridBorderData: BorderSide(color: Theme.of(context).colorScheme.secondary, width: 2),
radarBorderData: BorderSide(color: Theme.of(context).colorScheme.secondary, width: 3),
radarBackgroundColor: Theme.of(context).colorScheme.secondaryContainer.withAlpha(100),
radarShape: RadarShape.circle,
dataSets: _computeDataSet(context, state.budgets, state.compareBudgets),
getTitle: (index, angle) => _computeDataSetTitle(index, state.compareBudgets),
)
),
)
)
: const Text('No data to show'),
);
}
}