Improved layout, fixed transaction popup

This commit is contained in:
2024-02-11 17:28:21 +01:00
parent 44f6d433d1
commit cbaf94d866
21 changed files with 378 additions and 204 deletions

View File

@@ -6,16 +6,17 @@ class BudgetsPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return const Flex(
direction: Axis.horizontal,
children: [
Expanded(
child: Column(
return Center(
child: ConstrainedBox(
constraints: const BoxConstraints(
maxWidth: 1000
),
child: const Column(
children: [
BudgetsActions(),
],
))
],
)
)
);
}
}

View File

@@ -1,4 +1,5 @@
import 'package:flutter/material.dart';
import 'package:tunas/pages/data/widgets/account_settings.dart';
import 'package:tunas/pages/data/widgets/categories_settings.dart';
import 'package:tunas/pages/data/widgets/import_settings.dart';
@@ -7,27 +8,33 @@ class DataPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.symmetric(vertical: 9, horizontal: 10),
margin: const EdgeInsets.symmetric(vertical: 2, horizontal: 10),
child: const Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Settings',
style: TextStyle(
fontWeight: FontWeight.w900,
fontSize: 35,
return Center(
child: Container(
constraints: const BoxConstraints(
maxWidth: 1000
),
padding: const EdgeInsets.symmetric(vertical: 9, horizontal: 10),
margin: const EdgeInsets.symmetric(vertical: 2, horizontal: 10),
child: const Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Settings',
style: TextStyle(
fontWeight: FontWeight.w900,
fontSize: 35,
),
),
),
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
ImportSettings(),
CategoriesSettings()
],
)
]
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
ImportSettings(),
CategoriesSettings(),
AccountSettings(),
],
)
]
)
)
);
}

View File

@@ -0,0 +1,50 @@
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:tunas/domains/account/account_bloc.dart';
class AccountSettings extends StatelessWidget {
const AccountSettings({super.key});
List<Widget> _computeCategoryList(Set<String> subAccounts) {
return subAccounts.map((subAccount) => Row(
children: [
Text(subAccount),
],
)).toList();
}
@override
Widget build(BuildContext context) {
return BlocBuilder<AccountBloc, AccountState>(
builder: (context, state) => Container(
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(5),
),
padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 15),
margin: const EdgeInsets.all(5),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
"Accounts",
style: TextStyle(
fontWeight: FontWeight.w900,
fontSize: 20,
),
),
const SizedBox(height: 10),
SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: _computeCategoryList(state.subAccounts),
),
),
],
)
),
);
}
}

View File

@@ -25,23 +25,36 @@ class HomePage extends StatelessWidget {
child: DefaultTabController(
length: 4,
child: Scaffold(
appBar: AppBar(
title: const Text('Tunas'),
bottom: const TabBar(
tabs: [
Tab(icon: Icon(Icons.insights)),
Tab(icon: Icon(Icons.receipt_long)),
Tab(icon: Icon(Icons.pie_chart)),
Tab(icon: Icon(Icons.settings)),
],
),
),
body: const TabBarView(
body: Stack(
children: [
StatsPage(),
TransactionsPage(),
BudgetsPage(),
DataPage()
const TabBarView(
children: [
StatsPage(),
TransactionsPage(),
BudgetsPage(),
DataPage()
],
),
Align(
alignment: Alignment.bottomCenter,
child: Container(
margin: const EdgeInsets.all(15),
decoration: BoxDecoration(
color: const Color.fromARGB(255, 41, 49, 56),
borderRadius: BorderRadius.circular(25)
),
child: TabBar(
tabAlignment: TabAlignment.center,
splashBorderRadius: BorderRadius.circular(25),
tabs: const [
Tab(icon: Icon(Icons.insights)),
Tab(icon: Icon(Icons.receipt_long)),
Tab(icon: Icon(Icons.pie_chart)),
Tab(icon: Icon(Icons.settings)),
],
),
),
)
],
),
)

View File

@@ -20,24 +20,35 @@ class StatsPage extends StatelessWidget {
child: BlocBuilder<ChartBloc, ChartState>(
builder: (context, state) => ListView(
children: [
Row(
children: [
Expanded(
flex: 2,
child: MainCounter(value: state.globalTotal)
Center (
child: ConstrainedBox(
constraints: const BoxConstraints(
maxWidth: 1000
),
Expanded(
flex: 1,
child: AccountCounter(accountsTotals: state.accountsTotals)
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const YearSelector(),
ProfitIndicator(monthlyTotals: state.scopedMonthlyTotals)
],
child: Column(
children: [
Row(
children: [
Expanded(
flex: 2,
child: MainCounter(value: state.globalTotal)
),
Expanded(
flex: 1,
child: AccountCounter(accountsTotals: state.accountsTotals)
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const YearSelector(),
ProfitIndicator(profit: state.scoppedProfit)
],
),
]
)
)
),
SizedBox(
height: 200,
@@ -47,14 +58,20 @@ class StatsPage extends StatelessWidget {
height: 500,
child: MonthlyCategoriesTotalChart(categoriesMonthlyTotals: state.scopedCategoriesMonthlyTotals)
),
SizedBox(
height: 450,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
CategoriesTotalsChart(categoriesTotals: state.scopedCategoriesPositiveTotals, categoriesTotalsPercents: state.scopedSimplifiedCategoriesPositiveTotalsPercents),
CategoriesTotalsChart(categoriesTotals: state.scopedCategoriesNegativeTotals, categoriesTotalsPercents: state.scopedSimplifiedCategoriesNegativeTotalsPercents),
],
Center (
child: ConstrainedBox(
constraints: const BoxConstraints(
maxWidth: 1500
),
child: SizedBox(
height: 450,
child: OverflowBar(
children: [
CategoriesTotalsChart(categoriesTotals: state.scopedCategoriesPositiveTotals, categoriesTotalsPercents: state.scopedSimplifiedCategoriesPositiveTotalsPercents),
CategoriesTotalsChart(categoriesTotals: state.scopedCategoriesNegativeTotals, categoriesTotalsPercents: state.scopedSimplifiedCategoriesNegativeTotalsPercents),
],
)
)
)
),
],

View File

@@ -10,7 +10,12 @@ class AccountCounter extends StatelessWidget {
return accountsTotals.entries.toList().map((entry) => Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(entry.key),
Flexible(
child: Text(
entry.key,
overflow: TextOverflow.ellipsis,
)
),
Text(
NumberFormat('#######.00 €', 'fr_FR').format(entry.value),
style: TextStyle(

View File

@@ -60,7 +60,7 @@ class CategoriesTotalsChart extends StatelessWidget {
return BlocBuilder<CategoryBloc, CategoryState>(
builder: (context, state) => Container(
height: 320,
width: 560,
width: 600,
padding: const EdgeInsets.all(10),
margin: const EdgeInsets.all(20),
decoration: BoxDecoration(

View File

@@ -1,25 +1,14 @@
import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
class ProfitIndicator extends StatelessWidget {
final List<FlSpot> monthlyTotals;
final double profit;
const ProfitIndicator({super.key, required this.monthlyTotals});
const ProfitIndicator({super.key, required this.profit});
double _profit() {
if (monthlyTotals.isEmpty) {
return 0;
}
final maxDateSpot = monthlyTotals.reduce((value, element) => value.x > element.x ? value : element);
final minDateSpot = monthlyTotals.reduce((value, element) => value.x < element.x ? value : element);
return maxDateSpot.y - minDateSpot.y;
}
@override
Widget build(BuildContext context) {
final profit = _profit();
return Container(
margin: const EdgeInsets.fromLTRB(0, 0, 20, 0),
padding: const EdgeInsets.fromLTRB(10, 5, 10, 5),

View File

@@ -8,18 +8,19 @@ class TransactionsPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return const Flex(
direction: Axis.horizontal,
children: [
Expanded(
child: Column(
return Center(
child: ConstrainedBox(
constraints: const BoxConstraints(
maxWidth: 1000
),
child: const Column(
children: [
TransactionsActions(),
TransactionsHeader(),
TransactionsList(),
],
))
],
),
)
);
}
}

View File

@@ -1,75 +0,0 @@
import 'package:flutter/material.dart';
class AutocompleteInput extends StatelessWidget {
final List<String> options;
final String hintText;
final String? errorText;
final String? initialValue;
final ValueChanged<String>? onChanged;
const AutocompleteInput({
super.key,
required this.options,
required this.hintText,
required this.errorText,
required this.initialValue,
required this.onChanged,
});
@override
Widget build(BuildContext context) {
return RawAutocomplete<String>(
initialValue: TextEditingValue(text: initialValue ?? ''),
optionsBuilder: (TextEditingValue textEditingValue) => options.where((String option) =>option.contains(textEditingValue.text.toLowerCase())),
fieldViewBuilder: (
BuildContext context,
TextEditingController textEditingController,
FocusNode focusNode,
VoidCallback onFieldSubmitted,
) {
return TextFormField(
controller: textEditingController,
focusNode: focusNode,
decoration: InputDecoration(
hintText: hintText,
errorText: errorText
),
onFieldSubmitted: (String value) {
onFieldSubmitted();
},
onChanged: onChanged,
);
},
optionsViewBuilder: (
BuildContext context,
AutocompleteOnSelected<String> onSelected,
Iterable<String> options,
) {
return Align(
alignment: Alignment.topLeft,
child: Material(
elevation: 4.0,
child: SizedBox(
height: 200.0,
child: ListView.builder(
padding: const EdgeInsets.all(8.0),
itemCount: options.length,
itemBuilder: (BuildContext context, int index) {
final String option = options.elementAt(index);
return GestureDetector(
onTap: () {
onSelected(option);
},
child: ListTile(
title: Text(option),
),
);
},
),
),
),
);
},
);
}
}

View File

@@ -1,5 +1,6 @@
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:tunas/domains/account/account_bloc.dart';
import 'package:tunas/domains/category/category_bloc.dart';
import 'package:tunas/domains/transaction/transaction_bloc.dart';
import 'package:tunas/pages/transactions/widgets/transaction_form.dart';
@@ -18,6 +19,7 @@ class TransactionAddDialog extends StatelessWidget {
providers: [
BlocProvider.value(value: BlocProvider.of<TransactionBloc>(context)),
BlocProvider.value(value: BlocProvider.of<CategoryBloc>(context)),
BlocProvider.value(value: BlocProvider.of<AccountBloc>(context)),
],
child: const TransactionAddDialog()
)
@@ -55,10 +57,7 @@ class TransactionAddDialog extends StatelessWidget {
builder: (context, state) => AlertDialog(
title: Text(state.currentTransaction == null ? 'Add Transaction' : 'Edit Transaction'),
actions: _computeActions(context, state.currentTransaction),
content: const SizedBox(
height: 400,
child: TransactionForm(),
)
content: const TransactionForm()
)
);
}

View File

@@ -1,11 +1,10 @@
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:intl/intl.dart';
import 'package:tunas/domains/account/account_bloc.dart';
import 'package:tunas/domains/category/category_bloc.dart';
import 'package:tunas/domains/transaction/transaction_bloc.dart';
import 'autocomplete_input.dart';
class TransactionForm extends StatelessWidget {
const TransactionForm({super.key});
@@ -13,11 +12,16 @@ class TransactionForm extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
mainAxisSize: MainAxisSize.min,
children: [
_TransactionDateInput(),
const SizedBox(height: 10,),
_TransactionCategoryInput(),
const SizedBox(height: 10,),
_TransactionDescriptionInput(),
const SizedBox(height: 10,),
_TransactionAccountInput(),
const SizedBox(height: 10,),
_TransactionValueInput()
],
);
@@ -41,11 +45,19 @@ class _TransactionDateInput extends StatelessWidget {
context: context,
firstDate: DateTime.fromMicrosecondsSinceEpoch(0),
lastDate: DateTime.now()
).then((value) => context.read<TransactionBloc>().add(TransactionDateChange(value)));
).then((value) {
if (value != null) {
context.read<TransactionBloc>().add(TransactionDateChange(value));
}
});
},
decoration: InputDecoration(
icon: const Icon(Icons.calendar_month),
hintText: 'Date',
errorText: state.transactionDate.isNotValid ? state.transactionDate.error?.message : null
errorText: state.transactionDate.isNotValid ? state.transactionDate.error?.message : null,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(5),
),
),
)
)
@@ -61,12 +73,18 @@ class _TransactionCategoryInput extends StatelessWidget {
buildWhen: (previous, current) => previous.transactionCategory != current.transactionCategory,
builder: (context, state) => SizedBox(
width: 500,
child: AutocompleteInput(
options: categoryState.categories.map((e) => e.label).toList(),
hintText: 'Category',
initialValue: state.transactionCategory.value,
errorText: state.transactionCategory.isNotValid ? state.transactionCategory.error?.message : null,
onChanged: (value) => context.read<TransactionBloc>().add(TransactionCategoryChange(value)),
child: DropdownButtonFormField<String>(
value: state.transactionCategory.value.toString() == '' ? null : state.transactionCategory.value.toString(),
onChanged: (value) => context.read<TransactionBloc>().add(TransactionCategoryChange(value!)),
items: categoryState.categories.map((e) => DropdownMenuItem(value: e.label, child: Text(e.label))).toList(),
decoration: InputDecoration(
icon: const Icon(Icons.category),
hintText: 'Category',
errorText: state.transactionCategory.isNotValid ? state.transactionCategory.error?.message : null,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(5),
),
),
),
),
);
@@ -80,11 +98,16 @@ class _TransactionDescriptionInput extends StatelessWidget {
buildWhen: (previous, current) => previous.transactionDescription != current.transactionDescription,
builder: (context, state) => SizedBox(
width: 500,
child: TextField(
child: TextFormField(
decoration: InputDecoration(
icon: const Icon(Icons.description),
hintText: 'Description',
errorText: state.transactionDescription.isNotValid ? state.transactionDescription.error?.message : null
errorText: state.transactionDescription.isNotValid ? state.transactionDescription.error?.message : null,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(5),
),
),
initialValue: state.transactionDescription.value,
onChanged: (value) => context.read<TransactionBloc>().add(TransactionDescriptionChange(value))
)
),
@@ -95,16 +118,23 @@ class _TransactionDescriptionInput extends StatelessWidget {
class _TransactionAccountInput extends StatelessWidget {
@override
Widget build(BuildContext context) {
final accountState = context.watch<AccountBloc>().state;
return BlocBuilder<TransactionBloc, TransactionState>(
buildWhen: (previous, current) => previous.transactionAccount != current.transactionAccount,
builder: (context, state) => SizedBox(
width: 500,
child: AutocompleteInput(
options: state.accountsTotals.keys.toList(),
hintText: 'Account',
initialValue: state.transactionAccount.value,
errorText: state.transactionAccount.isNotValid ? state.transactionAccount.error?.message : null,
onChanged: (value) => context.read<TransactionBloc>().add(TransactionAccountChange(value)),
child: DropdownButtonFormField<String>(
value: state.transactionAccount.value.toString() == '' ? null : state.transactionAccount.value.toString(),
onChanged: (value) => context.read<TransactionBloc>().add(TransactionAccountChange(value!)),
items: accountState.subAccounts.map((e) => DropdownMenuItem(value: e, child: Text(e))).toList(),
decoration: InputDecoration(
icon: const Icon(Icons.account_box),
hintText: 'Account',
errorText: state.transactionAccount.isNotValid ? state.transactionAccount.error?.message : null,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(5),
),
),
),
),
);
@@ -118,12 +148,17 @@ class _TransactionValueInput extends StatelessWidget {
buildWhen: (previous, current) => previous.transactionValue != current.transactionValue,
builder: (context, state) => SizedBox(
width: 500,
child: TextField(
child: TextFormField(
keyboardType: TextInputType.number,
decoration: InputDecoration(
icon: const Icon(Icons.euro),
hintText: '\$\$\$',
errorText: state.transactionValue.isNotValid ? state.transactionValue.error?.message : null
errorText: state.transactionValue.isNotValid ? state.transactionValue.error?.message : null,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(5),
),
),
initialValue: state.transactionValue.value.toString(),
onChanged: (value) => context.read<TransactionBloc>().add(TransactionValueChange(value))
)
),