Haroon6138
/
mohemm-flutter-app
1
0
Fork 0
Code Issues Pull Requests 3 Packages Projects Releases Wiki Activity

dashboard ui added.

Browse Source
merge-requests/1/merge
Sikander Saleem 4 years ago
parent 78ca9e2c70
commit f16b3c5c79
7 changed files with 314 additions and 216 deletions
Show Stats Download Patch File Download Diff File

1
assets/langs/ar-SA.json
Unescape Escape View File

@ -35,6 +35,7 @@
"viewAllOffers": "View All Offers", "viewAllOffers": "View All Offers",
"offers": "Offers & ", "offers": "Offers & ",
"discounts": "Discounts", "discounts": "Discounts",
"newString": "New",
"title": "Title", "title": "Title",
"home": "Home", "home": "Home",
"mySalary": "My Salary", "mySalary": "My Salary",

1
assets/langs/en-US.json
Unescape Escape View File

@ -35,6 +35,7 @@
"viewAllOffers": "View All Offers", "viewAllOffers": "View All Offers",
"offers": "Offers & ", "offers": "Offers & ",
"discounts": "Discounts", "discounts": "Discounts",
"newString": "New",
"title": "Title", "title": "Title",
"home": "Home", "home": "Home",
"mySalary": "My Salary", "mySalary": "My Salary",

4
lib/classes/colors.dart
Unescape Escape View File

@ -10,7 +10,9 @@ class MyColors {
static const Color grey57Color = Color(0xff575757); static const Color grey57Color = Color(0xff575757);
static const Color grey77Color = Color(0xff777777); static const Color grey77Color = Color(0xff777777);
static const Color grey98Color = Color(0xff989898); static const Color grey98Color = Color(0xff989898);
static const Color lightGreyColor = Color(0xffEFEFEF); static const Color lightGreyEFColor = Color(0xffEFEFEF);
static const Color lightGreyEDColor = Color(0xffEDEDED);
static const Color darkWhiteColor = Color(0xffE0E0E0); static const Color darkWhiteColor = Color(0xffE0E0E0);
static const Color redColor = Color(0xffD02127); static const Color redColor = Color(0xffD02127);
static const Color yellowColor = Color(0xffF4E31C);
} }

4
lib/dialogs/otp_dialog.dart
Unescape Escape View File

@ -3,10 +3,10 @@ import 'dart:async';
import 'package:easy_localization/src/public_ext.dart'; import 'package:easy_localization/src/public_ext.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart'; import 'package:flutter_svg/svg.dart';
import 'package:mohem_flutter_app/generated/locale_keys.g.dart';
import 'package:mohem_flutter_app/classes/colors.dart'; import 'package:mohem_flutter_app/classes/colors.dart';
import 'package:mohem_flutter_app/extensions/int_extensions.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/string_extensions.dart';
import 'package:mohem_flutter_app/generated/locale_keys.g.dart';
import 'package:mohem_flutter_app/widgets/otp_widget.dart'; import 'package:mohem_flutter_app/widgets/otp_widget.dart';
class OtpDialog { class OtpDialog {
@ -86,7 +86,7 @@ class OtpDialog {
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [ children: [
SvgPicture.asset( SvgPicture.asset(
type == 1 ? "assets/images/verify_sms.svg" : "assets/images/verify_whatsapp.svg", type == 1 ? "assets/images/login/verify_sms.svg" : "assets/images/login/verify_whatsapp.svg",
height: 50, height: 50,
width: 50, width: 50,
), ),

28
lib/extensions/string_extensions.dart
Unescape Escape View File

@ -5,9 +5,9 @@ import 'package:mohem_flutter_app/classes/colors.dart';
extension EmailValidator on String { extension EmailValidator on String {
Widget get toWidget => Text(this); Widget get toWidget => Text(this);
Widget toText10({Color? color}) => Text( Widget toText10({Color? color, bool isBold = false}) => Text(
this, this,
style: TextStyle(fontSize: 10, fontWeight: FontWeight.w600, color: color ?? MyColors.darkTextColor, letterSpacing: -0.4), style: TextStyle(fontSize: 10, fontWeight: isBold ? FontWeight.bold : FontWeight.w600, color: color ?? MyColors.darkTextColor, letterSpacing: -0.4),
); );
Widget toText11({Color? color, bool isUnderLine = false, bool isBold = false}) => Text( Widget toText11({Color? color, bool isUnderLine = false, bool isBold = false}) => Text(
@ -20,24 +20,26 @@ extension EmailValidator on String {
decoration: isUnderLine ? TextDecoration.underline : null), decoration: isUnderLine ? TextDecoration.underline : null),
); );
Widget toText12({Color? color, bool isUnderLine = false, bool isBold = false}) => Text( Widget toText12({Color? color, bool isUnderLine = false, bool isBold = false, bool isCenter = false, int maxLine = 0}) => Text(
this, this,
style: TextStyle( textAlign: isCenter ? TextAlign.center : null,
fontSize: 12, maxLines: (maxLine > 0) ? maxLine : null,
fontWeight: isBold ? FontWeight.bold : FontWeight.w600, style: TextStyle(
color: color ?? MyColors.darkTextColor, fontSize: 12,
letterSpacing: -0.72, fontWeight: isBold ? FontWeight.bold : FontWeight.w600,
decoration: isUnderLine ? TextDecoration.underline : null), color: color ?? MyColors.darkTextColor,
); letterSpacing: -0.72,
decoration: isUnderLine ? TextDecoration.underline : null),
);
Widget toText13({Color? color, bool isUnderLine = false}) => Text( Widget toText13({Color? color, bool isUnderLine = false}) => Text(
this, this,
style: TextStyle(fontSize: 13, fontWeight: FontWeight.w600, color: color ?? MyColors.darkTextColor, letterSpacing: -0.52, decoration: isUnderLine ? TextDecoration.underline : null), style: TextStyle(fontSize: 13, fontWeight: FontWeight.w600, color: color ?? MyColors.darkTextColor, letterSpacing: -0.52, decoration: isUnderLine ? TextDecoration.underline : null),
); );
Widget toText14({Color? color,bool isBold = false}) => Text( Widget toText14({Color? color, bool isBold = false}) => Text(
this, this,
style: TextStyle(color: color ?? MyColors.darkTextColor, fontSize: 14, letterSpacing: -0.48, fontWeight: isBold ? FontWeight.bold :FontWeight.w600), style: TextStyle(color: color ?? MyColors.darkTextColor, fontSize: 14, letterSpacing: -0.48, fontWeight: isBold ? FontWeight.bold : FontWeight.w600),
); );
Widget toText16({Color? color, bool isBold = false}) => Text( Widget toText16({Color? color, bool isBold = false}) => Text(

490
lib/ui/dashboard.dart
Unescape Escape View File

@ -38,235 +38,327 @@ class _DashboardState extends State<Dashboard> {
List<String> namesT = [LocaleKeys.monthlyAttendance.tr(), LocaleKeys.workFromHome.tr(), LocaleKeys.ticketRequest.tr(), LocaleKeys.monthlyAttendance.tr()]; List<String> namesT = [LocaleKeys.monthlyAttendance.tr(), LocaleKeys.workFromHome.tr(), LocaleKeys.ticketRequest.tr(), LocaleKeys.monthlyAttendance.tr()];
List<String> iconT = ["assets/images/monthly_attendance.svg", "assets/images/work_from_home.svg", "assets/images/ticket_request.svg", "assets/images/work_from_home.svg"]; List<String> iconT = ["assets/images/monthly_attendance.svg", "assets/images/work_from_home.svg", "assets/images/ticket_request.svg", "assets/images/work_from_home.svg"];
List<String> namesD = ["Nostalgia Perfume Perfume", "Al Nafoura", "AlJadi", "Nostalgia Perfume"];
return Scaffold( return Scaffold(
body: Column( body: Column(
children: [ children: [
Column( Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
Row( Row(
mainAxisSize: MainAxisSize.min,
children: [ children: [
Row( CircularAvatar(
mainAxisSize: MainAxisSize.min, width: 34,
children: [ height: 34,
CircularAvatar( url: "https://cdn4.iconfinder.com/data/icons/professions-2-2/151/89-512.png",
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( 8.width,
width: 36, SvgPicture.asset("assets/images/side_nav.svg"),
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),
),
)
],
),
)
], ],
).onPress(() {}),
Expanded(
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
//AppLogo(),
8.width,
LocaleKeys.mohemm.tr().toText14()
],
),
), ),
14.height, SizedBox(
LocaleKeys.goodMorning.tr().toText14(color: MyColors.grey77Color), width: 36,
"Mahmoud Shrouf".toText24(isBold: true), height: 36,
16.height, child: Stack(
Row( alignment: Alignment.centerLeft,
children: [ children: [
Expanded( SvgPicture.asset("assets/images/announcements.svg"),
child: AspectRatio( Positioned(
aspectRatio: 159 / 159, right: 0,
top: 0,
child: Container( child: Container(
decoration: BoxDecoration( padding: const EdgeInsets.only(left: 5, right: 5),
borderRadius: BorderRadius.circular(15), decoration: BoxDecoration(color: MyColors.redColor, borderRadius: BorderRadius.circular(17)),
gradient: const LinearGradient(transform: GradientRotation(.46), begin: Alignment.topRight, end: Alignment.bottomRight, colors: [ child: "3".toText12(color: Colors.white),
MyColors.gradiantEndColor, ),
MyColors.gradiantStartColor, )
]), ],
), ),
child: Stack( )
alignment: Alignment.center, ],
children: [ ).paddingOnly(left: 21, right: 21, top: 48, bottom: 7),
SvgPicture.asset("assets/images/"), Expanded(
Column( child: ListView(
crossAxisAlignment: CrossAxisAlignment.start, padding: EdgeInsets.zero,
children: [ children: [
Expanded( Column(
child: Column( crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min, children: [
LocaleKeys.goodMorning.tr().toText14(color: MyColors.grey77Color),
"Mahmoud Shrouf".toText24(isBold: true),
16.height,
Row(
children: [
Expanded(
child: AspectRatio(
aspectRatio: 159 / 159,
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,
]),
),
child: Stack(
alignment: Alignment.center,
children: [
SvgPicture.asset("assets/images/"),
Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
LocaleKeys.markAttendance.tr().toText14(color: Colors.white, isBold: true), Expanded(
9.height, child: Column(
"07:55:12".toText14(color: Colors.white, isBold: true), mainAxisSize: MainAxisSize.min,
LocaleKeys.timeLeftToday.tr().toText12(color: Colors.white), crossAxisAlignment: CrossAxisAlignment.start,
9.height, children: [
ClipRRect( LocaleKeys.markAttendance.tr().toText14(color: Colors.white, isBold: true),
borderRadius: const BorderRadius.all( 9.height,
Radius.circular(20), "07:55:12".toText14(color: Colors.white, isBold: true),
), LocaleKeys.timeLeftToday.tr().toText12(color: Colors.white),
child: LinearProgressIndicator( 9.height,
value: 0.7, const ClipRRect(
minHeight: 8, borderRadius: BorderRadius.all(
valueColor: const AlwaysStoppedAnimation<Color>(Colors.white), Radius.circular(20),
backgroundColor: const Color(0xff196D73), ),
), child: LinearProgressIndicator(
value: 0.7,
minHeight: 8,
valueColor: const AlwaysStoppedAnimation<Color>(Colors.white),
backgroundColor: const Color(0xff196D73),
),
),
],
).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],
).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("assets/images/stop.svg"),
),
],
), ),
], ],
).paddingOnly(top: 12, right: 15, left: 12), ),
],
),
),
),
),
9.width,
Expanded(
child: GridView.builder(
shrinkWrap: true,
primary: false,
physics: const NeverScrollableScrollPhysics(),
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2, childAspectRatio: 2 / 2, crossAxisSpacing: 9, mainAxisSpacing: 9),
padding: EdgeInsets.zero,
itemCount: 4,
itemBuilder: (BuildContext context, int index) {
return Container(
decoration: BoxDecoration(
color: Color(namesColor[index]),
borderRadius: BorderRadius.circular(10),
), ),
Row( child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
Expanded( names[index].toText12(color: Colors.white),
child: Column( Row(
mainAxisSize: MainAxisSize.min, children: [
crossAxisAlignment: CrossAxisAlignment.start, Expanded(
children: [LocaleKeys.checkIn.tr().toText12(color: Colors.white), "09:00".toText14(color: Colors.white, isBold: true), 4.height], child: namesInt[index].toStringAsFixed(1).toText16(color: Colors.white, isBold: true),
).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),
), ),
), SvgPicture.asset("assets/images/arrow_next.svg", color: Colors.white)
child: SvgPicture.asset("assets/images/stop.svg"), ],
), )
], ],
), ).paddingOnly(left: 10, right: 10, bottom: 6, top: 6),
], );
), },
], ),
), ),
), ],
), ),
), 20.height,
9.width, Row(
Expanded( crossAxisAlignment: CrossAxisAlignment.center,
child: GridView.builder( children: [
shrinkWrap: true, Expanded(
primary: false,
physics: const NeverScrollableScrollPhysics(),
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2, childAspectRatio: 2 / 2, crossAxisSpacing: 9, mainAxisSpacing: 9),
padding: EdgeInsets.zero,
itemCount: 4,
itemBuilder: (BuildContext context, int index) {
return Container(
decoration: BoxDecoration(
color: Color(namesColor[index]),
borderRadius: BorderRadius.circular(10),
),
child: Column( child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [ children: [
names[index].toText12(color: Colors.white), LocaleKeys.other.tr().toText12(),
Row( LocaleKeys.services.tr().toText24(isBold: true),
children: [
Expanded(
child: namesInt[index].toStringAsFixed(1).toText16(color: Colors.white, isBold: true),
),
SvgPicture.asset("assets/images/arrow_next.svg", color: Colors.white)
],
)
], ],
).paddingOnly(left: 10, right: 10, bottom: 6, top: 6), ),
); ),
}, LocaleKeys.viewAllServices.tr().toText12(isUnderLine: true),
),
),
],
),
20.height,
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
LocaleKeys.other.tr().toText12(),
LocaleKeys.services.tr().toText24(isBold: true),
], ],
), ),
],
).paddingOnly(left: 21, right: 21, top: 7),
SizedBox(
height: 105 + 26,
child: ListView.separated(
shrinkWrap: true,
physics: const BouncingScrollPhysics(),
padding: const EdgeInsets.only(left: 21, right: 21, top: 13, bottom: 13),
scrollDirection: Axis.horizontal,
itemBuilder: (cxt, index) {
return AspectRatio(
aspectRatio: 105 / 105,
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(15),
boxShadow: [
BoxShadow(
color: const Color(0xff000000).withOpacity(.05),
blurRadius: 26,
offset: const Offset(0, -3),
),
],
),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SvgPicture.asset(iconT[index]),
Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Expanded(
child: namesT[index].toText11(isBold: true),
),
SvgPicture.asset("assets/images/arrow_next.svg").paddingOnly(bottom: 4)
],
)
],
).paddingOnly(left: 10, right: 10, bottom: 10, top: 12),
),
);
},
separatorBuilder: (cxt, index) => 9.width,
itemCount: 4),
),
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),
), ),
LocaleKeys.viewAllServices.tr().toText12(isUnderLine: true), child: Column(
], mainAxisSize: MainAxisSize.min,
), children: [
], Row(
).paddingOnly(left: 21, right: 21, top: 48), crossAxisAlignment: CrossAxisAlignment.center,
SizedBox( children: [
height: 105 + 26, Expanded(
child: ListView.separated( child: Column(
shrinkWrap: true, crossAxisAlignment: CrossAxisAlignment.start,
physics: const BouncingScrollPhysics(), mainAxisSize: MainAxisSize.min,
padding: const EdgeInsets.only(left: 21, right: 21, top: 13, bottom: 13), children: [
scrollDirection: Axis.horizontal, LocaleKeys.offers.tr().toText12(),
itemBuilder: (cxt, index) { Row(
return AspectRatio( children: [
aspectRatio: 105 / 105, LocaleKeys.discounts.tr().toText24(isBold: true),
child: Container( 6.width,
decoration: BoxDecoration( Container(
color: Colors.white, padding: const EdgeInsets.only(left: 8, right: 8),
borderRadius: BorderRadius.circular(15), decoration: BoxDecoration(
boxShadow: [ color: MyColors.yellowColor,
BoxShadow( borderRadius: BorderRadius.circular(10),
color: const Color(0xff000000).withOpacity(.05), ),
blurRadius: 26, child: LocaleKeys.newString.tr().toText10(isBold: true)),
offset: const Offset(0, -3), ],
),
],
),
), ),
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),
),
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),
), ),
child: Column( ],
mainAxisAlignment: MainAxisAlignment.spaceBetween, ),
crossAxisAlignment: CrossAxisAlignment.start, )
children: [ ],
SvgPicture.asset(iconT[index]), ),
Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Expanded(
child: namesT[index].toText11(isBold: true),
),
SvgPicture.asset("assets/images/arrow_next.svg").paddingOnly(bottom: 4)
],
)
],
).paddingOnly(left: 10, right: 10, bottom: 10, top: 12),
),
);
},
separatorBuilder: (cxt, index) => 9.width,
itemCount: 4),
) )
], ],
), ),

2
lib/ui/login/verify_login_screen.dart
Unescape Escape View File

@ -641,7 +641,7 @@ class _VerifyLoginScreenState extends State<VerifyLoginScreen> {
decoration: BoxDecoration( decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15), borderRadius: BorderRadius.circular(15),
color: isDisable ? Colors.grey.withOpacity(0.3) : Colors.white, color: isDisable ? Colors.grey.withOpacity(0.3) : Colors.white,
border: Border.all(color: MyColors.lightGreyColor, width: 1), border: Border.all(color: MyColors.lightGreyEFColor, width: 1),
), ),
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,

Write Preview
Loading…
Cancel
Save