fix: product view

This commit is contained in:
Prajna Prayoga 2024-03-06 16:43:02 +07:00
parent e513df325c
commit e441c56bab
4 changed files with 172 additions and 102 deletions

View File

@ -190,6 +190,18 @@ class TextFormView extends StatelessWidget {
color: focusedBorderColor ?? ColorPalette.greyBorder, color: focusedBorderColor ?? ColorPalette.greyBorder,
), ),
), ),
errorBorder: OutlineInputBorder(
borderRadius: _borderRadius,
borderSide: BorderSide(
color: ColorPalette.red600
)
),
focusedErrorBorder: OutlineInputBorder(
borderRadius: _borderRadius,
borderSide: BorderSide(
color: ColorPalette.red600
)
),
border: OutlineInputBorder(borderRadius: _borderRadius), border: OutlineInputBorder(borderRadius: _borderRadius),
suffixIcon: suffixIcon, suffixIcon: suffixIcon,
prefixIcon: prefixIcon, prefixIcon: prefixIcon,

View File

@ -52,7 +52,7 @@ class PhoneNumberView extends StatelessWidget {
width: SizeConfig.width * .23, width: SizeConfig.width * .23,
padding: padding:
const EdgeInsets.symmetric(horizontal: 16.0), const EdgeInsets.symmetric(horizontal: 16.0),
margin: const EdgeInsets.only(right: 16, left: 2, top: 2, bottom: 2), margin: const EdgeInsets.only(right: 16, left: 1, top: 1, bottom: 1),
decoration: const BoxDecoration( decoration: const BoxDecoration(
color: ColorPalette.grey, color: ColorPalette.grey,
borderRadius: BorderRadius.only( borderRadius: BorderRadius.only(

View File

@ -50,7 +50,7 @@ class _HomeViewState extends State<HomeView> {
]; ];
StepVerification listStepVerification = StepVerification listStepVerification =
StepVerification(0, ['Registration', '', 'Verification', '', 'Complete']); StepVerification(1, ['Registration', '', 'Verification', '', 'Complete']);
List<Article> listArticle = [ List<Article> listArticle = [
Article( Article(
@ -78,7 +78,8 @@ class _HomeViewState extends State<HomeView> {
onStretchTrigger: () async { onStretchTrigger: () async {
}, },
expandedHeight: 325, expandedHeight: 325,
leading: SizedBox(), collapsedHeight: 325,
leading: const SizedBox(),
surfaceTintColor: ColorPalette.slate50, surfaceTintColor: ColorPalette.slate50,
backgroundColor: ColorPalette.slate50, backgroundColor: ColorPalette.slate50,
flexibleSpace: FlexibleSpaceBar( flexibleSpace: FlexibleSpaceBar(
@ -291,6 +292,7 @@ class _HomeViewState extends State<HomeView> {
child: Column( child: Column(
children: [ children: [
stepVerification(), stepVerification(),
if(listStepVerification.currentStep < 3)
const SizedBox( const SizedBox(
height: 24, height: 24,
), ),
@ -303,6 +305,7 @@ class _HomeViewState extends State<HomeView> {
Icon( Icon(
Icons.verified, Icons.verified,
size: 18, size: 18,
color: ColorPalette.slate300,
), ),
SizedBox( SizedBox(
width: 12, width: 12,
@ -336,6 +339,7 @@ class _HomeViewState extends State<HomeView> {
Icon( Icon(
Icons.verified, Icons.verified,
size: 18, size: 18,
color: ColorPalette.slate300,
), ),
SizedBox( SizedBox(
width: 12, width: 12,
@ -400,11 +404,11 @@ class _HomeViewState extends State<HomeView> {
borderRadius: BorderRadius.circular(12)), borderRadius: BorderRadius.circular(12)),
child: Column( child: Column(
children: [ children: [
Text( const Text(
"Let's start registering your data to start mutual fund investment at PT Gemilang Indonesia", "Let's start registering your data to start mutual fund investment at PT Gemilang Indonesia",
style: TextStyle(color: ColorPalette.slate500), style: TextStyle(color: ColorPalette.slate500),
), ),
SizedBox( const SizedBox(
height: 16, height: 16,
), ),
ButtonView( ButtonView(
@ -412,9 +416,9 @@ class _HomeViewState extends State<HomeView> {
width: SizeConfig.width, width: SizeConfig.width,
marginVertical: 0, marginVertical: 0,
heightWrapContent: true, heightWrapContent: true,
contentPadding: EdgeInsets.all(12), contentPadding: const EdgeInsets.all(12),
onPressed: () { onPressed: () {
routePush(context, page: InitialRegistrationStep()); routePush(context, page: const InitialRegistrationStep());
}, },
) )
], ],
@ -430,18 +434,12 @@ class _HomeViewState extends State<HomeView> {
return Row( return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: listStepVerification.nameStep.asMap().entries.map((e) { children: List.generate(
if(e.key == 1 || e.key == 3){ listStepVerification.nameStep.length,
return SizedBox( (index) {
width: 30, print(index % 2);
height: 30, if (index % 2 == 0) {
child: Divider( final currentStep = index ~/ 2;
color: listStepVerification.currentStep >= e.key
? const Color(0xff2563EB)
: const Color(0xffCBD5E1),
),
);
}else{
return Column( return Column(
children: [ children: [
Container( Container(
@ -449,35 +447,47 @@ class _HomeViewState extends State<HomeView> {
height: 30, height: 30,
decoration: BoxDecoration( decoration: BoxDecoration(
shape: BoxShape.circle, shape: BoxShape.circle,
color: listStepVerification.currentStep <= e.key color: listStepVerification.currentStep <= currentStep
? Colors.white ? Colors.white
: const Color(0xff2563EB), : const Color(0xff2563EB),
border: Border.all( border: Border.all(
color: listStepVerification.currentStep < e.key color: listStepVerification.currentStep < currentStep
? const Color(0xffCBD5E1) ? const Color(0xffCBD5E1)
: const Color(0xff2563EB), : const Color(0xff2563EB),
width: 2)), width: 2,
child: listStepVerification.currentStep <= e.key ),
),
child: listStepVerification.currentStep <= currentStep
? const SizedBox() ? const SizedBox()
: const Icon( : const Icon(
Icons.done_rounded, Icons.done_rounded,
color: Colors.white, color: Colors.white,
), ),
), ),
const SizedBox( const SizedBox(height: 8),
height: 8,
),
Text( Text(
e.value, listStepVerification.nameStep[index],
style: TextStyle( style: TextStyle(
color: listStepVerification.currentStep == e.key color: listStepVerification.currentStep == currentStep
? const Color(0xff2563EB) ? const Color(0xff2563EB)
: Colors.black), : Colors.black,
) ),
),
], ],
); );
} else {
return SizedBox(
width: 30,
height: 30,
child: Divider(
color: listStepVerification.currentStep > index ~/ 2
? const Color(0xff2563EB)
: const Color(0xffCBD5E1),
),
);
} }
}).toList(), },
),
); );
} }
@ -601,7 +611,7 @@ class _HomeViewState extends State<HomeView> {
color: ColorPalette.green100), color: ColorPalette.green100),
child: Text( child: Text(
article.type, article.type,
style: TextStyle( style: const TextStyle(
fontWeight: FontWeight.w600, fontWeight: FontWeight.w600,
color: ColorPalette.green500), color: ColorPalette.green500),
), ),

View File

@ -13,6 +13,7 @@ import 'package:cims_apps/features/dashboard/dashboard_account/view/product/view
import 'package:cims_apps/features/dashboard/dashboard_account/view/product/view/step_subscribe/select_goal_investing.dart'; import 'package:cims_apps/features/dashboard/dashboard_account/view/product/view/step_subscribe/select_goal_investing.dart';
import 'package:cims_apps/features/dashboard/dashboard_account/view/product/view_model/product_view_model.dart'; import 'package:cims_apps/features/dashboard/dashboard_account/view/product/view_model/product_view_model.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:group_button/group_button.dart'; import 'package:group_button/group_button.dart';
import 'package:provider/provider.dart'; import 'package:provider/provider.dart';
@ -79,6 +80,8 @@ class _ProductViewState extends State<ProductView> {
}); });
} }
double currentScroll = 0;
@override @override
void initState() { void initState() {
machineController.text = NumberFormatter.numberCurrency(100000, 'Rp ', 'id_ID', decimalDigits: 0); machineController.text = NumberFormatter.numberCurrency(100000, 'Rp ', 'id_ID', decimalDigits: 0);
@ -104,21 +107,45 @@ class _ProductViewState extends State<ProductView> {
return ChangeNotifierProvider( return ChangeNotifierProvider(
create: (context) => ProductViewModel(), create: (context) => ProductViewModel(),
child: Scaffold( child: Scaffold(
body: SizedBox( body: NotificationListener<ScrollNotification>(
child: Stack( onNotification: (notification) {
children: [ setState(() {
const ImageView(image: PathAssets.imgDashboardAccount), currentScroll = notification.metrics.pixels;
Column( });
children: [ return false;
const SizedBox( },
height: 50, child: CustomScrollView(
slivers: [
SliverAppBar(
toolbarHeight: 70,
expandedHeight: 170,
leadingWidth: 0,
floating: false,
automaticallyImplyLeading: false,
title: AnimatedCrossFade(
firstChild: Text(
widget.selectedProduct.name ?? '',
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w700,
fontSize: 18
), ),
const Padding( ),
padding: EdgeInsets.symmetric(horizontal: 24), secondChild: Padding(
child: Row( padding: const EdgeInsets.only(left: 8),
mainAxisAlignment: MainAxisAlignment.spaceBetween, child: BackButtonView(),
children: [ ),
BackButtonView(), crossFadeState: currentScroll >= 85 ? CrossFadeState.showFirst : CrossFadeState.showSecond,
duration: Duration(milliseconds: 200)
),
centerTitle: false,
snap: false,
pinned: true,
backgroundColor: Color(0xFF1745C8).withOpacity(currentScroll >= 95 ? 1 : currentScroll / 95),
surfaceTintColor: ColorPalette.primary,
actions: [
Wrap( Wrap(
spacing: 12, spacing: 12,
children: [ children: [
@ -126,25 +153,43 @@ class _ProductViewState extends State<ProductView> {
Icon(Icons.file_download_outlined, 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) Icon(Icons.star_outline_rounded, color: ColorPalette.blue200, size: 32)
], ],
) ),
SizedBox(width: 24,)
], ],
), flexibleSpace: Opacity(
), opacity: currentScroll > 0 ? ((95 - currentScroll) / 95) > 0.01 ? ((95 - currentScroll) / 95) : 0 : 1,
const SizedBox( child: Stack(
height: 24, children: [
), ImageView(image: PathAssets.imgDashboardAccount, width: SizeConfig.width, height: 200),
Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
headContainer(), headContainer(),
const SizedBox( const SizedBox(
height: 24, height: 24,
), ),
Expanded( Container(
child: contentContainer() height: 12,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(12),
topRight: Radius.circular(12)
)
),
) )
], ],
) )
], ],
), ),
), ),
),
SliverToBoxAdapter(
child: contentContainer(),
)
],
),
),
bottomNavigationBar: !widget.seeMore ? bottomNavigationBar: !widget.seeMore ?
Container( Container(
height: SizeConfig.height * .1, height: SizeConfig.height * .1,
@ -220,8 +265,11 @@ class _ProductViewState extends State<ProductView> {
decoration: BoxDecoration( decoration: BoxDecoration(
color: Colors.white, color: Colors.white,
), ),
child: ListView( child: Column(
children: [ children: [
const SizedBox(
height: 12,
),
ProductChartView( ProductChartView(
tabType: listTab[selectedTab], tabType: listTab[selectedTab],
lastTime: selectedTime.completeName, lastTime: selectedTime.completeName,