Work List screen
tall3at
4 years ago
parent
f16b3c5c79
commit
bf8dce2afd
@ -0,0 +1,25 @@
|
||||
import 'package:easy_localization/src/public_ext.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:mohem_flutter_app/classes/colors.dart';
|
||||
import 'package:mohem_flutter_app/generated/locale_keys.g.dart';
|
||||
import 'package:mohem_flutter_app/extensions/string_extensions.dart';
|
||||
|
||||
AppBar appBar(BuildContext context, {required String title}) {
|
||||
return AppBar(
|
||||
title: title.toText24(textColor: MyColors.darkTextColor),
|
||||
centerTitle: false,
|
||||
automaticallyImplyLeading: false,
|
||||
backgroundColor: Colors.white,
|
||||
actions: [
|
||||
IconButton(
|
||||
onPressed: () {
|
||||
Navigator.pop(context);
|
||||
},
|
||||
icon: Icon(
|
||||
Icons.close,
|
||||
color: MyColors.darkIconColor,
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,200 @@
|
||||
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/generated/locale_keys.g.dart';
|
||||
import 'package:mohem_flutter_app/ui/app_bar.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';
|
||||
|
||||
class WorkListScreen extends StatefulWidget {
|
||||
@override
|
||||
State<WorkListScreen> createState() => _WorkListScreenState();
|
||||
}
|
||||
|
||||
class _WorkListScreenState extends State<WorkListScreen> {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
backgroundColor: Colors.white,
|
||||
appBar: appBar(
|
||||
context,
|
||||
title: LocaleKeys.workList.tr(),
|
||||
),
|
||||
body: Container(
|
||||
width: double.infinity,
|
||||
height: double.infinity,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Container(
|
||||
width: double.infinity,
|
||||
height: 2,
|
||||
color: MyColors.darkWhiteColor,
|
||||
),
|
||||
Container(
|
||||
width: double.infinity,
|
||||
height: 40,
|
||||
margin: EdgeInsets.only(
|
||||
top: 21,
|
||||
),
|
||||
child: ListView.separated(
|
||||
itemBuilder: (context, index) {
|
||||
return Container(
|
||||
padding: EdgeInsets.only(
|
||||
left: 30,
|
||||
right: 30,
|
||||
),
|
||||
alignment: Alignment.center,
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(6),
|
||||
color: tabList[index].isSelected
|
||||
? MyColors.darkIconColor
|
||||
: MyColors.darkWhiteColor,
|
||||
),
|
||||
child: tabList[index].title.toText12(
|
||||
color: tabList[index].isSelected
|
||||
? MyColors.white
|
||||
: MyColors.black,
|
||||
),
|
||||
);
|
||||
},
|
||||
separatorBuilder: (context, index) {
|
||||
return 8.width;
|
||||
},
|
||||
shrinkWrap: true,
|
||||
itemCount: tabList.length,
|
||||
scrollDirection: Axis.horizontal,
|
||||
padding: const EdgeInsets.only(
|
||||
left: 21,
|
||||
right: 21,
|
||||
),
|
||||
),
|
||||
),
|
||||
Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
LocaleKeys.human.toText12(),
|
||||
LocaleKeys.resources.tr().toText24(isBold: true),
|
||||
],
|
||||
).paddingOnly(top: 24, left: 21, right: 21),
|
||||
24.height,
|
||||
Expanded(
|
||||
child: ListView.separated(
|
||||
itemBuilder: (context, index) {
|
||||
return rowItem(typesList[index]);
|
||||
},
|
||||
separatorBuilder: (context, index) {
|
||||
return 12.height;
|
||||
},
|
||||
itemCount: typesList.length,
|
||||
padding: EdgeInsets.only(left: 21, right: 21),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
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),
|
||||
),
|
||||
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,
|
||||
)
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class Tabs {
|
||||
String title;
|
||||
bool isSelected;
|
||||
|
||||
Tabs(this.title, this.isSelected);
|
||||
}
|
||||
|
||||
List<Tabs> tabList = [
|
||||
Tabs("All", true),
|
||||
Tabs("HR", false),
|
||||
Tabs("MO", false),
|
||||
Tabs("PR", false),
|
||||
Tabs("PO", false),
|
||||
];
|
||||
|
||||
class Types {
|
||||
String title;
|
||||
List<Color> colors;
|
||||
|
||||
Types(this.title, this.colors);
|
||||
}
|
||||
|
||||
List<Types> typesList = [
|
||||
Types("HR", [Color(0xff32D892), Color(0xff1AB170)]),
|
||||
Types("ITG", [Color(0xffEB8C90), Color(0xffDE6C70)]),
|
||||
Types("PO", [Color(0xff5099E3), Color(0xff3670AA)]),
|
||||
Types("PR", [Color(0xff48EACF), Color(0xff3DCAB3)]),
|
||||
Types("MO", [Color(0xff58DCFA), Color(0xff3CB9D5)]),
|
||||
];
|
||||
Loading…
Reference in New Issue