diff --git a/android/app/src/main/AndroidManifest.xml b/android/app/src/main/AndroidManifest.xml index 7be27d5..27bdf35 100644 --- a/android/app/src/main/AndroidManifest.xml +++ b/android/app/src/main/AndroidManifest.xml @@ -7,6 +7,7 @@ routes = { login: (context) => LoginScreen(), verifyLogin: (context) => VerifyLoginScreen(), @@ -65,5 +69,6 @@ class AppRoutes { myAttendance: (context) => MyAttendanceScreen(), workFromHome: (context) => WorkFromHomeScreen(), addWorkFromHome: (context) => AddWorkFromHomeScreen(), + profile: (context) => ProfileScreen(), }; } diff --git a/lib/ui/landing/dashboard_screen.dart b/lib/ui/landing/dashboard_screen.dart index be692fe..354e0db 100644 --- a/lib/ui/landing/dashboard_screen.dart +++ b/lib/ui/landing/dashboard_screen.dart @@ -10,6 +10,7 @@ import 'package:mohem_flutter_app/extensions/string_extensions.dart'; import 'package:mohem_flutter_app/extensions/widget_extensions.dart'; import 'package:mohem_flutter_app/generated/locale_keys.g.dart'; import 'package:mohem_flutter_app/provider/dashboard_provider_model.dart'; +import 'package:mohem_flutter_app/ui/landing/widget/app_drawer.dart'; import 'package:mohem_flutter_app/ui/landing/widget/menus_widget.dart'; import 'package:mohem_flutter_app/ui/landing/widget/services_widget.dart'; import 'package:mohem_flutter_app/widgets/circular_avatar.dart'; @@ -27,7 +28,7 @@ class DashboardScreen extends StatefulWidget { class _DashboardScreenState extends State { late DashboardProviderModel data; - + final GlobalKey _scaffoldState = GlobalKey(); @override void initState() { super.initState(); @@ -47,272 +48,277 @@ class _DashboardScreenState extends State { @override Widget build(BuildContext context) { List namesD = ["Nostalgia Perfume Perfume", "Al Nafoura", "AlJadi", "Nostalgia Perfume"]; - + final GlobalKey _key = GlobalKey(); // return Scaffold( - body: Column( - children: [ - Row( - children: [ - Row( - mainAxisSize: MainAxisSize.min, - children: [ - CircularAvatar( - width: 34, - height: 34, - url: "https://cdn4.iconfinder.com/data/icons/professions-2-2/151/89-512.png", - ), - 8.width, - SvgPicture.asset("assets/images/side_nav.svg"), - ], - ).onPress(() {}), - Expanded( - child: Row( - crossAxisAlignment: CrossAxisAlignment.center, - mainAxisAlignment: MainAxisAlignment.center, - mainAxisSize: MainAxisSize.min, - children: [ - //AppLogo(), - 8.width, - LocaleKeys.mohemm.tr().toText14() - ], - ), - ), - SizedBox( - width: 36, - height: 36, - child: Stack( - alignment: Alignment.centerLeft, - children: [ - SvgPicture.asset("assets/images/announcements.svg"), - Positioned( - right: 0, - top: 0, - child: Container( - padding: const EdgeInsets.only(left: 5, right: 5), - decoration: BoxDecoration(color: MyColors.redColor, borderRadius: BorderRadius.circular(17)), - child: "3".toText12(color: Colors.white), + key: _scaffoldState, + body: Column( + children: [ + Row( + children: [ + Builder(builder: (context) { + return Row( + mainAxisSize: MainAxisSize.min, + children: [ + CircularAvatar( + width: 34, + height: 34, + url: "https://cdn4.iconfinder.com/data/icons/professions-2-2/151/89-512.png", ), - ) - ], + 8.width, + SvgPicture.asset("assets/images/side_nav.svg"), + ], + ).onPress(() { + _scaffoldState.currentState!.openDrawer(); + }); + }), + Expanded( + child: Row( + crossAxisAlignment: CrossAxisAlignment.center, + mainAxisAlignment: MainAxisAlignment.center, + mainAxisSize: MainAxisSize.min, + children: [ + //AppLogo(), + 8.width, + LocaleKeys.mohemm.tr().toText14() + ], + ), ), - ).onPress(() { - data.update(context); - }) - ], - ).paddingOnly(left: 21, right: 21, top: 48, bottom: 7), - Expanded( - child: SingleChildScrollView( - child: Column( - children: [ - Column( - crossAxisAlignment: CrossAxisAlignment.start, + SizedBox( + width: 36, + height: 36, + child: Stack( + alignment: Alignment.centerLeft, children: [ - LocaleKeys.goodMorning.tr().toText14(color: MyColors.grey77Color), - "Mahmoud Shrouf".toText24(isBold: true), - 16.height, - Row( - children: [ - Expanded( - child: AspectRatio( - aspectRatio: 159 / 159, - child: Consumer( - builder: (context, model, child) { - return (model.isAttendanceTrackingLoading - ? GetAttendanceTrackingShimmer() - : Container( - decoration: BoxDecoration( - borderRadius: BorderRadius.circular(15), - gradient: const LinearGradient(transform: GradientRotation(.46), begin: Alignment.topRight, end: Alignment.bottomLeft, colors: [ - MyColors.gradiantEndColor, - MyColors.gradiantStartColor, - ]), - ), - child: Stack( - alignment: Alignment.center, - children: [ - if (model.isTimeRemainingInSeconds == 0) SvgPicture.asset("assets/images/thumb.svg"), - Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Expanded( - child: Column( - mainAxisSize: MainAxisSize.min, - crossAxisAlignment: CrossAxisAlignment.start, + SvgPicture.asset("assets/images/announcements.svg"), + Positioned( + right: 0, + top: 0, + child: Container( + padding: const EdgeInsets.only(left: 5, right: 5), + decoration: BoxDecoration(color: MyColors.redColor, borderRadius: BorderRadius.circular(17)), + child: "3".toText12(color: Colors.white), + ), + ) + ], + ), + ).onPress(() { + data.update(context); + }) + ], + ).paddingOnly(left: 21, right: 21, top: 48, bottom: 7), + Expanded( + child: SingleChildScrollView( + child: Column( + children: [ + Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + LocaleKeys.goodMorning.tr().toText14(color: MyColors.grey77Color), + "Mahmoud Shrouf".toText24(isBold: true), + 16.height, + Row( + children: [ + Expanded( + child: AspectRatio( + aspectRatio: 159 / 159, + child: Consumer( + builder: (context, model, child) { + return (model.isAttendanceTrackingLoading + ? GetAttendanceTrackingShimmer() + : Container( + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(15), + gradient: const LinearGradient(transform: GradientRotation(.46), begin: Alignment.topRight, end: Alignment.bottomLeft, colors: [ + MyColors.gradiantEndColor, + MyColors.gradiantStartColor, + ]), + ), + child: Stack( + alignment: Alignment.center, + children: [ + if (model.isTimeRemainingInSeconds == 0) SvgPicture.asset("assets/images/thumb.svg"), + Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Expanded( + child: Column( + mainAxisSize: MainAxisSize.min, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + LocaleKeys.markAttendance.tr().toText14(color: Colors.white, isBold: true), + if (model.isTimeRemainingInSeconds == 0) "01-02-2022".toText12(color: Colors.white), + if (model.isTimeRemainingInSeconds != 0) + Column( + mainAxisSize: MainAxisSize.min, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + 9.height, + CountdownTimer( + endTime: model.endTime, + onEnd: null, + endWidget: "00:00:00".toText14(color: Colors.white, isBold: true), + textStyle: TextStyle(color: Colors.white, fontSize: 14, letterSpacing: -0.48, fontWeight: FontWeight.bold), + ), + LocaleKeys.timeLeftToday.tr().toText12(color: Colors.white), + 9.height, + ClipRRect( + borderRadius: BorderRadius.all( + Radius.circular(20), + ), + child: LinearProgressIndicator( + value: model.progress, + minHeight: 8, + valueColor: const AlwaysStoppedAnimation(Colors.white), + backgroundColor: const Color(0xff196D73), + ), + ), + ], + ), + ], + ).paddingOnly(top: 12, right: 15, left: 12), + ), + Row( children: [ - LocaleKeys.markAttendance.tr().toText14(color: Colors.white, isBold: true), - if (model.isTimeRemainingInSeconds == 0) "01-02-2022".toText12(color: Colors.white), - if (model.isTimeRemainingInSeconds != 0) - Column( + Expanded( + child: Column( mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.start, children: [ - 9.height, - CountdownTimer( - endTime: model.endTime, - onEnd: null, - endWidget: "00:00:00".toText14(color: Colors.white, isBold: true), - textStyle: TextStyle(color: Colors.white, fontSize: 14, letterSpacing: -0.48, fontWeight: FontWeight.bold), - ), - LocaleKeys.timeLeftToday.tr().toText12(color: Colors.white), - 9.height, - ClipRRect( - borderRadius: BorderRadius.all( - Radius.circular(20), - ), - child: LinearProgressIndicator( - value: model.progress, - minHeight: 8, - valueColor: const AlwaysStoppedAnimation(Colors.white), - backgroundColor: const Color(0xff196D73), - ), - ), + LocaleKeys.checkIn.tr().toText12(color: Colors.white), + (model.attendanceTracking!.pSwipeIn == null ? "--:--" : model.attendanceTracking!.pSwipeIn) + .toString() + .toText14(color: Colors.white, isBold: true), + 4.height, ], + ).paddingOnly(left: 12), + ), + Container( + width: 45, + height: 45, + padding: const EdgeInsets.only(left: 14, right: 14), + decoration: const BoxDecoration( + color: Color(0xff259EA4), + borderRadius: BorderRadius.only( + bottomRight: Radius.circular(15), + ), ), - ], - ).paddingOnly(top: 12, right: 15, left: 12), - ), - Row( - children: [ - Expanded( - child: Column( - mainAxisSize: MainAxisSize.min, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - LocaleKeys.checkIn.tr().toText12(color: Colors.white), - (model.attendanceTracking!.pSwipeIn == null ? "--:--" : model.attendanceTracking!.pSwipeIn) - .toString() - .toText14(color: Colors.white, isBold: true), - 4.height, - ], - ).paddingOnly(left: 12), - ), - Container( - width: 45, - height: 45, - padding: const EdgeInsets.only(left: 14, right: 14), - decoration: const BoxDecoration( - color: Color(0xff259EA4), - borderRadius: BorderRadius.only( - bottomRight: Radius.circular(15), - ), + child: SvgPicture.asset(model.isTimeRemainingInSeconds == 0 ? "assets/images/play.svg" : "assets/images/stop.svg"), ), - child: SvgPicture.asset(model.isTimeRemainingInSeconds == 0 ? "assets/images/play.svg" : "assets/images/stop.svg"), - ), - ], - ), - ], - ), - ], - ), - ).onPress(() { - Navigator.pushNamed(context, AppRoutes.todayAttendance); - })) - .animatedSwither(); - }, + ], + ), + ], + ), + ], + ), + ).onPress(() { + Navigator.pushNamed(context, AppRoutes.todayAttendance); + })) + .animatedSwither(); + }, + ), ), ), - ), - 9.width, - Expanded( - child: MenusWidget(), - ), - ], - ), - ], - ).paddingOnly(left: 21, right: 21, top: 7), - ServicesWidget(), - 8.height, - Container( - width: double.infinity, - padding: EdgeInsets.only(top: 31), - decoration: BoxDecoration( - color: Colors.white, - borderRadius: BorderRadius.only(topRight: Radius.circular(50), topLeft: Radius.circular(50)), - border: Border.all(color: MyColors.lightGreyEDColor, width: 1), - ), - child: Column( - mainAxisSize: MainAxisSize.min, - children: [ - Row( - crossAxisAlignment: CrossAxisAlignment.center, - children: [ + 9.width, Expanded( - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - mainAxisSize: MainAxisSize.min, - children: [ - LocaleKeys.offers.tr().toText12(), - Row( - children: [ - LocaleKeys.discounts.tr().toText24(isBold: true), - 6.width, - Container( - padding: const EdgeInsets.only(left: 8, right: 8), - decoration: BoxDecoration( - color: MyColors.yellowColor, - borderRadius: BorderRadius.circular(10), - ), - child: LocaleKeys.newString.tr().toText10(isBold: true)), - ], - ), - ], - ), + child: MenusWidget(), ), - LocaleKeys.viewAllOffers.tr().toText12(isUnderLine: true), ], - ).paddingOnly(left: 21, right: 21), - SizedBox( - height: 103 + 33, - child: ListView.separated( - shrinkWrap: true, - physics: const BouncingScrollPhysics(), - padding: const EdgeInsets.only(left: 21, right: 21, top: 13), - scrollDirection: Axis.horizontal, - itemBuilder: (cxt, index) { - return SizedBox( - width: 73, - child: Column( - crossAxisAlignment: CrossAxisAlignment.center, - children: [ - Container( - width: 73, - height: 73, - decoration: BoxDecoration( - borderRadius: const BorderRadius.all( - Radius.circular(100), - ), - border: Border.all(color: MyColors.lightGreyEDColor, width: 1), - ), - child: ClipRRect( - borderRadius: const BorderRadius.all( - Radius.circular(50), + ), + ], + ).paddingOnly(left: 21, right: 21, top: 7), + ServicesWidget(), + 8.height, + Container( + width: double.infinity, + padding: EdgeInsets.only(top: 31), + decoration: BoxDecoration( + color: Colors.white, + borderRadius: BorderRadius.only(topRight: Radius.circular(50), topLeft: Radius.circular(50)), + border: Border.all(color: MyColors.lightGreyEDColor, width: 1), + ), + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + Row( + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + Expanded( + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisSize: MainAxisSize.min, + children: [ + LocaleKeys.offers.tr().toText12(), + Row( + children: [ + LocaleKeys.discounts.tr().toText24(isBold: true), + 6.width, + Container( + padding: const EdgeInsets.only(left: 8, right: 8), + decoration: BoxDecoration( + color: MyColors.yellowColor, + borderRadius: BorderRadius.circular(10), + ), + child: LocaleKeys.newString.tr().toText10(isBold: true)), + ], + ), + ], + ), + ), + LocaleKeys.viewAllOffers.tr().toText12(isUnderLine: true), + ], + ).paddingOnly(left: 21, right: 21), + SizedBox( + height: 103 + 33, + child: ListView.separated( + shrinkWrap: true, + physics: const BouncingScrollPhysics(), + padding: const EdgeInsets.only(left: 21, right: 21, top: 13), + scrollDirection: Axis.horizontal, + itemBuilder: (cxt, index) { + return SizedBox( + width: 73, + child: Column( + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + Container( + width: 73, + height: 73, + decoration: BoxDecoration( + borderRadius: const BorderRadius.all( + Radius.circular(100), + ), + border: Border.all(color: MyColors.lightGreyEDColor, width: 1), ), - child: Image.network( - "https://play-lh.googleusercontent.com/NPo88ojmhah4HDiposucJmfQIop4z4xc8kqJK9ITO9o-yCab2zxIp7PPB_XPj2iUojo", - fit: BoxFit.cover, + child: ClipRRect( + borderRadius: const BorderRadius.all( + Radius.circular(50), + ), + child: Image.network( + "https://play-lh.googleusercontent.com/NPo88ojmhah4HDiposucJmfQIop4z4xc8kqJK9ITO9o-yCab2zxIp7PPB_XPj2iUojo", + fit: BoxFit.cover, + ), ), ), - ), - 4.height, - Expanded( - child: namesD[6 % (index + 1)].toText12(isCenter: true, maxLine: 2), - ), - ], - ), - ); - }, - separatorBuilder: (cxt, index) => 8.width, - itemCount: 6), - ), - ], - ), - ) - ], + 4.height, + Expanded( + child: namesD[6 % (index + 1)].toText12(isCenter: true, maxLine: 2), + ), + ], + ), + ); + }, + separatorBuilder: (cxt, index) => 8.width, + itemCount: 6), + ), + ], + ), + ) + ], + ), ), - ), - ) - ], - ), - ); + ) + ], + ), + drawer: SafeArea(child: AppDrawer())); } } diff --git a/lib/ui/landing/widget/app_drawer.dart b/lib/ui/landing/widget/app_drawer.dart new file mode 100644 index 0000000..4ef5eb4 --- /dev/null +++ b/lib/ui/landing/widget/app_drawer.dart @@ -0,0 +1,47 @@ +import 'package:flutter/material.dart'; +import 'package:flutter/widgets.dart'; +import 'package:mohem_flutter_app/config/routes.dart'; +import 'package:mohem_flutter_app/ui/landing/widget/drawer_item.dart'; +import 'package:provider/provider.dart'; + +class AppDrawer extends StatefulWidget { + @override + _AppDrawerState createState() => _AppDrawerState(); +} + +class _AppDrawerState extends State { + @override + Widget build(BuildContext context) { + return Container( + color: Colors.white, + child: Drawer( + child: Column(children: [ + const SizedBox( + height: 200, + ), + Expanded( + child: ListView(padding: const EdgeInsets.all(21), physics: const BouncingScrollPhysics(), children: [ + Divider(), + InkWell( + child: DrawerItem( + 'My Profile', + icon: Icons.person, + color: Colors.grey, + ), + onTap: () { + drawerNavigator(context, AppRoutes.profile); + }) + ])) + ]))); + } + + drawerNavigator(context, routeName) { + Navigator.of(context).pushNamed(routeName); + } +} + +String capitalizeOnlyFirstLater(String text) { + if (text.trim().isEmpty) return ""; + + return "${text[0].toUpperCase()}${text.substring(1)}"; +} diff --git a/lib/ui/landing/widget/drawer_item.dart b/lib/ui/landing/widget/drawer_item.dart new file mode 100644 index 0000000..301719b --- /dev/null +++ b/lib/ui/landing/widget/drawer_item.dart @@ -0,0 +1,59 @@ +import 'dart:ui'; +import 'package:flutter/material.dart'; + +class DrawerItem extends StatefulWidget { + final String title; + final String subTitle; + final IconData icon; + final Color color; + final dynamic assetLink; + + const DrawerItem(this.title, {required this.icon, required this.color, this.subTitle = '', this.assetLink}); + + @override + _DrawerItemState createState() => _DrawerItemState(); +} + +class _DrawerItemState extends State { + @override + Widget build(BuildContext context) { + return Container( + margin: EdgeInsets.only(top: 0, bottom: 5, left: 0, right: 0), + child: Row( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + if (widget.assetLink != null) + Container( + height: 20, + width: 20, + child: Image.asset(widget.assetLink), + ), + if (widget.assetLink == null) + Icon( + widget.icon, + color: widget.color ?? Colors.black87, + size: 25, + ), + Expanded( + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisAlignment: MainAxisAlignment.start, + children: [ + Container( + width: MediaQuery.of(context).size.width * 0.45, + child: Text(widget.title, + style: TextStyle( + color: widget.color ?? Color(0xFF2E303A), + fontSize: 14, + fontFamily: 'Poppins', + fontWeight: FontWeight.w600, + letterSpacing: -0.84, + )), + ), + ], + ), + ), + ], + )); + } +} diff --git a/lib/ui/screens/profile/profile_screen.dart b/lib/ui/screens/profile/profile_screen.dart new file mode 100644 index 0000000..4431c95 --- /dev/null +++ b/lib/ui/screens/profile/profile_screen.dart @@ -0,0 +1,66 @@ +import 'dart:ui'; + +import 'package:flutter/cupertino.dart'; +import 'package:flutter/material.dart'; +import 'package:mohem_flutter_app/ui/screens/profile/widgets/header.dart'; +import 'package:mohem_flutter_app/ui/screens/profile/widgets/profile_panel.dart'; + +class ProfileScreen extends StatelessWidget { + @override + Widget build(BuildContext context) { + return Scaffold( + extendBody: true, + backgroundColor: const Color(0xffefefef), + body: Stack(children: [ + Container( + height: 300, + margin: EdgeInsets.only(top: 50), + decoration: new BoxDecoration( + image: new DecorationImage( + image: new ExactAssetImage('assets/images/user-avatar.png'), + fit: BoxFit.cover, + ), + ), + child: new BackdropFilter( + filter: new ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0), + child: new Container( + decoration: new BoxDecoration(color: Colors.white.withOpacity(0.0)), + ), + )), + SingleChildScrollView( + scrollDirection: Axis.vertical, + child: Column(crossAxisAlignment: CrossAxisAlignment.center, children: [ + SizedBox( + height: 80, + ), + Container( + padding: EdgeInsets.only(left: 15, right: 15), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + IconButton( + onPressed: () {}, + icon: Icon( + Icons.arrow_back_ios, + color: Colors.white, + )), + InkWell( + child: Container( + padding: EdgeInsets.only(left: 10, right: 10, top: 5, bottom: 5), + decoration: BoxDecoration(borderRadius: BorderRadius.circular(15), color: Colors.black.withOpacity(.3)), + child: Row(children: [ + Icon(Icons.photo, color: Colors.white), + Text( + 'Edit', + style: TextStyle(color: Colors.white, fontSize: 12), + ) + ]))), + ], + )), + HeaderPanel(), + ProfilePanle() + ]), + ) + ])); + } +} diff --git a/lib/ui/screens/profile/widgets/header.dart b/lib/ui/screens/profile/widgets/header.dart new file mode 100644 index 0000000..3a4499a --- /dev/null +++ b/lib/ui/screens/profile/widgets/header.dart @@ -0,0 +1,16 @@ +import 'package:flutter/cupertino.dart'; +import 'package:flutter/material.dart'; + +class HeaderPanel extends StatelessWidget { + @override + Widget build(BuildContext context) { + double _width = MediaQuery.of(context).size.width; + return Container( + padding: EdgeInsets.symmetric(horizontal: _width / 10, vertical: 0), + child: Column( + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [], + )); + } +} diff --git a/lib/ui/screens/profile/widgets/profile_info.dart b/lib/ui/screens/profile/widgets/profile_info.dart new file mode 100644 index 0000000..a02b56e --- /dev/null +++ b/lib/ui/screens/profile/widgets/profile_info.dart @@ -0,0 +1,122 @@ +import 'package:flutter/cupertino.dart'; +import 'package:flutter/material.dart'; + +class ProfileInFo extends StatelessWidget { + String data = '.'; + double sliderValue = 75; + List menu = [ + ProfileMenu(name: 'Personal information', icon: ''), + ProfileMenu(name: 'Basic Details', icon: ''), + ProfileMenu(name: 'Family Details', icon: ''), + ]; + @override + Widget build(BuildContext context) { + return Container( + child: Column(crossAxisAlignment: CrossAxisAlignment.center, children: [ + /// card header + customLabel('Sultan khan', 22, Colors.black, true), + + customLabel('217869 | Software Developer', 14, Colors.grey, false), + + customLabel('sultan.khan@cloudsolutions.com.sa', 13, Colors.black, true), + + Divider(height: 40, thickness: 8, color: const Color(0xffefefef)), + + customLabel('We appreciates you for completing the service of', 10, Colors.black, true), + + SizedBox(height: 10), + Container( + child: Row(mainAxisAlignment: MainAxisAlignment.spaceAround, crossAxisAlignment: CrossAxisAlignment.center, children: [ + Column( + children: [customLabel('Years', 14, const Color(0xff808080), true), customLabel('03', 22, Color(0xff2BB8A6), true)], + ), + Column( + children: [customLabel('Month', 14, const Color(0xff808080), true), customLabel('06', 22, Color(0xff2BB8A6), true)], + ), + Column( + children: [customLabel('Day', 14, const Color(0xff808080), true), customLabel('20', 22, Color(0xff2BB8A6), true)], + ) + ])), + + Divider(height: 40, thickness: 8, color: const Color(0xffefefef)), + Container( + padding: EdgeInsets.only( + left: 20, + right: 20, + ), + child: Column( + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + customLabel('Profile Completion 75%', 18, Colors.black, true), + const SizedBox(height: 10), + Row( + children: [ + for (var i = 0; i < 4; i++) + if (i < 3) Expanded(child: drawSlider(Color(0xff2BB8A6))) else Expanded(child: drawSlider(const Color(0xffefefef))) + ], + ), + const SizedBox(height: 10), + Text( + 'Complete Profile', + style: TextStyle(color: Color(0xff2BB8A6), fontWeight: FontWeight.bold, decoration: TextDecoration.underline), + ), + ], + )), + + /// description + Divider(height: 50, thickness: 8, color: const Color(0xffefefef)), + + Column( + children: menu.map((i) => rowItem(i, context)).toList(), + ) + ])); + } + + Widget drawSlider(color) { + return Row(children: [ + Expanded( + flex: 1, + child: ClipRRect( + borderRadius: BorderRadius.circular(10), + child: Container( + height: 6, + width: 20, + color: color, + ), + )), + Container(height: 6, width: 3, color: Colors.white), + ]); + } + + Widget rowItem(obj, context) { + return InkWell( + onTap: () { + // Navigator.pushNamed( + // context, + // AppRoutes.addEitScreen, + // arguments: obj, + // ); + }, + child: ListTile( + leading: FlutterLogo(), + title: Text(obj.name), + trailing: Icon(Icons.arrow_forward), + ), + ); + } + + Widget customLabel(String label, double size, Color color, bool isBold, {double padding = 0.0}) => Container( + padding: EdgeInsets.all(padding), + // height: 50, + child: Column( + mainAxisAlignment: MainAxisAlignment.spaceEvenly, + crossAxisAlignment: CrossAxisAlignment.center, + children: [Text(label, style: TextStyle(color: color, fontSize: size, fontWeight: isBold ? FontWeight.bold : FontWeight.normal))])); +} + +class ProfileMenu { + final String name; + final String icon; + ProfileMenu({this.name = '', this.icon = ''}); +} diff --git a/lib/ui/screens/profile/widgets/profile_panel.dart b/lib/ui/screens/profile/widgets/profile_panel.dart new file mode 100644 index 0000000..7cf73ea --- /dev/null +++ b/lib/ui/screens/profile/widgets/profile_panel.dart @@ -0,0 +1,28 @@ +import 'package:flutter/cupertino.dart'; +import 'package:flutter/material.dart'; +import 'package:mohem_flutter_app/ui/screens/profile/widgets/profile_info.dart'; + +class ProfilePanle extends StatelessWidget { + @override + Widget build(BuildContext context) { + double _width = MediaQuery.of(context).size.width; + return Container( + margin: EdgeInsets.fromLTRB(5, 0, 5, 10), + height: MediaQuery.of(context).size.height, + child: Stack(children: [ + Container( + width: _width, + margin: EdgeInsets.only(top: 50), + padding: EdgeInsets.only(top: 50), + decoration: BoxDecoration( + color: Colors.white, + borderRadius: const BorderRadius.only(topLeft: Radius.circular(25), topRight: Radius.circular(25)), + boxShadow: [BoxShadow(color: Colors.white60, blurRadius: 10, spreadRadius: 10)]), + child: ProfileInFo(), + ), + Container(height: 100, alignment: Alignment.center, child: ProfileImage()) + ])); + } + + Widget ProfileImage() => CircleAvatar(radius: 70, backgroundImage: AssetImage('assets/images/user-avatar.png')); +}