nugrohob825/cims_apps
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: home view, portfolio view, invest type view

Browse Source
This commit is contained in:
Prajna Prayoga
2024-02-05 15:49:02 +07:00
parent 5ee2b8f1f1
commit 0e7ad81345
17 changed files with 1190 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

347
lib/features/dashboard/dashboard_account/view/portfolio/portfolio_view.dart Normal file
View File

@@ -0,0 +1,347 @@
import 'package:cims_apps/application/assets/path_assets.dart';
import 'package:cims_apps/application/component/image/image_view.dart';
import 'package:cims_apps/application/theme/color_palette.dart';
import 'package:cims_apps/core/utils/size_config.dart';
import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';
class CategoryPortofolio {
String name;
int value;
CategoryPortofolio(this.value, this.name);
}
class PortofolioView extends StatefulWidget {
const PortofolioView({super.key});
@override
State<PortofolioView> createState() => _PortofolioViewState();
}
class _PortofolioViewState extends State<PortofolioView> {
List<Color> contentColor = [
ColorPalette.purple500,
ColorPalette.orange500,
ColorPalette.cyan500,
ColorPalette.green500,
];
List<Color> bgContentColor = [
ColorPalette.purple100,
ColorPalette.orange100,
ColorPalette.cyan100,
ColorPalette.green100,
];
bool seePortofolioValue = false;
int touchedIndex = -1;
List<CategoryPortofolio> listCategoryPortofolio = [
CategoryPortofolio(20, 'Money Market'),
CategoryPortofolio(15, 'Shares'),
CategoryPortofolio(8, 'Bonds'),
CategoryPortofolio(50, 'Sharia'),
];
List<String> assetsImage = [
PathAssets.iconPortofolioMoneyMarket,
PathAssets.iconPortofolioShares,
PathAssets.iconPortofolioBonds,
PathAssets.iconPortofolioSharia,
];
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: SizedBox(
width: SizeConfig.width,
height: SizeConfig.height,
child: Stack(
children: [
const ImageView(image: PathAssets.imgDashboardAccount),
Column(
children: [
const SizedBox(
height: 50,
),
const Center(
child: Text(
'Portofolio',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.w700,
color: Colors.white),
),
),
const SizedBox(
height: 40,
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 24),
child: portofolioValue(),
),
Expanded(
child: Container(
margin: const EdgeInsets.only(top: 24),
decoration: const BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(24),
topRight: Radius.circular(24)),
),
child: ListView(
padding: const EdgeInsets.symmetric(vertical: 0),
children: [
Stack(alignment: Alignment.center, children: [
AspectRatio(
aspectRatio: 1.3,
child: PieChart(PieChartData(
pieTouchData: PieTouchData(
touchCallback:
(FlTouchEvent event, pieTouchResponse) {
setState(() {
if (!event.isInterestedForInteractions ||
pieTouchResponse == null ||
pieTouchResponse.touchedSection ==
null) {
touchedIndex = -1;
return;
}
touchedIndex = pieTouchResponse
.touchedSection!.touchedSectionIndex;
});
},
),
borderData: FlBorderData(
show: true,
),
sectionsSpace: 20,
centerSpaceRadius: 100,
sections: sectionsDataPortofolio())),
),
const Column(
children: [
Text('Total Mutual Fund'),
Text('10',
style: TextStyle(
fontSize: 44,
fontWeight: FontWeight.w700)),
],
)
]),
const SizedBox(
height: 12,
),
menuPortofolio(),
const SizedBox(
height: 24,
),
...listColumnPortofolio(),
const SizedBox(
height: 24,
)
],
),
),
)
],
)
],
),
),
);
}
Widget portofolioValue() {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
const Text('Portofolio Value',
style: TextStyle(color: Colors.white)),
const SizedBox(
width: 8,
),
GestureDetector(
onTap: () {
setState(() {
seePortofolioValue = !seePortofolioValue;
});
},
child: const Icon(Icons.visibility_outlined,
color: Color(0xff93C5FD)))
],
),
const SizedBox(
height: 4,
),
Row(
children: [
AnimatedCrossFade(
duration: const Duration(milliseconds: 300),
alignment: Alignment.center,
crossFadeState: seePortofolioValue
? CrossFadeState.showSecond
: CrossFadeState.showFirst,
firstChild: RichText(
text: const TextSpan(
text: 'Rp ',
style: TextStyle(fontSize: 32, color: Color(0xff93C5FD), fontFamily: 'Manrope'),
children: [
TextSpan(
text: '22.500.000',
style: TextStyle(
fontSize: 32,
fontFamily: 'Manrope',
fontWeight: FontWeight.bold,
color: Colors.white
),
)
])),
secondChild: Padding(
padding: const EdgeInsets.symmetric(vertical: 16),
child: Wrap(
spacing: 7,
children: [
for (int i = 0; i < 6; i++)
Container(
width: 12,
height: 12,
decoration: const BoxDecoration(
color: Colors.white, shape: BoxShape.circle),
),
],
),
),
),
],
)
],
);
}
List<PieChartSectionData> sectionsDataPortofolio() {
return listCategoryPortofolio.asMap().entries.map((e) {
final isTouched = e.key == touchedIndex;
final radius = isTouched ? 40.0 : 30.0;
return PieChartSectionData(
color: contentColor[e.key],
value: e.value.value.toDouble(),
title: e.value.name,
showTitle: isTouched,
radius: radius,
titleStyle: const TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
);
}).toList();
}
Widget menuPortofolio() {
return Container(
margin: const EdgeInsets.symmetric(horizontal: 24),
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: const BorderRadius.all(Radius.circular(12)),
boxShadow: [
BoxShadow(
spreadRadius: 2,
blurRadius: 8,
color: const Color(0xff1E293B).withOpacity(0.04))
]),
child: Wrap(
alignment: WrapAlignment.center,
spacing: 12,
children: listCategoryPortofolio.asMap().entries.map((e) {
return Container(
color: Colors.white,
width: SizeConfig.width * 0.18,
child: Column(
children: [
Container(
height: 58,
width: 58,
alignment: Alignment.center,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: bgContentColor[e.key],
),
child: Text(
'${e.value.value} %',
style: TextStyle(
fontWeight: FontWeight.bold,
color: contentColor[e.key]),
),
),
const SizedBox(
height: 8,
),
Text(
e.value.name,
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.center,
)
],
),
);
}).toList(),
),
);
}
List<Widget> listColumnPortofolio() {
return listCategoryPortofolio.asMap().entries.map((e) {
return Column(
children: [
if (e.key > 0) ...[
const Divider(
color: ColorPalette.slate200,
)
],
ListTile(
contentPadding:
const EdgeInsets.symmetric(vertical: 0, horizontal: 24),
leading: ImageView(
image: assetsImage[e.key],
width: SizeConfig.width * .15,
height: SizeConfig.height * .08,
borderRadius: 8,
),
title: Text(
e.value.name,
style: const TextStyle(fontWeight: FontWeight.w600),
),
subtitle: Text(
e.value.name,
style: const TextStyle(
fontWeight: FontWeight.w600, color: Color(0xff94A3B8)),
),
trailing: const Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text(
'Rp 2.000.000',
style: TextStyle(
color: Colors.black,
fontSize: 16,
fontWeight: FontWeight.w700),
),
Text(
'+ Rp 200.000',
style: TextStyle(
fontSize: 14,
color: Color(0xff4ADE80),
fontWeight: FontWeight.w600),
)
],
),
),
],
);
}).toList();
}
}