Working api call to backend
This commit is contained in:
Nathan Anderson
@@ -0,0 +1,253 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
import 'package:helpers/helpers.dart';
|
||||
import 'package:rluv/features/budget/widgets/add_transaction_dialog.dart';
|
||||
import 'package:rluv/features/budget/widgets/budget_net_bar.dart';
|
||||
import 'package:rluv/global/styles.dart';
|
||||
import 'package:rluv/global/utils.dart';
|
||||
|
||||
import '../../../global/store.dart';
|
||||
|
||||
class BudgetOverviewScreen extends ConsumerStatefulWidget {
|
||||
const BudgetOverviewScreen({super.key});
|
||||
|
||||
@override
|
||||
ConsumerState<BudgetOverviewScreen> createState() =>
|
||||
_BudgetOverviewScreenState();
|
||||
}
|
||||
|
||||
class _BudgetOverviewScreenState extends ConsumerState<BudgetOverviewScreen> {
|
||||
final budgetListScrollController = ScrollController();
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final budgetCategoriesRef = ref.watch(Store().budgetCategoriesProvider);
|
||||
final screen = BuildMedia(context).size;
|
||||
return budgetCategoriesRef.when(
|
||||
data: ((budgetCategories) => RefreshIndicator(
|
||||
onRefresh: () async {
|
||||
final _ = await ref.refresh(Store().dashboardProvider.future);
|
||||
},
|
||||
child: Column(
|
||||
children: [
|
||||
/// TOP HALF, TITLE & OVERVIEW
|
||||
Container(
|
||||
height: screen.height * 0.33,
|
||||
width: screen.width,
|
||||
color: Styles.purpleNurple,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: [
|
||||
const Spacer(flex: 2),
|
||||
Text(
|
||||
formatDate(DateTime.now()),
|
||||
style: const TextStyle(
|
||||
fontSize: 16, color: Styles.electricBlue),
|
||||
),
|
||||
const Spacer(),
|
||||
const Text('MONTHLY',
|
||||
style: TextStyle(
|
||||
fontSize: 42, color: Styles.electricBlue)),
|
||||
const Spacer(flex: 2),
|
||||
const BudgetNetBar(isPositive: true, net: 5024.64),
|
||||
const Spacer(),
|
||||
const BudgetNetBar(isPositive: false, net: 2004.37),
|
||||
const Spacer(),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
||||
/// BOTTOM HALF, BUDGET BREAKDOWN
|
||||
Expanded(
|
||||
child: SizedBox(
|
||||
width: screen.width,
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.max,
|
||||
children: [
|
||||
Padding(
|
||||
padding: const EdgeInsets.all(14.0),
|
||||
child: Container(
|
||||
decoration: BoxDecoration(
|
||||
color: Styles.blushingPink,
|
||||
borderRadius: BorderRadius.circular(16.0),
|
||||
),
|
||||
child: Column(
|
||||
children: [
|
||||
const Padding(
|
||||
padding: EdgeInsets.all(8.0),
|
||||
child: Text(
|
||||
'BUDGET',
|
||||
style: TextStyle(
|
||||
fontSize: 28,
|
||||
color: Styles.electricBlue),
|
||||
),
|
||||
),
|
||||
Scrollbar(
|
||||
controller: budgetListScrollController,
|
||||
thumbVisibility: true,
|
||||
child: ListView(
|
||||
controller: budgetListScrollController,
|
||||
shrinkWrap: true,
|
||||
children: [
|
||||
for (final budget in budgetCategories)
|
||||
Row(
|
||||
children: [
|
||||
Padding(
|
||||
padding:
|
||||
const EdgeInsets.all(8.0),
|
||||
child: SizedBox(
|
||||
width: 85,
|
||||
child: Text(
|
||||
budget.name,
|
||||
style: const TextStyle(
|
||||
fontSize: 16.0),
|
||||
),
|
||||
),
|
||||
),
|
||||
AnimatedContainer(
|
||||
duration: const Duration(
|
||||
milliseconds: 500),
|
||||
child: Expanded(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.only(
|
||||
right: 18.0),
|
||||
child: Stack(
|
||||
children: [
|
||||
Container(
|
||||
height: 30,
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.black,
|
||||
borderRadius:
|
||||
BorderRadius
|
||||
.circular(10.0),
|
||||
),
|
||||
),
|
||||
Padding(
|
||||
padding:
|
||||
const EdgeInsets.all(
|
||||
2.0),
|
||||
child: Container(
|
||||
height: 26,
|
||||
decoration:
|
||||
BoxDecoration(
|
||||
color: Styles
|
||||
.emptyBarGrey,
|
||||
borderRadius:
|
||||
BorderRadius
|
||||
.circular(
|
||||
10.0),
|
||||
),
|
||||
),
|
||||
),
|
||||
Padding(
|
||||
padding:
|
||||
const EdgeInsets.all(
|
||||
2.0),
|
||||
child: SizedBox(
|
||||
height: 26,
|
||||
child:
|
||||
FractionallySizedBox(
|
||||
heightFactor: 1.0,
|
||||
widthFactor: 0.5,
|
||||
child: Container(
|
||||
decoration:
|
||||
BoxDecoration(
|
||||
color:
|
||||
budget.color,
|
||||
borderRadius:
|
||||
BorderRadius
|
||||
.circular(
|
||||
10.0),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
)),
|
||||
)
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 20),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
const Spacer(),
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(bottom: 24.0),
|
||||
child: Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.only(
|
||||
left: 20.0, right: 15.0),
|
||||
child: Container(
|
||||
height: 70,
|
||||
decoration: BoxDecoration(
|
||||
color: Styles.seaweedGreen,
|
||||
borderRadius: BorderRadius.circular(15.0),
|
||||
),
|
||||
child: InkWell(
|
||||
child: const Center(
|
||||
child: Padding(
|
||||
padding: EdgeInsets.symmetric(
|
||||
horizontal: 20.0, vertical: 14.0),
|
||||
child: Text(
|
||||
'Transaction History',
|
||||
textAlign: TextAlign.center,
|
||||
style: TextStyle(fontSize: 25),
|
||||
),
|
||||
),
|
||||
),
|
||||
onTap: () {
|
||||
printRed('FIXME');
|
||||
},
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(right: 20.0),
|
||||
child: Container(
|
||||
decoration: BoxDecoration(
|
||||
color: Styles.purpleNurple,
|
||||
borderRadius: BorderRadius.circular(40.0),
|
||||
),
|
||||
height: 80,
|
||||
width: 80,
|
||||
child: IconButton(
|
||||
icon: const Icon(
|
||||
Icons.add,
|
||||
size: 48,
|
||||
color: Styles.lavender,
|
||||
),
|
||||
onPressed: () {
|
||||
showDialog(
|
||||
context: context,
|
||||
builder: (BuildContext context) {
|
||||
return const AddTransactionDialog();
|
||||
},
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
)
|
||||
],
|
||||
),
|
||||
)),
|
||||
loading: () => const CircularProgressIndicator(),
|
||||
error: (error, stackTrace) => Text('Error: $error, \n\n$stackTrace'),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,162 @@
|
||||
import 'package:flutter/foundation.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
|
||||
import '../../../global/api.dart';
|
||||
import '../../../global/store.dart';
|
||||
import '../../../global/styles.dart';
|
||||
import '../../../models/budget_category_model.dart';
|
||||
import '../../../models/transaction_model.dart';
|
||||
|
||||
class AddTransactionDialog extends ConsumerStatefulWidget {
|
||||
const AddTransactionDialog({super.key});
|
||||
|
||||
@override
|
||||
ConsumerState<AddTransactionDialog> createState() =>
|
||||
_AddTransactionDialogState();
|
||||
}
|
||||
|
||||
class _AddTransactionDialogState extends ConsumerState<AddTransactionDialog> {
|
||||
final amountController = TextEditingController();
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final List<BudgetCategory> budgetCategories =
|
||||
ref.read(Store().budgetCategoriesProvider).requireValue;
|
||||
return Dialog(
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(10.0),
|
||||
side: const BorderSide(color: Styles.purpleNurple, width: 5.0),
|
||||
),
|
||||
child: StatefulBuilder(builder: (context, setState) {
|
||||
TransactionType transactionType = TransactionType.expense;
|
||||
BudgetCategory selectedBudgetCategory = budgetCategories.first;
|
||||
return Container(
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(10.0),
|
||||
color: Styles.purpleNurple,
|
||||
),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(12.0),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Row(children: [
|
||||
InkWell(
|
||||
onTap: transactionType == TransactionType.expense
|
||||
? null
|
||||
: () {
|
||||
setState(() =>
|
||||
transactionType = TransactionType.expense);
|
||||
},
|
||||
child: AnimatedContainer(
|
||||
height: 30,
|
||||
width: 70,
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: const BorderRadius.only(
|
||||
topLeft: Radius.circular(8.0),
|
||||
topRight: Radius.circular(8.0)),
|
||||
color: transactionType == TransactionType.expense
|
||||
? Styles.lavender
|
||||
: Styles.sand),
|
||||
duration: const Duration(milliseconds: 300),
|
||||
child: const Padding(
|
||||
padding: EdgeInsets.all(8.0),
|
||||
child: Text('Expense'),
|
||||
),
|
||||
),
|
||||
),
|
||||
InkWell(
|
||||
onTap: transactionType == TransactionType.income
|
||||
? null
|
||||
: () {
|
||||
setState(
|
||||
() => transactionType = TransactionType.income);
|
||||
},
|
||||
child: AnimatedContainer(
|
||||
height: 30,
|
||||
width: 70,
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: const BorderRadius.only(
|
||||
topLeft: Radius.circular(8.0),
|
||||
topRight: Radius.circular(8.0)),
|
||||
color: transactionType == TransactionType.income
|
||||
? Styles.lavender
|
||||
: Styles.sand),
|
||||
duration: const Duration(milliseconds: 300),
|
||||
child: const Padding(
|
||||
padding: EdgeInsets.all(8.0),
|
||||
child: Text('Income'),
|
||||
),
|
||||
),
|
||||
),
|
||||
]),
|
||||
Row(
|
||||
children: [
|
||||
const Text('Amount:'),
|
||||
SizedBox(
|
||||
width: 80,
|
||||
child: TextField(
|
||||
controller: amountController,
|
||||
decoration: InputDecoration(
|
||||
fillColor: Styles.lavender,
|
||||
border: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(10.0),
|
||||
borderSide:
|
||||
const BorderSide(color: Colors.transparent),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
Row(
|
||||
children: [
|
||||
const Padding(
|
||||
padding: EdgeInsets.only(right: 28.0),
|
||||
child: Text('Category:'),
|
||||
),
|
||||
DropdownButton<BudgetCategory>(
|
||||
value: selectedBudgetCategory,
|
||||
items: budgetCategories
|
||||
.map(
|
||||
(e) => DropdownMenuItem(
|
||||
value: e,
|
||||
child: Text(e.name),
|
||||
),
|
||||
)
|
||||
.toList(),
|
||||
onChanged: (BudgetCategory? value) {
|
||||
if (value != null) {
|
||||
if (kDebugMode) {
|
||||
print('${value.name} selected');
|
||||
}
|
||||
setState(() => selectedBudgetCategory = value);
|
||||
}
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
ElevatedButton(
|
||||
child: const Text('Add'),
|
||||
onPressed: () {
|
||||
Api().put(
|
||||
path: 'transactions',
|
||||
data: Transaction(
|
||||
amount: double.parse(amountController.text),
|
||||
addedByUserId: 1,
|
||||
budgetCategoryId: 1,
|
||||
budgetId: 1,
|
||||
date: DateTime.now(),
|
||||
transactionType: transactionType));
|
||||
Navigator.pop(context);
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:helpers/helpers.dart';
|
||||
import 'package:rluv/global/styles.dart';
|
||||
|
||||
class BudgetNetBar extends StatelessWidget {
|
||||
const BudgetNetBar({super.key, required this.isPositive, required this.net});
|
||||
|
||||
final bool isPositive;
|
||||
final double net;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final screenWidth = BuildMedia(context).width;
|
||||
return Container(
|
||||
width: screenWidth * 0.85,
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(10.0),
|
||||
color: isPositive ? Styles.incomeBlue : Styles.expensesOrange,
|
||||
),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 12.0),
|
||||
child:
|
||||
Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
|
||||
Text(
|
||||
isPositive ? 'Income' : 'Expenses',
|
||||
style: const TextStyle(
|
||||
fontSize: 20,
|
||||
),
|
||||
),
|
||||
Text(
|
||||
'\$$net',
|
||||
style: TextStyle(
|
||||
fontSize: 20,
|
||||
color: isPositive ? Styles.incomeGreen : Styles.expensesRed),
|
||||
),
|
||||
]),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user