From 22a9b3e818a09d5ab625d592cc53c60f30b266ce Mon Sep 17 00:00:00 2001 From: tall3at <91608104+tall3at@users.noreply.github.com> Date: Wed, 29 Dec 2021 22:25:19 +0500 Subject: [PATCH] Request and Delegate sheets --- lib/classes/colors.dart | 1 + lib/theme/colors.dart | 2 +- lib/ui/landing/dashboard.dart | 191 +++++++++++++----- .../fragments/actions_fragment.dart | 58 ++++-- lib/ui/work_list/sheets/delegate_sheet.dart | 165 +++++++++++++++ .../sheets/request_more_info_sheet.dart | 165 +++++++++++++++ .../work_list/sheets/selected_item_sheet.dart | 151 ++++++++++++++ lib/widgets/bottom_sheet.dart | 41 ++++ lib/widgets/input_widget.dart | 22 +- lib/widgets/radio/show_radio.dart | 41 ++++ 10 files changed, 768 insertions(+), 69 deletions(-) create mode 100644 lib/ui/work_list/sheets/delegate_sheet.dart create mode 100644 lib/ui/work_list/sheets/request_more_info_sheet.dart create mode 100644 lib/ui/work_list/sheets/selected_item_sheet.dart create mode 100644 lib/widgets/bottom_sheet.dart create mode 100644 lib/widgets/radio/show_radio.dart diff --git a/lib/classes/colors.dart b/lib/classes/colors.dart index 6820e7d..2e5eaef 100644 --- a/lib/classes/colors.dart +++ b/lib/classes/colors.dart @@ -24,4 +24,5 @@ class MyColors { static const Color black = Color(0xff000000); static const Color white = Color(0xffffffff); static const Color green = Color(0xffffffff); + static const Color borderColor = Color(0xffE8E8E8); } diff --git a/lib/theme/colors.dart b/lib/theme/colors.dart index 107e2ef..67b5a6f 100644 --- a/lib/theme/colors.dart +++ b/lib/theme/colors.dart @@ -5,7 +5,7 @@ const Color secondaryColor = Color(0xff2BB8A6); const Color accentColor = Colors.blue; const Color appBackgroundColor = Colors.white; Color? accentColorDark = Colors.green[800]; -const Color borderColor = Colors.blueGrey; +const Color borderColor = Color(0xffE8E8E8); Color? borderLightColor = Colors.blueGrey[50]; Color backgroudColor = Colors.blueGrey[50]!.withOpacity(0.5); const Color iconColor = Colors.blueGrey; diff --git a/lib/ui/landing/dashboard.dart b/lib/ui/landing/dashboard.dart index 795460d..2c8367a 100644 --- a/lib/ui/landing/dashboard.dart +++ b/lib/ui/landing/dashboard.dart @@ -32,14 +32,34 @@ class _DashboardState extends State { @override Widget build(BuildContext context) { - List names = [LocaleKeys.workList.tr(), LocaleKeys.missingSwipes.tr(), LocaleKeys.leaveBalance.tr(), LocaleKeys.ticketBalance.tr()]; + List names = [ + LocaleKeys.workList.tr(), + LocaleKeys.missingSwipes.tr(), + LocaleKeys.leaveBalance.tr(), + LocaleKeys.ticketBalance.tr() + ]; List namesInt = [118, 02, 18.5, 03]; List namesColor = [0xff125765, 0xff239D8F, 0xff2BB8A8, 0xff1D92AA]; - List namesT = [LocaleKeys.monthlyAttendance.tr(), LocaleKeys.workFromHome.tr(), LocaleKeys.ticketRequest.tr(), LocaleKeys.monthlyAttendance.tr()]; - List iconT = ["assets/images/monthly_attendance.svg", "assets/images/work_from_home.svg", "assets/images/ticket_request.svg", "assets/images/work_from_home.svg"]; + List namesT = [ + LocaleKeys.monthlyAttendance.tr(), + LocaleKeys.workFromHome.tr(), + LocaleKeys.ticketRequest.tr(), + LocaleKeys.monthlyAttendance.tr() + ]; + List iconT = [ + "assets/images/monthly_attendance.svg", + "assets/images/work_from_home.svg", + "assets/images/ticket_request.svg", + "assets/images/work_from_home.svg" + ]; - List namesD = ["Nostalgia Perfume Perfume", "Al Nafoura", "AlJadi", "Nostalgia Perfume"]; + List namesD = [ + "Nostalgia Perfume Perfume", + "Al Nafoura", + "AlJadi", + "Nostalgia Perfume" + ]; return Scaffold( body: Column( @@ -52,7 +72,8 @@ class _DashboardState extends State { CircularAvatar( width: 34, height: 34, - url: "https://cdn4.iconfinder.com/data/icons/professions-2-2/151/89-512.png", + url: + "https://cdn4.iconfinder.com/data/icons/professions-2-2/151/89-512.png", ), 8.width, SvgPicture.asset("assets/images/side_nav.svg"), @@ -82,7 +103,9 @@ class _DashboardState extends State { top: 0, child: Container( padding: const EdgeInsets.only(left: 5, right: 5), - decoration: BoxDecoration(color: MyColors.redColor, borderRadius: BorderRadius.circular(17)), + decoration: BoxDecoration( + color: MyColors.redColor, + borderRadius: BorderRadius.circular(17)), child: "3".toText12(color: Colors.white), ), ) @@ -98,7 +121,9 @@ class _DashboardState extends State { Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ - LocaleKeys.goodMorning.tr().toText14(color: MyColors.grey77Color), + LocaleKeys.goodMorning + .tr() + .toText14(color: MyColors.grey77Color), "Mahmoud Shrouf".toText24(isBold: true), 16.height, Row( @@ -109,27 +134,41 @@ class _DashboardState extends State { child: Container( decoration: BoxDecoration( borderRadius: BorderRadius.circular(15), - gradient: const LinearGradient(transform: GradientRotation(.46), begin: Alignment.topRight, end: Alignment.bottomRight, colors: [ - MyColors.gradiantEndColor, - MyColors.gradiantStartColor, - ]), + gradient: const LinearGradient( + transform: GradientRotation(.46), + begin: Alignment.topRight, + end: Alignment.bottomRight, + colors: [ + MyColors.gradiantEndColor, + MyColors.gradiantStartColor, + ]), ), child: Stack( alignment: Alignment.center, children: [ SvgPicture.asset("assets/images/"), Column( - crossAxisAlignment: CrossAxisAlignment.start, + crossAxisAlignment: + CrossAxisAlignment.start, children: [ Expanded( child: Column( mainAxisSize: MainAxisSize.min, - crossAxisAlignment: CrossAxisAlignment.start, + crossAxisAlignment: + CrossAxisAlignment.start, children: [ - LocaleKeys.markAttendance.tr().toText14(color: Colors.white, isBold: true), + LocaleKeys.markAttendance + .tr() + .toText14( + color: Colors.white, + isBold: true), 9.height, - "07:55:12".toText14(color: Colors.white, isBold: true), - LocaleKeys.timeLeftToday.tr().toText12(color: Colors.white), + "07:55:12".toText14( + color: Colors.white, + isBold: true), + LocaleKeys.timeLeftToday + .tr() + .toText12(color: Colors.white), 9.height, const ClipRRect( borderRadius: BorderRadius.all( @@ -138,33 +177,50 @@ class _DashboardState extends State { child: LinearProgressIndicator( value: 0.7, minHeight: 8, - valueColor: const AlwaysStoppedAnimation(Colors.white), - backgroundColor: const Color(0xff196D73), + valueColor: + const AlwaysStoppedAnimation< + Color>(Colors.white), + backgroundColor: + const Color(0xff196D73), ), ), ], - ).paddingOnly(top: 12, right: 15, left: 12), + ).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), "09:00".toText14(color: Colors.white, isBold: true), 4.height], + crossAxisAlignment: + CrossAxisAlignment.start, + children: [ + LocaleKeys.checkIn + .tr() + .toText12( + color: Colors.white), + "09:00".toText14( + color: Colors.white, + isBold: true), + 4.height + ], ).paddingOnly(left: 12), ), Container( width: 45, height: 45, - padding: const EdgeInsets.only(left: 14, right: 14), + padding: const EdgeInsets.only( + left: 14, right: 14), decoration: const BoxDecoration( color: Color(0xff259EA4), borderRadius: BorderRadius.only( - bottomRight: Radius.circular(15), + bottomRight: + Radius.circular(15), ), ), - child: SvgPicture.asset("assets/images/stop.svg"), + child: SvgPicture.asset( + "assets/images/stop.svg"), ), ], ), @@ -173,7 +229,8 @@ class _DashboardState extends State { ], ), ).onPress(() { - Navigator.pushNamed(context, AppRoutes.todayAttendance); + Navigator.pushNamed( + context, AppRoutes.todayAttendance); }), ), ), @@ -183,7 +240,12 @@ class _DashboardState extends State { shrinkWrap: true, primary: false, physics: const NeverScrollableScrollPhysics(), - gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2, childAspectRatio: 2 / 2, crossAxisSpacing: 9, mainAxisSpacing: 9), + gridDelegate: + const SliverGridDelegateWithFixedCrossAxisCount( + crossAxisCount: 2, + childAspectRatio: 2 / 2, + crossAxisSpacing: 9, + mainAxisSpacing: 9), padding: EdgeInsets.zero, itemCount: 4, itemBuilder: (BuildContext context, int index) { @@ -193,22 +255,31 @@ class _DashboardState extends State { borderRadius: BorderRadius.circular(10), ), child: Column( - mainAxisAlignment: MainAxisAlignment.spaceBetween, + mainAxisAlignment: + MainAxisAlignment.spaceBetween, crossAxisAlignment: CrossAxisAlignment.start, children: [ names[index].toText12(color: Colors.white), Row( children: [ Expanded( - child: namesInt[index].toStringAsFixed(1).toText16(color: Colors.white, isBold: true), + child: namesInt[index] + .toStringAsFixed(1) + .toText16( + color: Colors.white, + isBold: true), ), - SvgPicture.asset("assets/images/arrow_next.svg", color: Colors.white) + SvgPicture.asset( + "assets/images/arrow_next.svg", + color: Colors.white) ], ) ], - ).paddingOnly(left: 10, right: 10, bottom: 6, top: 6), + ).paddingOnly( + left: 10, right: 10, bottom: 6, top: 6), ).onPress(() { - Navigator.pushNamed(context, AppRoutes.workList); + Navigator.pushNamed( + context, AppRoutes.workList); }); }, ), @@ -224,12 +295,14 @@ class _DashboardState extends State { crossAxisAlignment: CrossAxisAlignment.start, mainAxisSize: MainAxisSize.min, children: [ - LocaleKeys.other.tr().toText12(), + "Other".tr().toText12(), LocaleKeys.services.tr().toText24(isBold: true), ], ), ), - LocaleKeys.viewAllServices.tr().toText12(isUnderLine: true), + LocaleKeys.viewAllServices + .tr() + .toText12(isUnderLine: true), ], ), ], @@ -239,7 +312,8 @@ class _DashboardState extends State { child: ListView.separated( shrinkWrap: true, physics: const BouncingScrollPhysics(), - padding: const EdgeInsets.only(left: 21, right: 21, top: 13, bottom: 13), + padding: const EdgeInsets.only( + left: 21, right: 21, top: 13, bottom: 13), scrollDirection: Axis.horizontal, itemBuilder: (cxt, index) { return AspectRatio( @@ -250,7 +324,8 @@ class _DashboardState extends State { borderRadius: BorderRadius.circular(15), boxShadow: [ BoxShadow( - color: const Color(0xff000000).withOpacity(.05), + color: + const Color(0xff000000).withOpacity(.05), blurRadius: 26, offset: const Offset(0, -3), ), @@ -265,13 +340,17 @@ class _DashboardState extends State { crossAxisAlignment: CrossAxisAlignment.end, children: [ Expanded( - child: namesT[index].toText11(isBold: true), + child: + namesT[index].toText11(isBold: true), ), - SvgPicture.asset("assets/images/arrow_next.svg").paddingOnly(bottom: 4) + SvgPicture.asset( + "assets/images/arrow_next.svg") + .paddingOnly(bottom: 4) ], ) ], - ).paddingOnly(left: 10, right: 10, bottom: 10, top: 12), + ).paddingOnly( + left: 10, right: 10, bottom: 10, top: 12), ), ); }, @@ -284,8 +363,11 @@ class _DashboardState extends State { 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), + borderRadius: BorderRadius.only( + topRight: Radius.circular(50), + topLeft: Radius.circular(50)), + border: + Border.all(color: MyColors.lightGreyEDColor, width: 1), ), child: Column( mainAxisSize: MainAxisSize.min, @@ -301,21 +383,29 @@ class _DashboardState extends State { LocaleKeys.offers.tr().toText12(), Row( children: [ - LocaleKeys.discounts.tr().toText24(isBold: true), + LocaleKeys.discounts + .tr() + .toText24(isBold: true), 6.width, Container( - padding: const EdgeInsets.only(left: 8, right: 8), + padding: const EdgeInsets.only( + left: 8, right: 8), decoration: BoxDecoration( color: MyColors.yellowColor, - borderRadius: BorderRadius.circular(10), + borderRadius: + BorderRadius.circular(10), ), - child: LocaleKeys.newString.tr().toText10(isBold: true)), + child: LocaleKeys.newString + .tr() + .toText10(isBold: true)), ], ), ], ), ), - LocaleKeys.viewAllOffers.tr().toText12(isUnderLine: true), + LocaleKeys.viewAllOffers + .tr() + .toText12(isUnderLine: true), ], ).paddingOnly(left: 21, right: 21), SizedBox( @@ -323,7 +413,8 @@ class _DashboardState extends State { child: ListView.separated( shrinkWrap: true, physics: const BouncingScrollPhysics(), - padding: const EdgeInsets.only(left: 21, right: 21, top: 13), + padding: const EdgeInsets.only( + left: 21, right: 21, top: 13), scrollDirection: Axis.horizontal, itemBuilder: (cxt, index) { return SizedBox( @@ -338,7 +429,9 @@ class _DashboardState extends State { borderRadius: const BorderRadius.all( Radius.circular(100), ), - border: Border.all(color: MyColors.lightGreyEDColor, width: 1), + border: Border.all( + color: MyColors.lightGreyEDColor, + width: 1), ), child: ClipRRect( borderRadius: const BorderRadius.all( @@ -351,7 +444,9 @@ class _DashboardState extends State { ), ), 4.height, - Expanded(child: namesD[6 % (index + 1)].toText12(isCenter: true, maxLine: 2)), + Expanded( + child: namesD[6 % (index + 1)].toText12( + isCenter: true, maxLine: 2)), ], ), ); diff --git a/lib/ui/work_list/missing_swipe/fragments/actions_fragment.dart b/lib/ui/work_list/missing_swipe/fragments/actions_fragment.dart index 05cf9ce..9c2de89 100644 --- a/lib/ui/work_list/missing_swipe/fragments/actions_fragment.dart +++ b/lib/ui/work_list/missing_swipe/fragments/actions_fragment.dart @@ -1,5 +1,8 @@ import 'package:flutter/material.dart'; import 'package:mohem_flutter_app/classes/colors.dart'; +import 'package:mohem_flutter_app/ui/work_list/sheets/delegate_sheet.dart'; +import 'package:mohem_flutter_app/ui/work_list/sheets/request_more_info_sheet.dart'; +import 'package:mohem_flutter_app/widgets/bottom_sheet.dart'; import 'package:mohem_flutter_app/widgets/circular_avatar.dart'; import 'package:mohem_flutter_app/extensions/string_extensions.dart'; import 'package:mohem_flutter_app/extensions/int_extensions.dart'; @@ -12,15 +15,20 @@ class ActionsFragment extends StatelessWidget { return Container( width: double.infinity, height: double.infinity, - child: Column( - children: [ - showItem(), - ], + child: ListView.separated( + itemCount: actionsList.length, + padding: EdgeInsets.all(21), + itemBuilder: (context, index) { + return showItem(context, actionsList[index]); + }, + separatorBuilder: (BuildContext context, int index) { + return 16.height; + }, ), ); } - Widget showItem() { + Widget showItem(BuildContext context, Color color) { return Container( width: double.infinity, decoration: BoxDecoration( @@ -35,7 +43,6 @@ class ActionsFragment extends StatelessWidget { ], ), clipBehavior: Clip.antiAlias, - margin: EdgeInsets.all(21), child: Stack( clipBehavior: Clip.antiAlias, children: [ @@ -46,7 +53,7 @@ class ActionsFragment extends StatelessWidget { child: Container( width: 60, height: 20, - color: Colors.black, + color: color, ), ), ), @@ -94,10 +101,17 @@ class ActionsFragment extends StatelessWidget { Row( children: [ Expanded( - child: Center( - child: "Request Info" - .toText12(isBold: true) - .paddingOnly(left: 21, right: 21, top: 16, bottom: 8), + child: InkWell( + onTap: () { + showMyBottomSheet(context, + child: RequestMoreInfoSheet()); + }, + child: Center( + child: "Request Info" + .toText12(isBold: true) + .paddingOnly( + left: 21, right: 21, top: 8, bottom: 8), + ), ), ), Center( @@ -108,11 +122,17 @@ class ActionsFragment extends StatelessWidget { ), ), Expanded( - child: Center( - child: "Delegate" - .toText12( - color: MyColors.gradiantEndColor, isBold: true) - .paddingOnly(left: 21, right: 21, top: 16, bottom: 8), + child: InkWell( + onTap: () { + showMyBottomSheet(context, child: DelegateSheet()); + }, + child: Center( + child: "Delegate" + .toText12( + color: MyColors.gradiantEndColor, isBold: true) + .paddingOnly( + left: 21, right: 21, top: 8, bottom: 8), + ), ), ), ], @@ -124,3 +144,9 @@ class ActionsFragment extends StatelessWidget { ); } } + +List actionsList = [ + Colors.black, + Colors.red, + Colors.green, +]; diff --git a/lib/ui/work_list/sheets/delegate_sheet.dart b/lib/ui/work_list/sheets/delegate_sheet.dart new file mode 100644 index 0000000..ba0e6a4 --- /dev/null +++ b/lib/ui/work_list/sheets/delegate_sheet.dart @@ -0,0 +1,165 @@ +import 'package:flutter/material.dart'; +import 'package:mohem_flutter_app/classes/colors.dart'; +import 'package:mohem_flutter_app/extensions/string_extensions.dart'; +import 'package:mohem_flutter_app/extensions/int_extensions.dart'; +import 'package:mohem_flutter_app/ui/work_list/sheets/selected_item_sheet.dart'; +import 'package:mohem_flutter_app/widgets/bottom_sheet.dart'; +import 'package:mohem_flutter_app/widgets/button/default_button.dart'; +import 'package:mohem_flutter_app/widgets/circular_avatar.dart'; +import 'package:mohem_flutter_app/widgets/input_widget.dart'; +import 'package:mohem_flutter_app/widgets/radio/show_radio.dart'; +import 'package:mohem_flutter_app/extensions/widget_extensions.dart'; + +class DelegateSheet extends StatelessWidget { + TextEditingController username = TextEditingController(); + + @override + Widget build(BuildContext context) { + List related = [ + "Amjad Khan", + "Munahi Nasser", + ]; + List favorites = [ + "Amjad Khan", + "Muhammad Ahmed", + "Majid Ali", + "Faris Mahmoud", + ]; + return Container( + width: double.infinity, + height: MediaQuery.of(context).size.height - 80, + child: Column( + children: [ + Expanded( + child: SingleChildScrollView( + child: Padding( + padding: EdgeInsets.all(21), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + "Delegate".toText24(), + 24.height, + "Search".toText16(), + 12.height, + Row( + children: [ + Expanded( + flex: 2, + child: ShowRadio( + title: "Name", value: "Name", groupValue: "Name"), + ), + Expanded( + flex: 3, + child: ShowRadio( + title: "User Name", + value: "User Name", + groupValue: "Name"), + ), + Expanded( + flex: 2, + child: ShowRadio( + title: "Email", + value: "Email", + groupValue: "Name"), + ), + ], + ), + 20.height, + InputWidget( + "Search By Username", + "", + username, + isBackgroundEnable: true, + ), + 24.height, + "Related".toText16(), + 12.height, + ListView.separated( + itemBuilder: (context, index) { + return showItem(context, related[index]); + }, + separatorBuilder: (context, index) { + return Container( + color: MyColors.borderColor, + width: double.infinity, + height: 1, + margin: EdgeInsets.only(top: 8, bottom: 8), + ); + }, + physics: NeverScrollableScrollPhysics(), + shrinkWrap: true, + itemCount: related.length, + padding: EdgeInsets.only(top: 8, bottom: 8), + ), + 24.height, + "Favorites".toText16(), + 12.height, + ListView.separated( + itemBuilder: (context, index) { + return showItem(context, favorites[index], + isEnabled: true); + }, + separatorBuilder: (context, index) { + return Container( + color: MyColors.borderColor, + width: double.infinity, + height: 1, + margin: EdgeInsets.only(top: 8, bottom: 8), + ); + }, + physics: NeverScrollableScrollPhysics(), + shrinkWrap: true, + itemCount: favorites.length, + padding: EdgeInsets.only(top: 8, bottom: 8), + ), + ], + ), + ), + ), + ), + Container( + width: double.infinity, + height: 1, + color: MyColors.borderColor, + ), + DefaultButton( + "Cancel", + () { + Navigator.pop(context); + }, + textColor: Colors.black, + colors: [ + Color(0xffE6E6E6), + Color(0xffE6E6E6), + ], + ).insideContainer + ], + ), + ); + } + + Widget showItem(BuildContext context, String name, {bool isEnabled = false}) { + return InkWell( + onTap: () { + showMyBottomSheet(context, child: SelectedItemSheet("Delegate")); + }, + child: Row( + children: [ + CircularAvatar( + height: 30, + width: 30, + ), + 16.width, + Expanded( + child: name.toText12(), + ), + Icon( + Icons.star, + size: 16, + color: isEnabled ? MyColors.yellowColor : MyColors.borderColor, + ), + ], + ), + ); + } +} diff --git a/lib/ui/work_list/sheets/request_more_info_sheet.dart b/lib/ui/work_list/sheets/request_more_info_sheet.dart new file mode 100644 index 0000000..e2840ca --- /dev/null +++ b/lib/ui/work_list/sheets/request_more_info_sheet.dart @@ -0,0 +1,165 @@ +import 'package:flutter/material.dart'; +import 'package:mohem_flutter_app/classes/colors.dart'; +import 'package:mohem_flutter_app/extensions/string_extensions.dart'; +import 'package:mohem_flutter_app/extensions/int_extensions.dart'; +import 'package:mohem_flutter_app/ui/work_list/sheets/selected_item_sheet.dart'; +import 'package:mohem_flutter_app/widgets/bottom_sheet.dart'; +import 'package:mohem_flutter_app/widgets/button/default_button.dart'; +import 'package:mohem_flutter_app/widgets/circular_avatar.dart'; +import 'package:mohem_flutter_app/widgets/input_widget.dart'; +import 'package:mohem_flutter_app/widgets/radio/show_radio.dart'; +import 'package:mohem_flutter_app/extensions/widget_extensions.dart'; + +class RequestMoreInfoSheet extends StatelessWidget { + TextEditingController username = TextEditingController(); + + @override + Widget build(BuildContext context) { + List related = [ + "Amjad Khan", + "Munahi Nasser", + ]; + List favorites = [ + "Amjad Khan", + "Muhammad Ahmed", + "Majid Ali", + "Faris Mahmoud", + ]; + return Container( + width: double.infinity, + height: MediaQuery.of(context).size.height - 80, + child: Column( + children: [ + Expanded( + child: SingleChildScrollView( + child: Padding( + padding: EdgeInsets.all(21), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + "Request more info".toText24(), + 24.height, + "Search".toText16(), + 12.height, + Row( + children: [ + Expanded( + flex: 2, + child: ShowRadio( + title: "Name", value: "Name", groupValue: "Name"), + ), + Expanded( + flex: 3, + child: ShowRadio( + title: "User Name", + value: "User Name", + groupValue: "Name"), + ), + Expanded( + flex: 2, + child: ShowRadio( + title: "Email", + value: "Email", + groupValue: "Name"), + ), + ], + ), + 20.height, + InputWidget( + "Search By Username", + "", + username, + isBackgroundEnable: true, + ), + 24.height, + "Related".toText16(), + 12.height, + ListView.separated( + itemBuilder: (context, index) { + return showItem(context, related[index]); + }, + separatorBuilder: (context, index) { + return Container( + color: MyColors.borderColor, + width: double.infinity, + height: 1, + margin: EdgeInsets.only(top: 8, bottom: 8), + ); + }, + physics: NeverScrollableScrollPhysics(), + shrinkWrap: true, + itemCount: related.length, + padding: EdgeInsets.only(top: 8, bottom: 8), + ), + 24.height, + "Favorites".toText16(), + 12.height, + ListView.separated( + itemBuilder: (context, index) { + return showItem(context, favorites[index], + isEnabled: true); + }, + separatorBuilder: (context, index) { + return Container( + color: MyColors.borderColor, + width: double.infinity, + height: 1, + margin: EdgeInsets.only(top: 8, bottom: 8), + ); + }, + physics: NeverScrollableScrollPhysics(), + shrinkWrap: true, + itemCount: favorites.length, + padding: EdgeInsets.only(top: 8, bottom: 8), + ), + ], + ), + ), + ), + ), + Container( + width: double.infinity, + height: 1, + color: MyColors.borderColor, + ), + DefaultButton( + "Cancel", + () { + Navigator.pop(context); + }, + textColor: Colors.black, + colors: [ + Color(0xffE6E6E6), + Color(0xffE6E6E6), + ], + ).insideContainer + ], + ), + ); + } + + Widget showItem(BuildContext context, String name, {bool isEnabled = false}) { + return InkWell( + onTap: () { + showMyBottomSheet(context, child: SelectedItemSheet("Request more info")); + }, + child: Row( + children: [ + CircularAvatar( + height: 30, + width: 30, + ), + 16.width, + Expanded( + child: name.toText12(), + ), + Icon( + Icons.star, + size: 16, + color: isEnabled ? MyColors.yellowColor : MyColors.borderColor, + ), + ], + ), + ); + } +} diff --git a/lib/ui/work_list/sheets/selected_item_sheet.dart b/lib/ui/work_list/sheets/selected_item_sheet.dart new file mode 100644 index 0000000..50fcae4 --- /dev/null +++ b/lib/ui/work_list/sheets/selected_item_sheet.dart @@ -0,0 +1,151 @@ +import 'package:flutter/material.dart'; +import 'package:mohem_flutter_app/classes/colors.dart'; +import 'package:mohem_flutter_app/extensions/string_extensions.dart'; +import 'package:mohem_flutter_app/extensions/int_extensions.dart'; +import 'package:mohem_flutter_app/widgets/button/default_button.dart'; +import 'package:mohem_flutter_app/widgets/circular_avatar.dart'; +import 'package:mohem_flutter_app/widgets/input_widget.dart'; +import 'package:mohem_flutter_app/widgets/radio/show_radio.dart'; +import 'package:mohem_flutter_app/extensions/widget_extensions.dart'; + +class SelectedItemSheet extends StatelessWidget { + String title; + + SelectedItemSheet(this.title); + + TextEditingController username = TextEditingController(); + + @override + Widget build(BuildContext context) { + return Container( + width: double.infinity, + height: MediaQuery.of(context).size.height - 80, + child: Column( + children: [ + Expanded( + child: SingleChildScrollView( + child: Padding( + padding: EdgeInsets.all(21), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + title.toText24(), + 24.height, + "Search".toText16(), + 12.height, + Row( + children: [ + Expanded( + flex: 2, + child: ShowRadio( + title: "Name", value: "Name", groupValue: "Name"), + ), + Expanded( + flex: 3, + child: ShowRadio( + title: "User Name", + value: "User Name", + groupValue: "Name"), + ), + Expanded( + flex: 2, + child: ShowRadio( + title: "Email", + value: "Email", + groupValue: "Name"), + ), + ], + ), + 20.height, + showItem("name"), + 20.height, + InputWidget( + "Enter a note", + "This is simple note", + username, + isBackgroundEnable: true, + lines: 5, + ), + ], + ), + ), + ), + ), + Container( + width: double.infinity, + height: 1, + color: MyColors.borderColor, + ), + Row( + children: [ + Expanded( + child: DefaultButton( + "Cancel", + () { + Navigator.pop(context); + }, + textColor: Colors.black, + colors: [ + Color(0xffE6E6E6), + Color(0xffE6E6E6), + ], + ), + ), + 16.width, + Expanded( + child: DefaultButton( + "Submit", + () { + Navigator.pop(context); + }, + colors: [ + Color(0xff32D892), + Color(0xff1AB170), + ], + ), + ), + ], + ).insideContainer + ], + ), + ); + } + + Widget showItem(String name) { + return Container( + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(15), + color: Color(0xffF7F7F7), + border: Border.all( + color: Color(0xffefefef), + width: 1, + ), + ), + padding: EdgeInsets.only(top: 16, bottom: 16, left: 21, right: 21), + child: Row( + children: [ + CircularAvatar( + height: 30, + width: 30, + ), + 16.width, + Expanded( + child: name.toText12(), + ), + Container( + decoration: BoxDecoration( + color: MyColors.redColor, + borderRadius: BorderRadius.all(Radius.circular(100)), + ), + padding: EdgeInsets.all(3), + child: Icon( + Icons.star, + size: 12, + color: Colors.white, + ), + ), + ], + ), + ); + } +} diff --git a/lib/widgets/bottom_sheet.dart b/lib/widgets/bottom_sheet.dart new file mode 100644 index 0000000..a44fd7b --- /dev/null +++ b/lib/widgets/bottom_sheet.dart @@ -0,0 +1,41 @@ +import 'package:flutter/material.dart'; +import 'package:mohem_flutter_app/extensions/int_extensions.dart'; + +showMyBottomSheet(BuildContext context, {required Widget child}) { + showModalBottomSheet( + context: context, + isScrollControlled: true, + backgroundColor: Colors.transparent, + builder: (BuildContext context) { + return Container( + decoration: BoxDecoration( + color: Colors.white, + borderRadius: BorderRadius.only( + topRight: Radius.circular(24), + topLeft: Radius.circular(24), + ), + ), + clipBehavior: Clip.antiAlias, + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + mainAxisSize: MainAxisSize.min, + children: [ + 8.height, + Container( + height: 6, + width: 60, + decoration: BoxDecoration( + color: Colors.grey[200], + borderRadius: BorderRadius.all( + Radius.circular(20), + ), + ), + ), + 8.height, + child, + ], + ), + ); + }, + ); +} diff --git a/lib/widgets/input_widget.dart b/lib/widgets/input_widget.dart index 97e90a2..8b248e4 100644 --- a/lib/widgets/input_widget.dart +++ b/lib/widgets/input_widget.dart @@ -11,9 +11,16 @@ class InputWidget extends StatelessWidget { final int? lines; final bool isInputTypeNum; final bool isObscureText; + final bool isBackgroundEnable; InputWidget(this.labelText, this.hintText, this.controller, - {this.isObscureText = false, this.suffixTap, this.isEnable = true, this.hasSelection = false, this.lines = 1, this.isInputTypeNum = false}); + {this.isObscureText = false, + this.suffixTap, + this.isEnable = true, + this.hasSelection = false, + this.lines = 1, + this.isInputTypeNum = false, + this.isBackgroundEnable = false}); @override Widget build(BuildContext context) { @@ -22,7 +29,7 @@ class InputWidget extends StatelessWidget { alignment: Alignment.center, decoration: BoxDecoration( borderRadius: BorderRadius.circular(15), - color: Colors.white, + color: isBackgroundEnable ? Color(0xffF7F7F7) : Colors.white, border: Border.all( color: Color(0xffefefef), width: 1, @@ -49,7 +56,9 @@ class InputWidget extends StatelessWidget { TextField( enabled: isEnable, scrollPadding: EdgeInsets.zero, - keyboardType: isInputTypeNum ? TextInputType.number : TextInputType.text, + keyboardType: isInputTypeNum + ? TextInputType.number + : TextInputType.text, controller: controller, maxLines: lines, obscuringCharacter: "*", @@ -73,7 +82,12 @@ class InputWidget extends StatelessWidget { letterSpacing: -0.56, ), suffixIconConstraints: const BoxConstraints(minWidth: 50), - suffixIcon: suffixTap == null ? null : IconButton(icon: const Icon(Icons.mic, color: MyColors.darkTextColor), onPressed: suffixTap), + suffixIcon: suffixTap == null + ? null + : IconButton( + icon: const Icon(Icons.mic, + color: MyColors.darkTextColor), + onPressed: suffixTap), contentPadding: EdgeInsets.zero, border: InputBorder.none, focusedBorder: InputBorder.none, diff --git a/lib/widgets/radio/show_radio.dart b/lib/widgets/radio/show_radio.dart new file mode 100644 index 0000000..fda5bf9 --- /dev/null +++ b/lib/widgets/radio/show_radio.dart @@ -0,0 +1,41 @@ +import 'package:flutter/material.dart'; +import 'package:mohem_flutter_app/classes/colors.dart'; +import 'package:mohem_flutter_app/extensions/int_extensions.dart'; +import 'package:mohem_flutter_app/extensions/string_extensions.dart'; +import 'package:mohem_flutter_app/extensions/int_extensions.dart'; + +class ShowRadio extends StatelessWidget { + String title, value, groupValue; + + ShowRadio( + {required this.title, required this.value, required this.groupValue}); + + @override + Widget build(BuildContext context) { + return Row( + mainAxisSize: MainAxisSize.min, + children: [ + Container( + width: 24, + height: 24, + decoration: BoxDecoration( + color: Colors.transparent, + border: Border.all(color: MyColors.grey98Color, width: 0.5), + borderRadius: BorderRadius.all(Radius.circular(100)), + ), + padding: EdgeInsets.all(4), + child: Container( + width: double.infinity, + height: double.infinity, + decoration: BoxDecoration( + color: value == groupValue ? Colors.black : Colors.transparent, + borderRadius: BorderRadius.all(Radius.circular(100)), + ), + ), + ), + 12.width, + title.toText12(isBold: true) + ], + ); + } +}