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

feat: product view wip

Browse Source
This commit is contained in:
Prajna Prayoga 2024-02-05 22:36:16 +07:00
parent 0e7ad81345
commit f407eca735
6 changed files with 500 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
lib/application/component/button/button_back.dart Normal file
View File

@ -0,0 +1,23 @@
import 'package:cims_apps/core/utils/size_config.dart';
import 'package:flutter/material.dart';
class ButtonBack extends StatelessWidget {
const ButtonBack({super.key});
@override
Widget build(BuildContext context) {
return SizedBox(
width: SizeConfig.width * 0.1,
child: IconButton(
style: IconButton.styleFrom(
backgroundColor: Colors.white,
shape: const CircleBorder()
),
onPressed: () {
Navigator.pop(context);
},
icon: const Icon(Icons.arrow_back)
),
);
}
}

10
lib/application/component/text_title/text_title.dart
View File

@ -3,11 +3,13 @@ import 'package:flutter/cupertino.dart';
class TextTitle extends StatelessWidget {
final String title;
final Color color;
final Color? color;
final double? fontSize;
const TextTitle({
Key? key,
required this.title,
required this.color,
this.color,
this.fontSize,
}) : super(key: key);
@override
@ -15,9 +17,9 @@ class TextTitle extends StatelessWidget {
return Text(
title,
style: TextStyle(
fontSize: 20,
fontSize: fontSize ?? 20,
fontWeight: FontWeight.w700,
color: color,
color: color ?? ColorPalette.slate800,
),
);
}

17
lib/application/theme/color_palette.dart
View File

@ -73,6 +73,8 @@ class ColorPalette {
static const Color chathamsBlue = Color(0xFF285BB9);
static const Color background = Color(0xFFDADADA);
static const Color backgroundBlueLight = Color(0xFFEBF3FD);
static const Color blue200 = Color(0xFFBFDBFE);
static const Color slate50 = Color(0xFFF8FAFC);
static const Color slate200 = Color(0xFFE2E8F0);
static const Color slate400 = Color(0xFF94A3B8);
static const Color slate500 = Color(0xFF64748B);
@ -86,4 +88,19 @@ class ColorPalette {
static const Color green100 = Color(0xFFDCFCE7);
static const Color green400 = Color(0xFF4ADE80);
static const Color green500 = Color(0xFF16A34A);
static const Map<String, Color> investTypeColor = {
'Money Market': purple500,
'Shares': orange500,
'Sharia': green500,
'Bonds': cyan500
};
static const Map<String, Color> investTypeBgColor = {
'Money Market': purple100,
'Shares': orange100,
'Sharia': green100,
'Bonds': cyan100
};
}

34
lib/features/dashboard/dashboard_account/view/invest_type/invest_type_view.dart
View File

@ -1,8 +1,11 @@
import 'package:cims_apps/application/assets/path_assets.dart';
import 'package:cims_apps/application/component/button/button_back.dart';
import 'package:cims_apps/application/component/image/image_view.dart';
import 'package:cims_apps/application/component/text_title/text_title.dart';
import 'package:cims_apps/application/theme/color_palette.dart';
import 'package:cims_apps/core/route/route.dart';
import 'package:cims_apps/core/utils/size_config.dart';
import 'package:cims_apps/features/dashboard/dashboard_account/view/product/product_view.dart';
import 'package:flutter/material.dart';
class Product {
@ -49,19 +52,7 @@ class _InvestTypeViewState extends State<InvestTypeView> {
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
SizedBox(
width: SizeConfig.width * 0.1,
child: IconButton(
style: IconButton.styleFrom(
backgroundColor: Colors.white,
shape: const CircleBorder()
),
onPressed: () {
},
icon: const Icon(Icons.arrow_back)
),
),
ButtonBack(),
TextTitle(title: widget.title, color: Colors.white),
SizedBox(
width: SizeConfig.width * 0.1,
@ -84,12 +75,20 @@ class _InvestTypeViewState extends State<InvestTypeView> {
ListView(
shrinkWrap: true,
children: listProduct.asMap().entries.map((e) {
return cardProduct(e.value);
return GestureDetector(
onTap: () {
routePush(context, page: ProductView(widget.title));
},
child: Padding(
padding: EdgeInsets.only(top: e.key != 0 ? 24 : 0),
child: cardProduct(e.value),
),
);
}).toList(),
)
],
),
)
),
],
)
],
@ -192,11 +191,14 @@ class _InvestTypeViewState extends State<InvestTypeView> {
Row(
children: [
Text(
product.priceUnit.toString(),
'Rp${product.priceUnit.toString()}',
style: TextStyle(
fontWeight: FontWeight.w600
),
),
SizedBox(
width: 2,
),
Icon(Icons.trending_up_outlined, size: 18, color: ColorPalette.green400,)
],
)

433
lib/features/dashboard/dashboard_account/view/product/product_view.dart Normal file
View File

@ -0,0 +1,433 @@
import 'dart:math';
import 'package:cims_apps/application/assets/path_assets.dart';
import 'package:cims_apps/application/component/button/button_back.dart';
import 'package:cims_apps/application/component/image/image_view.dart';
import 'package:cims_apps/application/component/text_title/text_title.dart';
import 'package:cims_apps/application/theme/color_palette.dart';
import 'package:cims_apps/core/utils/size_config.dart';
import 'package:flutter/material.dart';
class ProductView extends StatefulWidget {
final String investType;
const ProductView(this.investType, {super.key});
@override
State<ProductView> createState() => _ProductViewState();
}
class _ProductViewState extends State<ProductView> {
int chooseTab = 0;
String chooseTime = '1Y';
int chooseMachine = 0;
List<String> listTime = ['1D', '1M', '3M', 'YTD', '1Y', '3Y', '5Y', '10Y', 'All'];
List<String> listTab = ['NAV', 'AUM'];
List<String> listMachine = ['Monthly Routine', 'Connect Once'];
@override
Widget build(BuildContext context) {
return Scaffold(
body: SizedBox(
width: SizeConfig.width,
height: SizeConfig.height,
child: Stack(
children: [
const ImageView(image: PathAssets.imgDashboardAccount),
Column(
children: [
const SizedBox(
height: 50,
),
const Padding(
padding: EdgeInsets.symmetric(horizontal: 24),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
ButtonBack(),
Wrap(
spacing: 12,
children: [
Icon(Icons.search_rounded, color: ColorPalette.blue200, size: 32),
Icon(Icons.file_download_outlined, color: ColorPalette.blue200, size: 32),
Icon(Icons.star_outline_rounded, color: ColorPalette.blue200, size: 32)
],
)
],
),
),
const SizedBox(
height: 24,
),
headContainer(),
const SizedBox(
height: 24,
),
Expanded(
child: contentContainer()
)
],
)
],
),
),
);
}
Widget headContainer() {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 24),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const Expanded(
child: Row(
children: [
Expanded(
child: Text(
'Gemilang Dana Kas Maxima',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w700,
fontSize: 18
),
),
)
],
),
),
Container(
padding: const EdgeInsets.all(6),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(40),
color: ColorPalette.investTypeBgColor[widget.investType] ?? Colors.white,
border: Border.all(width: 2, color: ColorPalette.investTypeColor[widget.investType] ?? Colors.white)
),
child: Text(
widget.investType,
style: TextStyle(
color: ColorPalette.investTypeColor[widget.investType],
fontWeight: FontWeight.w600
),
),
)
],
),
);
}
Widget contentContainer() {
return Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12),
color: Colors.white,
),
child: ListView(
children: [
Padding(
padding: const EdgeInsets.symmetric(horizontal: 24),
child: Wrap(
spacing: 8,
children: [
Text(listTab[chooseTab]),
const Text('26 Jan 24'),
],
),
),
Center(
child: Padding(
padding: const EdgeInsets.all(24),
child: switchTab(listTab, (value) {
setState(() {
chooseTab = value;
});
}, chooseTab),
),
),
swithTime(),
const SizedBox(
height: 24,
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 24),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
columnInformation('CAGR 1Y', '3,88%'),
columnInformation('Drawdown 1Y', '0%'),
columnInformation('Expense Ratio', '1,99%')
],
),
),
const SizedBox(
height: 16,
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 24),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
columnInformation('Total AUM', '3,88%'),
columnInformation('Avg.Yield Dec 23', '0%'),
columnInformation('Risk Level', '1,99%')
],
),
),
const SizedBox(
height: 24,
),
cardInformation('Informasi Investasi', informationInvest()),
const SizedBox(
height: 24,
),
cardInformation('Informasi Investasi', investCost()),
const SizedBox(
height: 24,
),
cardInformation('Time Machine', timeMachine())
],
),
);
}
Widget switchTab(List<String> dataTab, void Function(int value) onTap, int current) {
return Container(
width: SizeConfig.width,
decoration: BoxDecoration(
border: Border.all(
color: ColorPalette.slate200,
),
borderRadius: BorderRadius.circular(80)
),
child: Stack(
children: [
// AnimatedPositioned(
// duration: const Duration(milliseconds: 200),
// curve: Curves.fastOutSlowIn,
// right: current == dataTab.length - 1 ? 0 : SizeConfig.width * current / dataTab.length - (12 * dataTab.length),
// left: current == 0 ? 0 : SizeConfig.width * current / dataTab.length - (12 * dataTab.length),
// child: Container(
// height: 35,
// decoration: BoxDecoration(
// color: ColorPalette.blue200,
// borderRadius: BorderRadius.circular(80)
// ),
// ),
// ),
Container(
height: 35,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(80)
),
child: Row(
children: dataTab.asMap().entries.map((e) => Expanded(
child: GestureDetector(
onTap: () {
onTap(e.key);
},
child: AnimatedContainer(
duration: Duration(milliseconds: 300),
height: 35,
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(80),
color: e.key == current ? ColorPalette.blue200 : ColorPalette.white
),
child: Text(
e.value,
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: e.key == current ? FontWeight.w700 : FontWeight.w500,
color: e.key == current ? ColorPalette.primary : ColorPalette.slate500
),
),
)
)
)).toList(),
),
)
],
),
);
}
Widget swithTime() {
return Container(
color: ColorPalette.slate50,
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
padding: const EdgeInsets.symmetric(horizontal: 24),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: listTime.map((e) {
return GestureDetector(
onTap: () {
setState(() {
chooseTime = e;
});
},
child: AnimatedContainer(
duration: const Duration(milliseconds: 200),
width: SizeConfig.width * .12,
alignment: Alignment.center,
padding: const EdgeInsets.symmetric(vertical: 4),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(4),
color: chooseTime == e ? ColorPalette.primary : ColorPalette.slate50
),
child: Text(e, style: TextStyle(
color: chooseTime == e ? ColorPalette.white : ColorPalette.slate400,
fontWeight: FontWeight.w700
)),
),
);
}).toList(),
),
)
);
}
Widget columnInformation(String title, String value) {
return Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
title,
maxLines: 1,
style: const TextStyle(
color: ColorPalette.slate400
),
),
const SizedBox(width: 2),
const Icon(Icons.info_outline_rounded, size: 16, color: ColorPalette.slate400)
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(value)
],
)
],
);
}
Widget cardInformation(String title, Widget child) {
return Container(
margin: const EdgeInsets.symmetric(horizontal: 24),
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
border: Border.all(color: ColorPalette.slate200),
borderRadius: BorderRadius.circular(12)
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
TextTitle(title: title, fontSize: 16),
SizedBox(
height: 16,
),
child
],
),
);
}
Widget informationInvest() {
return const Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Minimum Purchase',
style: TextStyle(
color: ColorPalette.slate400,
fontWeight: FontWeight.w600
),
),
Text('Rp10.000')
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Custodian Bank',
style: TextStyle(
color: ColorPalette.slate400,
fontWeight: FontWeight.w600
),
),
Text('HSBC INDONESIA')
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Depository Bank',
style: TextStyle(
color: ColorPalette.slate400,
fontWeight: FontWeight.w600
),
),
Text('BCA')
],
)
],
);
}
Widget investCost(){
return const Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Purchase Commission',
style: TextStyle(
color: ColorPalette.slate400,
fontWeight: FontWeight.w600
),
),
Text('Free')
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Sales Commission',
style: TextStyle(
color: ColorPalette.slate400,
fontWeight: FontWeight.w600
),
),
Text('Free')
],
),
],
);
}
Widget timeMachine() {
return Column(
children: [
switchTab(listMachine, (value) {
setState(() {
chooseMachine = value;
});
},
chooseMachine
)
],
);
}
}