PapaTutuWawa/okane
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make the pie chart widget reusable

Browse Source
This commit is contained in:
PapaTutuWawa
2025-05-06 21:59:03 +02:00
parent d40d24f759
commit 63b5354b72
24 changed files with 2264 additions and 1924 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
lib/ui/pages/account/account.dart
View File

@@ -9,6 +9,8 @@ import 'package:okane/ui/pages/account/total_balance_card.dart';
import 'package:okane/ui/pages/account/upcoming_transactions_card.dart';
import 'package:okane/ui/state/core.dart';
import 'package:okane/ui/utils.dart';
import 'package:okane/ui/widgets/piechart.dart';
import 'package:okane/ui/widgets/piechart_card.dart';
class AccountListPage extends StatefulWidget {
final bool isPage;
@@ -102,18 +104,25 @@ class AccountListPageState extends State<AccountListPage> {
),
Padding(
padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
padding: EdgeInsets.symmetric(horizontal: 8, vertical: 8),
child: TotalBalanceCard(),
),
Padding(
padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
padding: EdgeInsets.symmetric(horizontal: 8, vertical: 8),
child: UpcomingTransactionsCard(),
),
Row(
Wrap(
children: [
Padding(padding: EdgeInsets.all(16), child: BreakdownCard()),
Padding(
padding: EdgeInsets.all(8),
//child: BreakdownCard(),
child: PieChartCard(
titleText: "Spending Breakdown",
fallbackText: "No spending available",
items: [],
),
),
],
),
],

201
lib/ui/pages/account/breakdown_card.dart
View File

@@ -8,6 +8,8 @@ import 'package:okane/database/collections/transaction.dart';
import 'package:okane/database/database.dart';
import 'package:okane/ui/state/core.dart';
import 'package:okane/ui/utils.dart';
import 'package:okane/ui/widgets/piechart.dart';
import 'package:okane/ui/widgets/piechart_card.dart';
const CATEGORY_INCOME = "Income";
const CATEGORY_OTHER = "Other";
@@ -71,101 +73,126 @@ class BreakdownCard extends StatelessWidget {
return (expenses: expenses, colors: colors, usable: usableMoney);
}
Widget _buildCard(Widget child, String? subtitle) {
return ResponsiveCard(
titleText: "Expense Breakdown",
subtitleText: subtitle,
child: child,
);
}
Widget _buildCenterText(String text) {
return _buildCard(Center(child: Text(text)), null);
}
@override
Widget build(BuildContext context) {
final bloc = GetIt.I.get<CoreCubit>();
return Card(
child: Padding(
padding: const EdgeInsets.all(8),
child: BlocBuilder<CoreCubit, CoreState>(
builder: (context, state) {
if (bloc.activeAccount == null) {
return Text("No active account");
return BlocBuilder<CoreCubit, CoreState>(
builder: (context, state) {
if (bloc.activeAccount == null) {
return _buildCenterText("No account active");
}
return FutureBuilder(
future: getLastTransactions(bloc.activeAccount!, DateTime.now(), 30),
builder: (context, snapshot) {
if (!snapshot.hasData) {
return _buildCard(
Padding(
padding: EdgeInsets.all(16),
child: SizedBox(
width: 150 - 16 * 2,
height: 150 - 16 * 2,
child: CircularProgressIndicator(),
),
),
null,
);
}
return FutureBuilder(
future: getLastTransactions(
bloc.activeAccount!,
DateTime.now(),
30,
),
builder: (context, snapshot) {
final title = Padding(
padding: EdgeInsets.only(bottom: 16),
child: Text("Expense Breakdown"),
);
if (!snapshot.hasData) {
return Column(children: [title, CircularProgressIndicator()]);
}
if (snapshot.data!.isEmpty) {
return Column(children: [title, Text("No transactions")]);
}
final data = _computeSections(snapshot.data!);
final sectionData =
data.expenses.entries
.map(
(entry) => PieChartSectionData(
value: entry.value,
title: formatCurrency(entry.value, precise: false),
titleStyle: TextStyle(fontWeight: FontWeight.bold),
radius: 40,
color: data.colors[entry.key]!,
),
)
.toList();
return Column(
children: [
title,
Row(
children: [
SizedBox(
width: 150,
height: 150,
child: AspectRatio(
aspectRatio: 1,
child: PieChart(
PieChartData(
borderData: FlBorderData(show: false),
sectionsSpace: 0,
centerSpaceRadius: 35,
sections: sectionData,
),
),
),
),
Padding(
padding: EdgeInsets.only(left: 16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children:
data.expenses.keys
.map(
(key) => LegendItem(
text: key,
color: data.colors[key]!,
),
)
.toList(),
),
),
],
),
Padding(
padding: EdgeInsets.only(top: 16),
child: Text(
"Available money: ${formatCurrency(data.usable)}",
final data = _computeSections(snapshot.data!);
final sectionData =
data.expenses.entries
.map(
(entry) => PieChartSectionData(
value: entry.value,
title: formatCurrency(entry.value, precise: false),
titleStyle: TextStyle(fontWeight: FontWeight.bold),
radius: 40,
color: data.colors[entry.key]!,
),
),
],
);
},
)
.toList();
if (sectionData.isEmpty) {
return _buildCenterText("No expenses available");
}
return OkanePieChart(
items:
data.expenses.entries
.map(
(e) => (
title: e.key,
value: e.value,
color: colorHash(e.key),
),
)
.toList(),
);
},
),
);
},
);
return ResponsiveCard(
titleText: "Expense Breakdown",
child: BlocBuilder<CoreCubit, CoreState>(
builder: (context, state) {
if (bloc.activeAccount == null) {
return Text("No active account");
}
return FutureBuilder(
future: getLastTransactions(
bloc.activeAccount!,
DateTime.now(),
30,
),
builder: (context, snapshot) {
if (!snapshot.hasData) {
return CircularProgressIndicator();
}
final data = _computeSections(snapshot.data!);
final sectionData =
data.expenses.entries
.map(
(entry) => PieChartSectionData(
value: entry.value,
title: formatCurrency(entry.value, precise: false),
titleStyle: TextStyle(fontWeight: FontWeight.bold),
radius: 40,
color: data.colors[entry.key]!,
),
)
.toList();
if (sectionData.isEmpty) {
return Center(child: Text("No expenses"));
}
return OkanePieChart(
items:
data.expenses.entries
.map(
(e) => (
title: e.key,
value: e.value,
color: colorHash(e.key),
),
)
.toList(),
);
},
);
},
),
);
}

2
lib/ui/pages/account/total_balance_card.dart
View File

@@ -29,7 +29,7 @@ class TotalBalanceCard extends StatelessWidget {
mainAxisSize: MainAxisSize.min,
children: [
Text(
"Total balance",
"Total balance",
style: Theme.of(context).textTheme.titleLarge,
),
FutureBuilder(

47
lib/ui/pages/budgets/add_budget.dart
View File

@@ -23,44 +23,45 @@ class AddBudgetState extends State<AddBudgetPopup> {
mainAxisSize: MainAxisSize.min,
children: [
TextField(
decoration: InputDecoration(
hintText: "Budget name",
),
decoration: InputDecoration(hintText: "Budget name"),
controller: _budgetNameEditController,
),
TextField(
decoration: InputDecoration(
hintText: "Income",
),
decoration: InputDecoration(hintText: "Income"),
controller: _budgetIncomeEditController,
keyboardType: TextInputType.numberWithOptions(signed: false, decimal: true),
keyboardType: TextInputType.numberWithOptions(
signed: false,
decimal: true,
),
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
OutlinedButton(
onPressed: () async {
if (_budgetNameEditController.text.isEmpty || _budgetIncomeEditController.text.isEmpty) {
return;
}
onPressed: () async {
if (_budgetNameEditController.text.isEmpty ||
_budgetIncomeEditController.text.isEmpty) {
return;
}
final bloc = GetIt.I.get<CoreCubit>();
final budget = Budget()
..name = _budgetNameEditController.text
..period = BudgetPeriod.month
..includeOtherSpendings = false
..income = double.parse(_budgetIncomeEditController.text)
..account.value = bloc.activeAccount!;
await upsertBudget(budget);
widget.onDone();
},
child: Text("Add"),
final bloc = GetIt.I.get<CoreCubit>();
final budget =
Budget()
..name = _budgetNameEditController.text
..period = BudgetPeriod.month
..includeOtherSpendings = false
..income = double.parse(_budgetIncomeEditController.text)
..account.value = bloc.activeAccount!;
await upsertBudget(budget);
widget.onDone();
},
child: Text("Add"),
),
],
),
],
);
}
}
}

82
lib/ui/pages/budgets/add_budget_item.dart
View File

@@ -11,7 +11,11 @@ class AddBudgetItemPopup extends StatefulWidget {
final VoidCallback onDone;
final Budget budget;
const AddBudgetItemPopup({super.key, required this.onDone, required this.budget});
const AddBudgetItemPopup({
super.key,
required this.onDone,
required this.budget,
});
@override
AddBudgetItemState createState() => AddBudgetItemState();
@@ -31,55 +35,67 @@ class AddBudgetItemState extends State<AddBudgetItemPopup> {
Text("Expense category"),
OutlinedButton(
onPressed: () async {
final category = await showDialogOrModal(
context: context,
builder: (_) => AddExpenseCategory(),
);
if (category == null) {
return;
}
onPressed: () async {
final category = await showDialogOrModal(
context: context,
builder: (_) => AddExpenseCategory(),
);
if (category == null) {
return;
}
setState(() => _expenseCategory = category);
},
child: Text(_expenseCategory?.name ?? "None"),
setState(() => _expenseCategory = category);
},
child: Text(_expenseCategory?.name ?? "None"),
),
],
),
TextField(
decoration: InputDecoration(
hintText: "Amount",
),
decoration: InputDecoration(hintText: "Amount"),
controller: _budgetItemAmountEditController,
keyboardType: TextInputType.numberWithOptions(signed: false, decimal: true),
keyboardType: TextInputType.numberWithOptions(
signed: false,
decimal: true,
),
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
OutlinedButton(
onPressed: () async {
if (_budgetItemAmountEditController.text.isEmpty || _expenseCategory == null) {
return;
}
if (widget.budget.items.where((i) => i.expenseCategory.value!.name == _expenseCategory!.name).firstOrNull != null) {
return;
}
onPressed: () async {
if (_budgetItemAmountEditController.text.isEmpty ||
_expenseCategory == null) {
return;
}
if (widget.budget.items
.where(
(i) =>
i.expenseCategory.value!.name ==
_expenseCategory!.name,
)
.firstOrNull !=
null) {
return;
}
final item = BudgetItem()
..expenseCategory.value = _expenseCategory
..amount = double.parse(_budgetItemAmountEditController.text);
await upsertBudgetItem(item);
widget.budget.items.add(item);
await upsertBudget(widget.budget);
widget.onDone();
},
child: Text("Add"),
final item =
BudgetItem()
..expenseCategory.value = _expenseCategory
..amount = double.parse(
_budgetItemAmountEditController.text,
);
await upsertBudgetItem(item);
widget.budget.items.add(item);
await upsertBudget(widget.budget);
widget.onDone();
},
child: Text("Add"),
),
],
),
],
);
}
}
}

239
lib/ui/pages/budgets/budget_details.dart
View File

@@ -8,6 +8,8 @@ import 'package:okane/ui/pages/account/breakdown_card.dart';
import 'package:okane/ui/pages/budgets/add_budget_item.dart';
import 'package:okane/ui/state/core.dart';
import 'package:okane/ui/utils.dart';
import 'package:okane/ui/widgets/piechart.dart';
import 'package:okane/ui/widgets/piechart_card.dart';
class BudgetDetailsPage extends StatelessWidget {
final bool isPage;
@@ -256,211 +258,48 @@ class BudgetDetailsPage extends StatelessWidget {
),
Wrap(
children: [
Padding(
padding: EdgeInsets.all(8),
child: SizedBox(
child: Card(
child: Column(
crossAxisAlignment:
CrossAxisAlignment.center,
children: [
Padding(
padding: EdgeInsets.only(top: 8),
child: Text(
"Budget breakdown",
style:
Theme.of(
context,
).textTheme.titleLarge,
textAlign: TextAlign.center,
children: [
Padding(
padding: EdgeInsets.symmetric(horizontal: 8),
child: PieChartCard(
fallbackText: "",
valueConverter: formatCurrency,
items:
state.activeBudget!.items
.map(
(i) => (
title: i.expenseCategory.value!.name,
value: i.amount,
color: colorHash(
i.expenseCategory.value!.name,
),
),
),
Row(
mainAxisSize: MainAxisSize.min,
children: [
Padding(
padding: EdgeInsets.all(16),
child: SizedBox(
width: 150,
height: 150,
child: AspectRatio(
aspectRatio: 1,
child: PieChart(
PieChartData(
borderData: FlBorderData(
show: false,
),
sectionsSpace: 0,
centerSpaceRadius: 35,
sections:
state
.activeBudget!
.items
.map(
(
i,
) => PieChartSectionData(
value:
i.amount
.abs(),
title:
formatCurrency(
i.amount
.abs(),
),
titleStyle: TextStyle(
fontWeight:
FontWeight
.bold,
),
radius: 40,
color: colorHash(
i
.expenseCategory
.value!
.name,
),
),
)
.toList(),
),
),
),
),
),
Padding(
padding: EdgeInsets.symmetric(
horizontal: 8,
),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children:
state.activeBudget!.items
.map(
(i) => LegendItem(
text:
i
.expenseCategory
.value!
.name,
color: colorHash(
i
.expenseCategory
.value!
.name,
),
),
)
.toList(),
),
),
],
),
],
),
),
),
)
.toList(),
titleText: "Budget breakdown",
),
),
Padding(
padding: EdgeInsets.all(8),
child: SizedBox(
child: Card(
child: Column(
crossAxisAlignment:
CrossAxisAlignment.center,
children: [
Padding(
padding: EdgeInsets.only(top: 8),
child: Text(
"Spending breakdown",
style:
Theme.of(
context,
).textTheme.titleLarge,
textAlign: TextAlign.center,
Padding(
padding: EdgeInsets.symmetric(horizontal: 8),
child: PieChartCard(
fallbackText: "No spending available",
valueConverter: formatCurrency,
items:
spending.entries
.map(
(e) => (
title: e.key,
value: e.value.abs(),
color: colorHash(e.key),
),
),
Row(
mainAxisSize: MainAxisSize.min,
children: [
Padding(
padding: EdgeInsets.all(16),
child: SizedBox(
width: 150,
height: 150,
child: AspectRatio(
aspectRatio: 1,
child: PieChart(
PieChartData(
borderData: FlBorderData(
show: false,
),
sectionsSpace: 0,
centerSpaceRadius: 35,
sections:
spending.entries
.map(
(
e,
) => PieChartSectionData(
value:
e.value
.abs(),
title:
formatCurrency(
e.value
.abs(),
),
titleStyle: TextStyle(
fontWeight:
FontWeight
.bold,
),
radius: 40,
color:
colorHash(
e.key,
),
),
)
.toList(),
),
),
),
),
),
Padding(
padding: EdgeInsets.symmetric(
horizontal: 8,
),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children:
spending.keys
.map(
(k) => LegendItem(
text: k,
color: colorHash(k),
),
)
.toList(),
),
),
],
),
],
),
),
),
)
.toList(),
titleText: "Spending Breakdown",
),
],
),
),
],
),
Padding(
padding: EdgeInsets.all(8),

28
lib/ui/pages/budgets/budgets.dart
View File

@@ -19,9 +19,7 @@ class BudgetListPage extends StatelessWidget {
if (state.budgets.isEmpty) {
return Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text("No budgets"),
],
children: [Text("No budgets")],
);
}
@@ -74,18 +72,18 @@ class BudgetListPage extends StatelessWidget {
right: 16,
bottom: 16,
child: FloatingActionButton(
child: Icon(Icons.add),
onPressed: () {
showDialogOrModal(
context: context,
builder:
(_) => AddBudgetPopup(
onDone: () {
Navigator.of(context).pop();
},
),
);
},
child: Icon(Icons.add),
onPressed: () {
showDialogOrModal(
context: context,
builder:
(_) => AddBudgetPopup(
onDone: () {
Navigator.of(context).pop();
},
),
);
},
),
),
],

66
lib/ui/pages/budgets/edit_budget.dart
View File

@@ -6,45 +6,47 @@ class EditBudgetPopup extends StatefulWidget {
final Budget budget;
final VoidCallback onDone;
const EditBudgetPopup({required this.budget, required this.onDone, super.key});
const EditBudgetPopup({
required this.budget,
required this.onDone,
super.key,
});
@override
EditBudgetState createState() => EditBudgetState();
}
class EditBudgetState extends State<EditBudgetPopup> {
final _budgetNameEditController = TextEditingController();
late bool _includeOtherSpendings;
@override
void initState() {
super.initState();
_budgetNameEditController.text = widget.budget.name;
_includeOtherSpendings = widget.budget.includeOtherSpendings;
}
}
@override
Widget build(BuildContext context) {
return Column(
mainAxisSize: MainAxisSize.min,
children: [
TextField(
decoration: InputDecoration(
hintText: "Name",
),
decoration: InputDecoration(hintText: "Name"),
controller: _budgetNameEditController,
),
Row(
children: [
Text("Include other spendings"),
Switch(
value: _includeOtherSpendings,
onChanged: (value) {
setState(() => _includeOtherSpendings = value);
},
value: _includeOtherSpendings,
onChanged: (value) {
setState(() => _includeOtherSpendings = value);
},
),
],
),
@@ -52,26 +54,28 @@ class EditBudgetState extends State<EditBudgetPopup> {
mainAxisAlignment: MainAxisAlignment.end,
children: [
OutlinedButton(
onPressed: () async {
if (_budgetNameEditController.text.isEmpty) {
return;
}
if (_budgetNameEditController.text == widget.budget.name && _includeOtherSpendings == widget.budget.includeOtherSpendings) {
widget.onDone();
return;
}
widget.budget
..name = _budgetNameEditController.text
..includeOtherSpendings = _includeOtherSpendings;
await upsertBudget(widget.budget);
onPressed: () async {
if (_budgetNameEditController.text.isEmpty) {
return;
}
if (_budgetNameEditController.text == widget.budget.name &&
_includeOtherSpendings ==
widget.budget.includeOtherSpendings) {
widget.onDone();
},
child: Text("Save"),
return;
}
widget.budget
..name = _budgetNameEditController.text
..includeOtherSpendings = _includeOtherSpendings;
await upsertBudget(widget.budget);
widget.onDone();
},
child: Text("Save"),
),
],
),
],
);
}
}
}