From 13cb95df1d1c3b7744a06f7ce79f7843698729df Mon Sep 17 00:00:00 2001 From: "mirza.shafique" Date: Wed, 29 Mar 2023 15:04:48 +0300 Subject: [PATCH] edit account and extensions design update --- assets/icons/ic_email.svg | 6 + assets/icons/ic_group_star.svg | 10 + assets/icons/ic_password.svg | 7 + assets/icons/ic_phone_number.svg | 3 + assets/icons/ic_star.svg | 5 + lib/classes/consts.dart | 6 +- lib/config/routes.dart | 3 + lib/views/user/edit_account_page.dart | 184 ++++++++---------- lib/widgets/extensions/extensions_widget.dart | 12 +- 9 files changed, 126 insertions(+), 110 deletions(-) create mode 100644 assets/icons/ic_email.svg create mode 100644 assets/icons/ic_group_star.svg create mode 100644 assets/icons/ic_password.svg create mode 100644 assets/icons/ic_phone_number.svg create mode 100644 assets/icons/ic_star.svg diff --git a/assets/icons/ic_email.svg b/assets/icons/ic_email.svg new file mode 100644 index 0000000..02826d5 --- /dev/null +++ b/assets/icons/ic_email.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/assets/icons/ic_group_star.svg b/assets/icons/ic_group_star.svg new file mode 100644 index 0000000..15b73f0 --- /dev/null +++ b/assets/icons/ic_group_star.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/assets/icons/ic_password.svg b/assets/icons/ic_password.svg new file mode 100644 index 0000000..80b8815 --- /dev/null +++ b/assets/icons/ic_password.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/assets/icons/ic_phone_number.svg b/assets/icons/ic_phone_number.svg new file mode 100644 index 0000000..ebb8c39 --- /dev/null +++ b/assets/icons/ic_phone_number.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/icons/ic_star.svg b/assets/icons/ic_star.svg new file mode 100644 index 0000000..6bc45f3 --- /dev/null +++ b/assets/icons/ic_star.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/lib/classes/consts.dart b/lib/classes/consts.dart index 1e040cd..736e02d 100644 --- a/lib/classes/consts.dart +++ b/lib/classes/consts.dart @@ -101,7 +101,7 @@ class MyAssets { static String bnLogo = "${assetPath}images/bn_logo.svg"; static String icCar = "${assetPath}images/ic_car.svg"; static String icEdit = "${assetPath}icons/ic_edit.svg"; - static String icEmail = "${assetPath}images/ic_email.svg"; + static String icEmail = "${assetPath}icons/ic_email.svg"; static String icLock = "${assetPath}images/ic_lock.svg"; static String icLogout = "${assetPath}images/ic_logout.svg"; static String icMobile = "${assetPath}images/ic_mobile.svg"; @@ -109,6 +109,10 @@ class MyAssets { static String icNotification = "${assetPath}images/ic_notification.svg"; static String logo = "${assetPath}images/logo.svg"; static String splashLogo = "${assetPath}images/splash_logo.svg"; + static String icGroupStar = "${assetPath}icons/ic_group_star.svg"; + static String icPassword = "${assetPath}icons/ic_password.svg"; + static String icPhoneNumber = "${assetPath}icons/ic_phone_number.svg"; + static String icStar= "${assetPath}icons/ic_star.svg"; //PNG static String icWorldPng = "${assetPath}images/ic_world.png"; diff --git a/lib/config/routes.dart b/lib/config/routes.dart index 6e1d741..334e2c9 100644 --- a/lib/config/routes.dart +++ b/lib/config/routes.dart @@ -53,6 +53,9 @@ class AppRoutes { static const String dashboard = "/dashboard"; + //Subcriptions + static final String mySubscriptionsPage = "/mySubscriptionsPage"; + static final String subscriptionsPage = "/subscriptionsPage"; static const String initialRoute = splash; diff --git a/lib/views/user/edit_account_page.dart b/lib/views/user/edit_account_page.dart index d823792..bc02461 100644 --- a/lib/views/user/edit_account_page.dart +++ b/lib/views/user/edit_account_page.dart @@ -10,6 +10,7 @@ import 'package:mc_common_app/widgets/common_widgets/app_bar.dart'; import 'package:easy_localization/easy_localization.dart'; import 'package:flutter/material.dart'; import 'package:flutter_svg/flutter_svg.dart'; +import 'package:mc_common_app/widgets/extensions/extensions_widget.dart'; import 'package:provider/provider.dart'; import '../../theme/colors.dart'; @@ -28,130 +29,107 @@ class _EditAccountPageState extends State { Widget build(BuildContext context) { UserVM userVM = context.read(); return Scaffold( - appBar: CustomAppBar( isRemoveBackButton: true, title: LocaleKeys.editAccount.tr()), + appBar: CustomAppBar(isRemoveBackButton: true, title: LocaleKeys.editAccount.tr()), body: Container( width: double.infinity, height: double.infinity, - padding: const EdgeInsets.all(20), + padding: const EdgeInsets.all(21), child: Column( children: [ - 20.height, - Row( - crossAxisAlignment: CrossAxisAlignment.center, - mainAxisAlignment: MainAxisAlignment.start, + Column( children: [ - SvgPicture.asset( - MyAssets.icLock, - color: MyColors.darkPrimaryColor, - width: 16, + showItem( + icon: MyAssets.icEmail, + title: LocaleKeys.changeEmail.tr(), + onTap: () { + navigateWithName(context, AppRoutes.changeEmailPage); + }, + ), + const Divider( + height: 1, ), - 20.width, - Expanded(child: LocaleKeys.changePassword.tr().toText(isBold: true, fontSize: 12)), - ElevatedButton( - style: ElevatedButton.styleFrom( - textStyle: const TextStyle(color: Colors.white), - backgroundColor: MyColors.darkPrimaryColor, - padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8), - ), - onPressed: () { + showItem( + icon: MyAssets.icPassword, + title: LocaleKeys.changePassword.tr(), + onTap: () { navigateWithName(context, AppRoutes.changePassword); }, - child: Text( - LocaleKeys.change.tr(), - style: const TextStyle( - fontSize: 14, letterSpacing: -0.48, - fontWeight: FontWeight.w600, - height: 23 / 24, - ), - ), ), - ], - ), - 15.height, - Row( - crossAxisAlignment: CrossAxisAlignment.center, - mainAxisAlignment: MainAxisAlignment.start, - children: [ - SvgPicture.asset( - "assets/images/ic_mobile.svg", - color: MyColors.darkPrimaryColor, - width: 16, + const Divider( + height: 1, ), - 20.width, - Expanded(child: LocaleKeys.changeMobile.tr().toText(isBold: true, fontSize: 12)), - LocaleKeys.verify.tr().toText(color: Colors.green, fontSize: 12), - 20.width, - ElevatedButton( - style: ElevatedButton.styleFrom( - textStyle: const TextStyle(color: Colors.white), - backgroundColor: MyColors.darkPrimaryColor, - padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8), - ), - onPressed: () { + showItem( + icon: MyAssets.icPhoneNumber, + title: LocaleKeys.changeMobile.tr(), + onTap: () { navigateWithName(context, AppRoutes.changeMobilePage); }, - child: Text( - LocaleKeys.change.tr(), - style: const TextStyle(fontSize: 14, height: 23 / 24,fontWeight: FontWeight.w600), - ), - ) + ), + const Divider( + height: 1, + ), ], - ), - 20.height, - Row( - crossAxisAlignment: CrossAxisAlignment.center, - mainAxisAlignment: MainAxisAlignment.start, + ).toWhiteContainer(width: double.infinity, pading: EdgeInsets.symmetric(horizontal: 12)), + 21.height, + Column( children: [ - SvgPicture.asset( - MyAssets.icEmail, - color: MyColors.darkPrimaryColor, - width: 16, + showItem( + icon: MyAssets.icStar, + title: "My Subscriptions", + subTitle: "Silver", + onTap: () { + navigateWithName(context, AppRoutes.mySubscriptionsPage); + }, ), - 20.width, - Expanded(child: LocaleKeys.changeEmail.tr().toText(isBold: true, fontSize: 12)), - InkWell( - child: ((AppState().getUser.data!.userInfo!.isEmailVerified ?? false) ? LocaleKeys.verified.tr() : LocaleKeys.verify.tr()).toText( - color: Colors.green, - fontSize: 12, - ), - onTap: (AppState().getUser.data!.userInfo!.isEmailVerified ?? false) - ? null - : () async { - await userVM.verifyEmail(context, email: email, userID: userID); - }, + const Divider( + height: 1, ), - 20.width, - ElevatedButton( - style: ElevatedButton.styleFrom( - textStyle: const TextStyle(color: Colors.white), - backgroundColor: MyColors.darkPrimaryColor, - padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8), - ), - onPressed: () { - navigateWithName(context, AppRoutes.changeEmailPage); + showItem( + icon: MyAssets.icGroupStar, + title: "Subscriptions", + onTap: () { + navigateWithName(context, AppRoutes.subscriptionsPage); }, - child: Text( - LocaleKeys.change.tr(), - style: const TextStyle(fontSize: 14, height: 23 / 24, fontWeight: FontWeight.w600), - ), ), ], - ) + ).toWhiteContainer(width: double.infinity, pading: EdgeInsets.symmetric(horizontal: 12)), + ], + ), + ), + ); + } - // ListTile( - // leading: SvgPicture.asset("assets/images/ic_mobile.svg"), - // title: "Change Mobile".toText12(), - // onTap: () { - // navigateWithName(context, AppRoutes.changeMobilePage); - // }, - // ), - // ListTile( - // leading: Icon(Icons.email_outlined, color: Colors.blue,), - // title: "Change Email".toText12(), - // onTap: () { - // navigateWithName(context, AppRoutes.changeEmailPage); - // }, - // ), + Widget showItem({required String icon, required String title, required VoidCallback onTap, String? subTitle}) { + return InkWell( + onTap: onTap, + child: Padding( + padding: const EdgeInsets.symmetric(vertical: 12), + child: Row( + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + SizedBox( + width: 16, + height: 16, + child: SvgPicture.asset( + icon, + color: subTitle == null ? MyColors.black : MyColors.primaryColor, + ), + ), + 12.width, + Expanded( + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisAlignment: MainAxisAlignment.start, + children: [ + title.toText(isBold: true, fontSize: 14), + if (subTitle != null) subTitle.toText(fontSize: 14, color: MyColors.primaryColor), + ], + ), + ), + const Icon( + Icons.arrow_forward, + size: 16, + ), ], ), ), diff --git a/lib/widgets/extensions/extensions_widget.dart b/lib/widgets/extensions/extensions_widget.dart index 3473834..bad7444 100644 --- a/lib/widgets/extensions/extensions_widget.dart +++ b/lib/widgets/extensions/extensions_widget.dart @@ -23,13 +23,13 @@ extension ExtendedText on Widget { } extension ContainerExt on Widget { - Widget toWhiteContainer({required double width, required double allPading, EdgeInsets? margin, VoidCallback? onTap}) { + Widget toWhiteContainer({required double width, double? allPading, EdgeInsets? pading, EdgeInsets? margin, VoidCallback? onTap, Color? backgroundColor}) { return InkWell( onTap: onTap, child: Container( - decoration: const BoxDecoration( - color: MyColors.white, - boxShadow: [ + decoration: BoxDecoration( + color: backgroundColor ?? MyColors.white, + boxShadow: const [ BoxShadow( blurRadius: 8, spreadRadius: 3, @@ -38,7 +38,7 @@ extension ContainerExt on Widget { ), ], ), - padding: EdgeInsets.all(allPading), + padding: pading ?? EdgeInsets.all(allPading ?? 0), margin: margin, child: this, ), @@ -90,7 +90,7 @@ extension ContainerExt on Widget { ); } -extension ImageExt on Image { +extension ImageExt on Widget { Widget toCircle({required double borderRadius}) { return ClipRRect( clipBehavior: Clip.hardEdge,