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

fix: continued product view

Browse Source
This commit is contained in:
Prajna Prayoga
2024-02-06 21:49:39 +07:00
parent 81231505b1 6e2516d9c8
commit 4d58a7dced
16 changed files with 695 additions and 202 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
lib/application/assets/path_assets.dart
View File

@@ -15,6 +15,7 @@ class PathAssets {
static const String iconPortofolioSharia = 'assets/icons/icon-portofolio-sharia.png';
static const String iconPortofolioMoneyMarket = 'assets/icons/icon-portofolio-moneymarket.png';
static const String iconShield = 'assets/icons/icon-shield.png';
static const String iconFlag = 'assets/icons/icon-flag.png';
/// IMAGE
static const String imgSplashLogo = 'assets/images/splash-logo.png';
@@ -31,4 +32,5 @@ class PathAssets {
static const String imgCarousel = 'assets/images/img-carousel.png';
static const String imgArticles = 'assets/images/img-articles.png';
static const String imgProduct = 'assets/images/img-product.png';
static const String imgSuccessSignup = 'assets/images/img-success-signup.png';
}

140
lib/application/component/button/button_view.dart
View File

@@ -58,78 +58,80 @@ class ButtonView extends StatelessWidget {
final widthPrefix =
this.widthPrefix ?? (heightWrapContent ? width! / 4.7 : _widthBtn / 16);
return Container(
margin: EdgeInsets.symmetric(vertical: marginVertical ?? 32.0),
width: width ?? _widthBtn,
height: heightWrapContent ? null : height ?? _heightBtn,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
disabledBackgroundColor: isOutlined ? Colors.white : color.surface,
padding: contentPadding,
backgroundColor: backgroundColor ??
(isOutlined
? Colors.white
: isSecondaryColor
? ColorPalette.grey
: ColorPalette.primary),
elevation: 0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(sizeBorderRadius ?? 48),
side: isOutlined
? BorderSide(
color: borderColor ?? (disabled
? color.surface
: isSecondaryColor
? ColorPalette.greyBorder
: ColorPalette.primary),
)
: BorderSide.none,
return Center(
child: Container(
margin: EdgeInsets.symmetric(vertical: marginVertical ?? 24.0),
width: width ?? _widthBtn,
height: heightWrapContent ? null : height ?? _heightBtn,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
disabledBackgroundColor: isOutlined ? Colors.white : color.surface,
padding: contentPadding,
backgroundColor: backgroundColor ??
(isOutlined
? Colors.white
: isSecondaryColor
? ColorPalette.grey
: ColorPalette.primary),
elevation: 0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(sizeBorderRadius ?? 48),
side: isOutlined
? BorderSide(
color: borderColor ?? (disabled
? color.surface
: isSecondaryColor
? ColorPalette.greyBorder
: ColorPalette.primary),
)
: BorderSide.none,
),
),
),
onPressed: disabled ? null : onPressed,
child: Row(
mainAxisAlignment: mainAxisAlignmentContent ??
(prefixIcon != null
? MainAxisAlignment.center
: suffixIcon != null
? MainAxisAlignment.end
: MainAxisAlignment.center),
children: [
if (prefixIcon != null) ...[
prefixIcon!,
SizedBox(width: widthPrefix),
] else
Container(),
Flexible(
child: Text(
name,
textAlign: textAlign,
maxLines: maxLines,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: textSize ?? 16,
fontWeight: textWeight,
color: textColor ??
(disabled && isOutlined
? color.primary
: disabled
? Colors.white
: isOutlined && isSecondaryColor
? ColorPalette.blackFont
: isOutlined
? color.primary
: isSecondaryColor
? Colors.white
: Colors.white),
onPressed: disabled ? null : onPressed,
child: Row(
mainAxisAlignment: mainAxisAlignmentContent ??
(prefixIcon != null
? MainAxisAlignment.center
: suffixIcon != null
? MainAxisAlignment.end
: MainAxisAlignment.center),
children: [
if (prefixIcon != null) ...[
prefixIcon!,
SizedBox(width: widthPrefix),
] else
Container(),
Flexible(
child: Text(
name,
textAlign: textAlign,
maxLines: maxLines,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: textSize ?? 16,
fontWeight: textWeight,
color: textColor ??
(disabled && isOutlined
? color.primary
: disabled
? Colors.white
: isOutlined && isSecondaryColor
? ColorPalette.blackFont
: isOutlined
? color.primary
: isSecondaryColor
? Colors.white
: Colors.white),
),
),
),
),
if (suffixIcon != null) ...[
SizedBox(width: widthSuffix),
suffixIcon!
] else
Container()
],
if (suffixIcon != null) ...[
SizedBox(width: widthSuffix),
suffixIcon!
] else
Container()
],
),
),
),
);

146
lib/application/component/otp/otp_view.dart Normal file
View File

@@ -0,0 +1,146 @@
import 'package:cims_apps/application/component/otp/otp_viewmodel.dart';
import 'package:cims_apps/application/component/text_caption/text_caption.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/auth/registration/view/registration_password_view.dart';
import 'package:flutter/material.dart';
import 'package:pinput/pinput.dart';
import 'package:provider/provider.dart';
class OtpView extends StatelessWidget {
final String title;
final String? contentTitle, contentSubtitle;
const OtpView({
Key? key,
required this.title,
this.contentTitle,
this.contentSubtitle,
}) : super(key: key);
Widget _otpContent(BuildContext context, OtpViewModel provider) {
return Form(
key: provider.formKey,
child: Column(
children: [
Pinput(
length: 4,
controller: provider.ctrlPin,
focusNode: provider.focusNode,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
validator: (value) {
if (value!.isEmpty) {
return 'Pin must be complete';
}
return null;
},
defaultPinTheme: PinTheme(
textStyle: const TextStyle(
color: ColorPalette.slate800,
fontSize: 24,
fontWeight: FontWeight.bold,
),
width: SizeConfig.width * .19,
height: SizeConfig.height * .08,
decoration: BoxDecoration(
border: Border.all(color: const Color(0xFFE2E8F0)),
borderRadius: BorderRadius.circular(8),
),
),
errorPinTheme: PinTheme(
textStyle: const TextStyle(
color: ColorPalette.slate800,
fontSize: 24,
fontWeight: FontWeight.bold,
),
width: SizeConfig.width * .19,
height: SizeConfig.height * .08,
decoration: BoxDecoration(
border: Border.all(color: Colors.redAccent),
borderRadius: BorderRadius.circular(8),
),
),
onCompleted: (pin) => provider.enableButton(),
onChanged: (value) {
if (provider.ctrlPin.length != 4) {
provider.enableButton(isActive: false);
}
},
),
Container(
margin: const EdgeInsets.symmetric(vertical: 32.0),
width: SizeConfig.width,
height: SizeConfig.height * .07,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
elevation: 0,
backgroundColor: ColorPalette.primary,
),
onPressed: !provider.buttonIsActive
? null
: () {
if (provider.formKey.currentState!.validate()) {
final pin = provider.ctrlPin.text;
provider.validateOtp(pin).then((value) {
if (value) {
routePush(context,
page: const RegistrationPasswordView(),
routeType: RouteType.pushReplace);
} else {
provider.ctrlPin.clear();
}
});
}
},
child: const Text(
'Verify',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
),
],
));
}
@override
Widget build(BuildContext context) {
return ChangeNotifierProvider(
create: (context) => OtpViewModel(),
builder: (context, child) {
return Scaffold(
appBar: AppBar(
title: Text(title),
),
body: Container(
padding: const EdgeInsets.all(16.0),
child:
Consumer<OtpViewModel>(builder: (context, provider, child) {
return Column(
children: [
TextCaption(
title: contentTitle ?? '',
subtitle: contentSubtitle ?? '',
),
_otpContent(context, provider),
TextButton(
onPressed: () {
provider.ctrlPin.clear();
},
child: const Text(
'Resend Code',
style: TextStyle(
fontWeight: FontWeight.w700,
),
))
],
);
}),
),
);
});
}
}

22
lib/application/component/otp/otp_viewmodel.dart Normal file
View File

@@ -0,0 +1,22 @@
import 'package:flutter/material.dart';
class OtpViewModel extends ChangeNotifier {
var formKey = GlobalKey<FormState>();
var focusNode = FocusNode();
bool buttonIsActive = false;
TextEditingController ctrlPin = TextEditingController();
Future<bool> validateOtp(String pin) async {
final pinLength = pin.length;
if (pinLength == 4) {
return true;
}
return false;
}
void enableButton({bool isActive = true}) {
buttonIsActive = isActive;
notifyListeners();
}
}

9
lib/application/component/text_caption/text_caption.dart
View File

@@ -3,10 +3,14 @@ import 'package:flutter/material.dart';
class TextCaption extends StatelessWidget {
final String title, subtitle;
final TextAlign? textAlignSubtitle;
final CrossAxisAlignment? crossAxisAlignment;
const TextCaption({
Key? key,
required this.title,
this.subtitle = '',
this.textAlignSubtitle,
this.crossAxisAlignment,
}) : super(key: key);
@override
@@ -14,7 +18,7 @@ class TextCaption extends StatelessWidget {
return Padding(
padding: const EdgeInsets.only(bottom: 32.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
crossAxisAlignment: crossAxisAlignment ?? CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
@@ -30,10 +34,11 @@ class TextCaption extends StatelessWidget {
padding: const EdgeInsets.only(top: 8.0),
child: Text(
subtitle,
textAlign: textAlignSubtitle ?? TextAlign.start,
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.w500,
color: ColorPalette.slate800,
color: ColorPalette.slate500,
),
),
)

82
lib/application/component/text_form/text_form_view.dart
View File

@@ -14,7 +14,7 @@ class TextFormView extends StatelessWidget {
final String? hintText, errorText;
final TextEditingController? ctrl;
final Widget? suffixIcon, suffixLable;
final Widget? prefixIcon;
final Widget? prefixIcon, prefix;
final TextInputType? keyboardType;
final FormFieldValidator<String>? validator;
final bool obscureText;
@@ -70,7 +70,8 @@ class TextFormView extends StatelessWidget {
this.disableColor = false,
this.enableInteractiveSelection = true,
this.focusNode,
this.isTextAlignCenter = false})
this.isTextAlignCenter = false,
this.prefix})
: super(key: key);
@override
@@ -94,12 +95,12 @@ class TextFormView extends StatelessWidget {
name,
style: const TextStyle(
fontSize: 16,
color: ColorPalette.greyLight,
// color: ColorPalette.greyLight,
),
),
suffixLable ??
const Text(
" * ",
"",
style: TextStyle(
fontSize: 16,
color: Colors.red,
@@ -148,46 +149,47 @@ class TextFormView extends StatelessWidget {
enableInteractiveSelection: enableInteractiveSelection,
textAlign: isTextAlignCenter ? TextAlign.center : TextAlign.left,
decoration: InputDecoration(
helperText: helperText,
errorStyle: errorStyle,
errorText: errorText,
errorMaxLines: 2,
hintStyle: hintTextStyle ??
const TextStyle(
fontSize: 14,
color: ColorPalette.greyFont,
fontWeight: FontWeight.normal,
helperText: helperText,
errorStyle: errorStyle,
errorText: errorText,
errorMaxLines: 2,
hintStyle: hintTextStyle ??
const TextStyle(
fontSize: 14,
color: ColorPalette.greyFont,
fontWeight: FontWeight.normal,
),
isDense: true,
hintText: hintText,
filled: true,
fillColor: enabled && disableColor == false
? Colors.white
: const Color.fromARGB(255, 233, 236, 239),
disabledBorder: OutlineInputBorder(
borderRadius: _borderRadius,
borderSide: BorderSide(
color: disabledborderColor ?? ColorPalette.greyBorder,
),
isDense: true,
hintText: hintText,
filled: true,
fillColor: enabled && disableColor == false
? Colors.white
: const Color.fromARGB(255, 233, 236, 239),
disabledBorder: OutlineInputBorder(
borderRadius: _borderRadius,
borderSide: BorderSide(
color: disabledborderColor ?? ColorPalette.greyBorder,
),
),
enabledBorder: OutlineInputBorder(
borderRadius: _borderRadius,
borderSide: BorderSide(
color: enabledborderColor ?? ColorPalette.greyBorder,
enabledBorder: OutlineInputBorder(
borderRadius: _borderRadius,
borderSide: BorderSide(
color: enabledborderColor ?? ColorPalette.greyBorder,
),
),
),
focusedBorder: OutlineInputBorder(
borderRadius: _borderRadius,
borderSide: BorderSide(
color: focusedBorderColor ?? ColorPalette.greyBorder,
focusedBorder: OutlineInputBorder(
borderRadius: _borderRadius,
borderSide: BorderSide(
color: focusedBorderColor ?? ColorPalette.greyBorder,
),
),
),
border: OutlineInputBorder(borderRadius: _borderRadius),
suffixIcon: suffixIcon,
prefixIcon: prefixIcon,
suffixIconConstraints: suffixIconConstraints,
prefixIconConstraints: preffixIconConstraints,
),
border: OutlineInputBorder(borderRadius: _borderRadius),
suffixIcon: suffixIcon,
prefixIcon: prefixIcon,
suffixIconConstraints: suffixIconConstraints,
prefixIconConstraints: preffixIconConstraints,
prefix: prefix,
contentPadding: EdgeInsets.zero),
)
],
);

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

@@ -73,6 +73,7 @@ class ColorPalette {
static const Color chathamsBlue = Color(0xFF285BB9);
static const Color background = Color(0xFFDADADA);
static const Color backgroundBlueLight = Color(0xFFEBF3FD);
static const Color slate500 = Color(0xFF64748B);
static const Color blue50 = Color(0xFFEFF6FF);
static const Color blue200 = Color(0xFFBFDBFE);
static const Color slate50 = Color(0xFFF8FAFC);