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",
"offers": "Offers & ",
"discounts": "Discounts",
"newString": "New",
"title": "Title",
"home": "Home",
"mySalary": "My Salary",

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

@ -35,6 +35,7 @@
"viewAllOffers": "View All Offers",
"offers": "Offers & ",
"discounts": "Discounts",
"newString": "New",
"title": "Title",
"home": "Home",
"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 grey77Color = Color(0xff777777);
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 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:flutter/material.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/extensions/int_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';
class OtpDialog {
@ -86,7 +86,7 @@ class OtpDialog {
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
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,
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 {
Widget get toWidget => Text(this);
Widget toText10({Color? color}) => Text(
Widget toText10({Color? color, bool isBold = false}) => Text(
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(
@ -20,24 +20,26 @@ extension EmailValidator on String {
decoration: isUnderLine ? TextDecoration.underline : null),
);
Widget toText12({Color? color, bool isUnderLine = false, bool isBold = false}) => Text(
this,
style: TextStyle(
fontSize: 12,
fontWeight: isBold ? FontWeight.bold : FontWeight.w600,
color: color ?? MyColors.darkTextColor,
letterSpacing: -0.72,
decoration: isUnderLine ? TextDecoration.underline : null),
);
Widget toText12({Color? color, bool isUnderLine = false, bool isBold = false, bool isCenter = false, int maxLine = 0}) => Text(
this,
textAlign: isCenter ? TextAlign.center : null,
maxLines: (maxLine > 0) ? maxLine : null,
style: TextStyle(
fontSize: 12,
fontWeight: isBold ? FontWeight.bold : FontWeight.w600,
color: color ?? MyColors.darkTextColor,
letterSpacing: -0.72,
decoration: isUnderLine ? TextDecoration.underline : null),
);
Widget toText13({Color? color, bool isUnderLine = false}) => Text(
this,
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,
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(

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> 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(
body: Column(
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
Row(
children: [
Row(
mainAxisSize: MainAxisSize.min,
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()
],
),
CircularAvatar(
width: 34,
height: 34,
url: "https://cdn4.iconfinder.com/data/icons/professions-2-2/151/89-512.png",
),
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),
),
)
],
),
)
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()
],
),
),
14.height,
LocaleKeys.goodMorning.tr().toText14(color: MyColors.grey77Color),
"Mahmoud Shrouf".toText24(isBold: true),
16.height,
Row(
children: [
Expanded(
child: AspectRatio(
aspectRatio: 159 / 159,
SizedBox(
width: 36,
height: 36,
child: Stack(
alignment: Alignment.centerLeft,
children: [
SvgPicture.asset("assets/images/announcements.svg"),
Positioned(
right: 0,
top: 0,
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,
children: [
Expanded(
child: Column(
mainAxisSize: MainAxisSize.min,
padding: const EdgeInsets.only(left: 5, right: 5),
decoration: BoxDecoration(color: MyColors.redColor, borderRadius: BorderRadius.circular(17)),
child: "3".toText12(color: Colors.white),
),
)
],
),
)
],
).paddingOnly(left: 21, right: 21, top: 48, bottom: 7),
Expanded(
child: ListView(
padding: EdgeInsets.zero,
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: 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,
children: [
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),
9.height,
ClipRRect(
borderRadius: const BorderRadius.all(
Radius.circular(20),
),
child: LinearProgressIndicator(
value: 0.7,
minHeight: 8,
valueColor: const AlwaysStoppedAnimation<Color>(Colors.white),
backgroundColor: const Color(0xff196D73),
),
Expanded(
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
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),
9.height,
const ClipRRect(
borderRadius: BorderRadius.all(
Radius.circular(20),
),
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: [
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),
names[index].toText12(color: Colors.white),
Row(
children: [
Expanded(
child: namesInt[index].toStringAsFixed(1).toText16(color: Colors.white, isBold: true),
),
),
child: SvgPicture.asset("assets/images/stop.svg"),
),
SvgPicture.asset("assets/images/arrow_next.svg", color: Colors.white)
],
)
],
),
],
),
],
).paddingOnly(left: 10, right: 10, bottom: 6, top: 6),
);
},
),
),
),
],
),
),
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),
),
20.height,
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
names[index].toText12(color: Colors.white),
Row(
children: [
Expanded(
child: namesInt[index].toStringAsFixed(1).toText16(color: Colors.white, isBold: true),
),
SvgPicture.asset("assets/images/arrow_next.svg", color: Colors.white)
],
)
LocaleKeys.other.tr().toText12(),
LocaleKeys.services.tr().toText24(isBold: true),
],
).paddingOnly(left: 10, right: 10, bottom: 6, top: 6),
);
},
),
),
],
),
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),
),
),
LocaleKeys.viewAllServices.tr().toText12(isUnderLine: 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),
],
),
],
).paddingOnly(left: 21, right: 21, top: 48),
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(
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: 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(
borderRadius: BorderRadius.circular(15),
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(
crossAxisAlignment: CrossAxisAlignment.start,

Write Preview
Loading…
Cancel
Save