rluv_client/lib/features/budget/screens/budget_overview.dart
2023-07-19 02:16:13 -06:00

254 lines
13 KiB
Dart

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'),
);
}
}