254 lines
13 KiB
Dart
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'),
|
|
);
|
|
}
|
|
}
|