From b2466122d3747c4947554f9ac345554659bcd3d1 Mon Sep 17 00:00:00 2001 From: tall3at <91608104+tall3at@users.noreply.github.com> Date: Sun, 26 Dec 2021 17:03:59 +0500 Subject: [PATCH] internal Work List screen --- lib/classes/colors.dart | 2 + lib/config/routes.dart | 3 + .../fragments/actions_fragment.dart | 126 +++++++++++++++++ .../fragments/attachments_fragment.dart | 11 ++ .../fragments/info_fragments.dart | 11 ++ .../fragments/request_fragment.dart | 87 ++++++++++++ .../missing_swipe/missing_swipe_screen.dart | 105 ++++++++++++++ lib/ui/work_list/work_list_screen.dart | 130 +++++++++--------- lib/widgets/button/app_button.dart | 96 +++++++++++++ lib/widgets/button/default_button.dart | 61 ++++++-- 10 files changed, 557 insertions(+), 75 deletions(-) create mode 100644 lib/ui/work_list/missing_swipe/fragments/actions_fragment.dart create mode 100644 lib/ui/work_list/missing_swipe/fragments/attachments_fragment.dart create mode 100644 lib/ui/work_list/missing_swipe/fragments/info_fragments.dart create mode 100644 lib/ui/work_list/missing_swipe/fragments/request_fragment.dart create mode 100644 lib/ui/work_list/missing_swipe/missing_swipe_screen.dart create mode 100644 lib/widgets/button/app_button.dart diff --git a/lib/classes/colors.dart b/lib/classes/colors.dart index 7bca72b..d9c5656 100644 --- a/lib/classes/colors.dart +++ b/lib/classes/colors.dart @@ -3,6 +3,7 @@ import 'package:flutter/cupertino.dart'; class MyColors { static const Color darkIconColor = Color(0xff28323A); static const Color darkTextColor = Color(0xff2B353E); + static const Color normalTextColor = Color(0xff5A5A5A); static const Color lightTextColor = Color(0xffBFBFBF); static const Color gradiantStartColor = Color(0xff33c0a5); static const Color gradiantEndColor = Color(0xff259db7 ); @@ -18,4 +19,5 @@ class MyColors { static const Color yellowColor = Color(0xffF4E31C); static const Color black = Color(0xff000000); static const Color white = Color(0xffffffff); + static const Color green = Color(0xffffffff); } diff --git a/lib/config/routes.dart b/lib/config/routes.dart index c204655..7d171b7 100644 --- a/lib/config/routes.dart +++ b/lib/config/routes.dart @@ -2,6 +2,7 @@ import 'package:flutter/material.dart'; import 'package:mohem_flutter_app/ui/dashboard.dart'; import 'package:mohem_flutter_app/ui/login/login_screen.dart'; import 'package:mohem_flutter_app/ui/login/verify_login_screen.dart'; +import 'package:mohem_flutter_app/ui/work_list/missing_swipe/missing_swipe_screen.dart'; import 'package:mohem_flutter_app/ui/work_list/work_list_screen.dart'; class AppRoutes { @@ -17,6 +18,7 @@ class AppRoutes { //Work List static const String workList = "/workList"; + static const String missingSwipe = "/missingSwipe"; static final Map routes = { login: (context) => LoginScreen(), @@ -25,5 +27,6 @@ class AppRoutes { //Work List workList: (context) => WorkListScreen(), + missingSwipe: (context) => MissingSwipeScreen(), }; } diff --git a/lib/ui/work_list/missing_swipe/fragments/actions_fragment.dart b/lib/ui/work_list/missing_swipe/fragments/actions_fragment.dart new file mode 100644 index 0000000..05cf9ce --- /dev/null +++ b/lib/ui/work_list/missing_swipe/fragments/actions_fragment.dart @@ -0,0 +1,126 @@ +import 'package:flutter/material.dart'; +import 'package:mohem_flutter_app/classes/colors.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'; +import 'package:mohem_flutter_app/extensions/widget_extensions.dart'; +import 'dart:math' as math; + +class ActionsFragment extends StatelessWidget { + @override + Widget build(BuildContext context) { + return Container( + width: double.infinity, + height: double.infinity, + child: Column( + children: [ + showItem(), + ], + ), + ); + } + + Widget showItem() { + return Container( + width: double.infinity, + decoration: BoxDecoration( + color: Colors.white, + borderRadius: BorderRadius.circular(15), + boxShadow: [ + BoxShadow( + color: const Color(0xff000000).withOpacity(.05), + blurRadius: 26, + offset: const Offset(0, -3), + ), + ], + ), + clipBehavior: Clip.antiAlias, + margin: EdgeInsets.all(21), + child: Stack( + clipBehavior: Clip.antiAlias, + children: [ + Positioned( + left: -21, + child: Transform.rotate( + angle: 125, + child: Container( + width: 60, + height: 20, + color: Colors.black, + ), + ), + ), + Column( + children: [ + Padding( + padding: const EdgeInsets.only(left: 12, right: 12, top: 12), + child: Column( + children: [ + Row( + children: [ + CircularAvatar(), + 12.width, + Expanded( + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + "Mahmoud Shrouf".toText16(), + 6.height, + "Missing Swipe Request for Hussain, Mohammad has been approved" + .toText12(), + 3.height, + Row( + children: [ + "Submitted".toText10(), + 12.width, + "On 07 Jan 2021" + .toText12(color: MyColors.lightTextColor) + ], + ) + ], + ), + ) + ], + ), + ], + ), + ), + 12.height, + Container( + width: double.infinity, + height: 1, + color: MyColors.lightTextColor, + ), + Row( + children: [ + Expanded( + child: Center( + child: "Request Info" + .toText12(isBold: true) + .paddingOnly(left: 21, right: 21, top: 16, bottom: 8), + ), + ), + Center( + child: Container( + width: 1, + height: 45, + color: MyColors.lightTextColor, + ), + ), + Expanded( + child: Center( + child: "Delegate" + .toText12( + color: MyColors.gradiantEndColor, isBold: true) + .paddingOnly(left: 21, right: 21, top: 16, bottom: 8), + ), + ), + ], + ), + ], + ), + ], + ), + ); + } +} diff --git a/lib/ui/work_list/missing_swipe/fragments/attachments_fragment.dart b/lib/ui/work_list/missing_swipe/fragments/attachments_fragment.dart new file mode 100644 index 0000000..01eb52f --- /dev/null +++ b/lib/ui/work_list/missing_swipe/fragments/attachments_fragment.dart @@ -0,0 +1,11 @@ +import 'package:flutter/material.dart'; + +class AttachmentsFragment extends StatelessWidget { + @override + Widget build(BuildContext context) { + return Container( + width: double.infinity, + height: double.infinity, + ); + } +} diff --git a/lib/ui/work_list/missing_swipe/fragments/info_fragments.dart b/lib/ui/work_list/missing_swipe/fragments/info_fragments.dart new file mode 100644 index 0000000..8a6a2fa --- /dev/null +++ b/lib/ui/work_list/missing_swipe/fragments/info_fragments.dart @@ -0,0 +1,11 @@ +import 'package:flutter/material.dart'; + +class InfoFragment extends StatelessWidget { + @override + Widget build(BuildContext context) { + return Container( + width: double.infinity, + height: double.infinity, + ); + } +} diff --git a/lib/ui/work_list/missing_swipe/fragments/request_fragment.dart b/lib/ui/work_list/missing_swipe/fragments/request_fragment.dart new file mode 100644 index 0000000..0fb5170 --- /dev/null +++ b/lib/ui/work_list/missing_swipe/fragments/request_fragment.dart @@ -0,0 +1,87 @@ +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'; + +class RequestFragment extends StatefulWidget { + @override + State createState() => _RequestFragmentState(); +} + +class _RequestFragmentState extends State { + bool isOpened = false; + + @override + Widget build(BuildContext context) { + return Container( + width: double.infinity, + height: double.infinity, + child: Column( + children: [ + Container( + width: double.infinity, + decoration: BoxDecoration( + color: Colors.white, + borderRadius: BorderRadius.circular(15), + boxShadow: [ + BoxShadow( + color: const Color(0xff000000).withOpacity(.05), + blurRadius: 26, + offset: const Offset(0, -3), + ), + ], + ), + margin: EdgeInsets.all(21), + padding: EdgeInsets.only(top: 21, bottom: 21, right: 16, left: 16), + child: Column( + children: [ + Row( + children: [ + Expanded( + child: "Hardware Mobility 161 Messenger".toText16(), + ), + Icon(Icons.keyboard_arrow_down_rounded), + ], + ), + Column( + children: [ + 12.height, + showItem("Code:", "3188000067"), + showItem("Quantity:", "1"), + showItem("Line Status:", "Pending Approval"), + showItem("Transection Type:", "Move Order Issue:"), + showItem("Organization Code:", "SWD"), + showItem("From Subinventory:", "SWD_MSPS"), + showItem("To Subinventory:", "SWD_MSPS"), + showItem("Ship To Location :", + "SWD 11206-E.R. (Emergency Room)"), + showItem("Unit:", "Each"), + showItem("Date Required:", "12/23/2019 4:54:04 PM"), + showItem("Status Date:", "12/23/2019 4:54:04 PM"), + showItem("Operation Unit:", "Sehat Al Sewedi"), + showItem("Organization:", "Sehat Al Sewedi"), + showItem("From Locator:", "-"), + showItem("To Locator :", "-"), + ], + ), + ], + ), + ), + ], + ), + ); + } + + Widget showItem(String title, String value) { + return Padding( + padding: const EdgeInsets.only(top: 4, bottom: 4), + child: Row( + children: [ + title.toText12(isBold: true), + 6.width, + title.toText12(isBold: false, color: MyColors.normalTextColor), + ], + ), + ); + } +} diff --git a/lib/ui/work_list/missing_swipe/missing_swipe_screen.dart b/lib/ui/work_list/missing_swipe/missing_swipe_screen.dart new file mode 100644 index 0000000..ca3f5e1 --- /dev/null +++ b/lib/ui/work_list/missing_swipe/missing_swipe_screen.dart @@ -0,0 +1,105 @@ +import 'package:flutter/material.dart'; +import 'package:mohem_flutter_app/classes/colors.dart'; +import 'package:mohem_flutter_app/ui/app_bar.dart'; +import 'package:mohem_flutter_app/extensions/string_extensions.dart'; +import 'package:mohem_flutter_app/ui/work_list/missing_swipe/fragments/actions_fragment.dart'; +import 'package:mohem_flutter_app/ui/work_list/missing_swipe/fragments/attachments_fragment.dart'; +import 'package:mohem_flutter_app/ui/work_list/missing_swipe/fragments/info_fragments.dart'; +import 'package:mohem_flutter_app/ui/work_list/missing_swipe/fragments/request_fragment.dart'; +import 'package:mohem_flutter_app/widgets/button/app_button.dart'; +import 'package:mohem_flutter_app/widgets/button/default_button.dart'; +import 'package:mohem_flutter_app/extensions/int_extensions.dart'; + +class MissingSwipeScreen extends StatelessWidget { + @override + Widget build(BuildContext context) { + return DefaultTabController( + length: 4, + child: Scaffold( + appBar: appBar(context, title: "Missing Swipe Request"), + body: Container( + width: double.infinity, + height: double.infinity, + child: Column( + children: [ + Container( + decoration: BoxDecoration( + borderRadius: BorderRadius.only( + bottomLeft: Radius.circular(20), + bottomRight: Radius.circular(20)), + gradient: LinearGradient( + transform: GradientRotation(.46), + begin: Alignment.topRight, + end: Alignment.bottomRight, + colors: [ + MyColors.gradiantEndColor, + MyColors.gradiantStartColor, + ]), + ), + clipBehavior: Clip.antiAlias, + child: TabBar( + indicatorColor: Colors.white, + labelColor: Colors.white, + tabs: [ + Tab( + text: "Request", + ), + Tab( + text: "Actions", + ), + Tab( + text: "Attachments", + ), + Tab( + text: "Info.", + ), + ], + ), + ), + Expanded( + child: TabBarView( + children: [ + RequestFragment(), + ActionsFragment(), + AttachmentsFragment(), + InfoFragment(), + ], + ), + ), + Container( + width: double.infinity, + height: 60, + padding: EdgeInsets.only(left: 21, right: 21), + child: Row( + children: [ + Expanded( + child: DefaultButton( + "Reject", + () {}, + colors: [ + Color(0xffEB8C90), + Color(0xffDE6C70), + ], + ), + ), + 12.width, + Expanded( + child: DefaultButton( + "Approve", + () {}, + colors: [ + Color(0xff32D892), + Color(0xff1AB170), + ], + ), + ), + ], + ), + ) + ], + ), + ), + ), + ); + } +} diff --git a/lib/ui/work_list/work_list_screen.dart b/lib/ui/work_list/work_list_screen.dart index 9b9aee9..c3de75f 100644 --- a/lib/ui/work_list/work_list_screen.dart +++ b/lib/ui/work_list/work_list_screen.dart @@ -2,6 +2,7 @@ import 'package:easy_localization/src/public_ext.dart'; import 'package:flutter/material.dart'; import 'package:flutter_svg/svg.dart'; import 'package:mohem_flutter_app/classes/colors.dart'; +import 'package:mohem_flutter_app/config/routes.dart'; import 'package:mohem_flutter_app/generated/locale_keys.g.dart'; import 'package:mohem_flutter_app/ui/app_bar.dart'; import 'package:mohem_flutter_app/extensions/string_extensions.dart'; @@ -100,70 +101,75 @@ class _WorkListScreenState extends State { } Widget rowItem(Types types) { - return Container( - width: double.infinity, - padding: EdgeInsets.all(12), - decoration: BoxDecoration( - color: Colors.white, - borderRadius: BorderRadius.circular(10), - boxShadow: [ - BoxShadow( - color: const Color(0xff000000).withOpacity(.05), - blurRadius: 26, - offset: const Offset(0, -3), - ), - ], - ), - child: Row( - crossAxisAlignment: CrossAxisAlignment.start, - mainAxisAlignment: MainAxisAlignment.start, - children: [ - Container( - decoration: BoxDecoration( - borderRadius: BorderRadius.circular(4), - gradient: LinearGradient( - transform: GradientRotation(.46), - begin: Alignment.topRight, - end: Alignment.bottomRight, - colors: types.colors), + return InkWell( + onTap: (){ + Navigator.pushNamed(context, AppRoutes.missingSwipe); + }, + child: Container( + width: double.infinity, + padding: EdgeInsets.all(12), + decoration: BoxDecoration( + color: Colors.white, + borderRadius: BorderRadius.circular(10), + boxShadow: [ + BoxShadow( + color: const Color(0xff000000).withOpacity(.05), + blurRadius: 26, + offset: const Offset(0, -3), ), - child: Column( - crossAxisAlignment: CrossAxisAlignment.center, - children: [ - SvgPicture.asset( - "assets/images/miss_swipe.svg", - color: Colors.white, - ), - 2.height, - types.title.toText10(color: Colors.white) - ], - ).paddingAll(6), - ), - 12.width, - Expanded( - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - mainAxisAlignment: MainAxisAlignment.start, - children: [ - "Missing Swipe Request".toText16(), - "Missing Swipe Request for Hussain, Mohammad has been approved" - .toText10(), - 12.height, - Row( - children: [ - Expanded( - child: "07 Jan 2021" - .toText10(color: MyColors.lightTextColor)), - SvgPicture.asset( - "assets/images/arrow_next.svg", - color: MyColors.darkIconColor, - ) - ], - ), - ], + ], + ), + child: Row( + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisAlignment: MainAxisAlignment.start, + children: [ + Container( + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(4), + gradient: LinearGradient( + transform: GradientRotation(.46), + begin: Alignment.topRight, + end: Alignment.bottomRight, + colors: types.colors), + ), + child: Column( + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + SvgPicture.asset( + "assets/images/miss_swipe.svg", + color: Colors.white, + ), + 2.height, + types.title.toText10(color: Colors.white) + ], + ).paddingAll(6), ), - ), - ], + 12.width, + Expanded( + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisAlignment: MainAxisAlignment.start, + children: [ + "Missing Swipe Request".toText16(), + "Missing Swipe Request for Hussain, Mohammad has been approved" + .toText10(), + 12.height, + Row( + children: [ + Expanded( + child: "07 Jan 2021" + .toText10(color: MyColors.lightTextColor)), + SvgPicture.asset( + "assets/images/arrow_next.svg", + color: MyColors.darkIconColor, + ) + ], + ), + ], + ), + ), + ], + ), ), ); } diff --git a/lib/widgets/button/app_button.dart b/lib/widgets/button/app_button.dart new file mode 100644 index 0000000..ba9fe64 --- /dev/null +++ b/lib/widgets/button/app_button.dart @@ -0,0 +1,96 @@ +import 'package:flutter/cupertino.dart'; +import 'package:flutter/material.dart'; +import 'package:mohem_flutter_app/theme/colors.dart'; + +class AppButton extends StatefulWidget { + late AppButtonState _state; + + final String? text; + final double cornerRadius; + final EdgeInsets? margin; + final double? height; + final double? minWidth; + final VoidCallback? onClick; + final Color? color; + final Color? textColor; + final double fontSize; + final double elevation; + final bool bold; + + AppButton( + {this.text, + this.onClick, + this.cornerRadius = 10, + this.margin, + this.height, + this.color, + this.textColor, + this.minWidth, + this.fontSize = 15, + this.bold = true, + this.elevation = 5}); + + @override + State createState() => _state = AppButtonState(); + + enable() { + _state.setState(() { + _state.enable = true; + }); + } + + disable() { + _state.setState(() { + _state.enable = false; + }); + } + + Color borderColor = Colors.transparent; + double borderWidth = 0; + BorderStyle borderStyle = BorderStyle.solid; + + AppButton border(Color color, double width, {BorderStyle? style}) { + borderColor = color; + borderStyle = style ?? BorderStyle.solid; + borderWidth = width; + return this; + } +} + +class AppButtonState extends State { + bool enable = true; + + @override + Widget build(BuildContext context) { + var disableColor = + widget.color == null ? accentColor : widget.color!.withOpacity(0.2); + + // if(widget.bold) text.bold(); + // if(widget.fontSize != null) text.customSize(widget.fontSize); + + return Container( + height: widget.height ?? 60, + margin: widget.margin, + child: MaterialButton( + minWidth: widget.minWidth ?? 10, + elevation: widget.elevation, + onPressed: widget.onClick, + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(widget.cornerRadius), + side: BorderSide( + style: widget.borderStyle, + color: widget.borderColor, + width: widget.borderWidth)), + disabledColor: disableColor, + color: widget.color ?? accentColor, + child: Text( + widget.text ?? "", + style: TextStyle( + fontSize: 16, + fontWeight: FontWeight.bold, + ), + ), + ), + ); + } +} diff --git a/lib/widgets/button/default_button.dart b/lib/widgets/button/default_button.dart index 9e0fd23..77d1c61 100644 --- a/lib/widgets/button/default_button.dart +++ b/lib/widgets/button/default_button.dart @@ -3,7 +3,10 @@ import 'package:flutter_svg/svg.dart'; import 'package:mohem_flutter_app/classes/colors.dart'; extension WithContainer on Widget { - Widget get insideContainer => Container(color: Colors.white, padding: const EdgeInsets.only(top: 16, bottom: 16, right: 21, left: 21), child: this); + Widget get insideContainer => Container( + color: Colors.white, + padding: const EdgeInsets.only(top: 16, bottom: 16, right: 21, left: 21), + child: this); } class DefaultButton extends StatelessWidget { @@ -17,8 +20,18 @@ class DefaultButton extends StatelessWidget { final double? fontSize; final bool isTextExpanded; final int count; + final List? colors; - DefaultButton(this.text, this.onPress, {this.color, this.isTextExpanded = true, this.svgIcon, this.disabledColor, this.count = 0, this.textColor = Colors.white, this.iconData, this.fontSize}); + DefaultButton(this.text, this.onPress, + {this.color, + this.isTextExpanded = true, + this.svgIcon, + this.disabledColor, + this.count = 0, + this.textColor = Colors.white, + this.iconData, + this.fontSize, + this.colors}); @override Widget build(BuildContext context) { @@ -29,24 +42,36 @@ class DefaultButton extends StatelessWidget { decoration: BoxDecoration( borderRadius: BorderRadius.circular(6.0), gradient: onPress == null - ? const LinearGradient(colors: [Color(0xffEAEAEA), Color(0xffEAEAEA)]) - : const LinearGradient(transform: GradientRotation(.83), begin: Alignment.topRight, end: Alignment.bottomLeft, colors: [ - MyColors.gradiantEndColor, - MyColors.gradiantStartColor, - ]), + ? const LinearGradient( + colors: [Color(0xffEAEAEA), Color(0xffEAEAEA)]) + : LinearGradient( + transform: GradientRotation(.83), + begin: Alignment.topRight, + end: Alignment.bottomLeft, + colors: colors ?? + [ + MyColors.gradiantEndColor, + MyColors.gradiantStartColor, + ]), ), child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ if (iconData != null) Icon(iconData, color: textColor), - if (svgIcon != null) SvgPicture.asset(svgIcon ?? "", color: textColor), + if (svgIcon != null) + SvgPicture.asset(svgIcon ?? "", color: textColor), if (!isTextExpanded) Padding( - padding: EdgeInsets.only(left: (iconData ?? svgIcon) != null ? 6 : 0), + padding: EdgeInsets.only( + left: (iconData ?? svgIcon) != null ? 6 : 0), child: Text( text, textAlign: TextAlign.center, - style: TextStyle(fontSize: fontSize ?? 16, fontWeight: FontWeight.w600, color: textColor, letterSpacing: -0.48), + style: TextStyle( + fontSize: fontSize ?? 16, + fontWeight: FontWeight.w600, + color: textColor, + letterSpacing: -0.48), ), ), if (isTextExpanded) @@ -54,7 +79,11 @@ class DefaultButton extends StatelessWidget { child: Text( text, textAlign: TextAlign.center, - style: TextStyle(fontSize: fontSize ?? 16, fontWeight: FontWeight.w600, color: textColor, letterSpacing: -0.48), + style: TextStyle( + fontSize: fontSize ?? 16, + fontWeight: FontWeight.w600, + color: textColor, + letterSpacing: -0.48), ), ), if (count > 0) @@ -65,11 +94,17 @@ class DefaultButton extends StatelessWidget { padding: const EdgeInsets.only(left: 5, right: 5), alignment: Alignment.center, height: 16, - decoration: BoxDecoration(borderRadius: BorderRadius.circular(10.0), color: Colors.white), + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(10.0), + color: Colors.white), child: Text( "$count", textAlign: TextAlign.center, - style: const TextStyle(fontSize: 12, fontWeight: FontWeight.w700, color: Color(0xffD02127), letterSpacing: -0.6), + style: const TextStyle( + fontSize: 12, + fontWeight: FontWeight.w700, + color: Color(0xffD02127), + letterSpacing: -0.6), ), ), )