fix drawer design

login_design_fixes
Elham Rababah 5 years ago
parent acffc72f56
commit 97f7426aee

@ -31,6 +31,7 @@ class _AppDrawerState extends State<AppDrawer> {
Widget build(BuildContext context) { Widget build(BuildContext context) {
AuthenticationViewModel authenticationViewModel = Provider.of(context); AuthenticationViewModel authenticationViewModel = Provider.of(context);
projectsProvider = Provider.of(context); projectsProvider = Provider.of(context);
double drawerWidth = SizeConfig.realScreenWidth * 0.60;
return RoundedContainer( return RoundedContainer(
child: Container( child: Container(
color: Colors.white, color: Colors.white,
@ -41,7 +42,6 @@ class _AppDrawerState extends State<AppDrawer> {
child: ListView(padding: EdgeInsets.zero, children: <Widget>[ child: ListView(padding: EdgeInsets.zero, children: <Widget>[
Container( Container(
margin: EdgeInsets.symmetric(horizontal: 15), margin: EdgeInsets.symmetric(horizontal: 15),
// height: SizeConfig.heightMultiplier * 50,
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
@ -50,8 +50,11 @@ class _AppDrawerState extends State<AppDrawer> {
Container( Container(
child: Image.asset( child: Image.asset(
'assets/images/dr_app_logo.png', 'assets/images/dr_app_logo.png',
width: SizeConfig.getWidthMultiplier(
width: drawerWidth) * 30,
), ),
margin: EdgeInsets.only(top: 10, bottom: 10), margin: EdgeInsets.only(top: SizeConfig.heightMultiplier * 1, bottom: SizeConfig.heightMultiplier * 0.5),
), ),
Container( Container(
child: InkWell( child: InkWell(
@ -60,16 +63,16 @@ class _AppDrawerState extends State<AppDrawer> {
}, },
child: Icon( child: Icon(
DoctorApp.close_1, DoctorApp.close_1,
size: 20, size: SizeConfig.heightMultiplier * 3,
), ),
), ),
margin: EdgeInsets.only(top: 20, bottom: 10), margin: EdgeInsets.only(top: SizeConfig.heightMultiplier * 2, bottom: SizeConfig.heightMultiplier * 0.5),
) )
], ],
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment: MainAxisAlignment.spaceBetween,
), ),
SizedBox(height: 5), SizedBox(height: SizeConfig.heightMultiplier * 0.5,),
if (authenticationViewModel.doctorProfile != null) if (authenticationViewModel.doctorProfile != null)
InkWell( InkWell(
onTap: () { onTap: () {
@ -85,31 +88,42 @@ class _AppDrawerState extends State<AppDrawer> {
Padding( Padding(
padding: EdgeInsets.only(top: 10), padding: EdgeInsets.only(top: 10),
child: AppText( child: AppText(
TranslationBase.of(context).dr + TranslationBase
authenticationViewModel.doctorProfile?.doctorName, .of(context)
.dr +
authenticationViewModel.doctorProfile
?.doctorName,
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
color: Color(0xFF2E303A), color: Color(0xFF2E303A),
fontFamily: 'Poppins', fontFamily: 'Poppins',
fontSize: 17, fontSize: SizeConfig
.getTextMultiplierBasedOnWidth(
width: drawerWidth) * 8,
), ),
), ),
Padding( Padding(
padding: EdgeInsets.only(top: 0), padding: EdgeInsets.only(top: 0),
child: AppText( child: AppText(
authenticationViewModel.doctorProfile?.clinicDescription, authenticationViewModel.doctorProfile
?.clinicDescription,
fontWeight: FontWeight.w600, fontWeight: FontWeight.w600,
color: Color(0xFF2E303A), color: Color(0xFF2E303A),
fontSize: 15, fontSize: SizeConfig
.getTextMultiplierBasedOnWidth(
width: drawerWidth) * 6,
fontFamily: 'Poppins', fontFamily: 'Poppins',
)) ))
], ],
), ),
), ),
SizedBox(height: 40), SizedBox(height: SizeConfig.heightMultiplier * 4,),
InkWell( InkWell(
child: DrawerItem( child: DrawerItem(
TranslationBase.of(context).applyOrRescheduleLeave, TranslationBase
.of(context)
.applyOrRescheduleLeave,
icon: DoctorApp.reschedule__1, icon: DoctorApp.reschedule__1,
drawerWidth: drawerWidth,
// subTitle: , // subTitle: ,
), ),
onTap: () { onTap: () {
@ -122,19 +136,26 @@ class _AppDrawerState extends State<AppDrawer> {
)); ));
}, },
), ),
SizedBox(height: 15), SizedBox(height: SizeConfig.heightMultiplier *2),
InkWell( InkWell(
child: DrawerItem( child: DrawerItem(
TranslationBase.of(context).myQRCode, TranslationBase
.of(context)
.myQRCode,
icon: DoctorApp.qr_code_3, icon: DoctorApp.qr_code_3,
drawerWidth: drawerWidth,
// subTitle: , // subTitle: ,
), ),
), ),
SizedBox(height: 15), SizedBox(height: SizeConfig.heightMultiplier *1.5),
InkWell( InkWell(
child: Container( child: Container(
height: 80, // height: 80,
child: Image.asset('assets/images/qr_code.png'), child: Image.asset('assets/images/qr_code.png',
width: SizeConfig.getWidthMultiplier(
width: drawerWidth) * 30,
),
), ),
onTap: () {}, onTap: () {},
), ),
@ -142,7 +163,7 @@ class _AppDrawerState extends State<AppDrawer> {
), ),
), ),
SizedBox( SizedBox(
height: MediaQuery.of(context).size.height * 0.09, height: SizeConfig.heightMultiplier * 5,
), ),
Container( Container(
margin: EdgeInsets.symmetric(horizontal: 20), margin: EdgeInsets.symmetric(horizontal: 20),
@ -150,13 +171,19 @@ class _AppDrawerState extends State<AppDrawer> {
children: [ children: [
InkWell( InkWell(
child: DrawerItem( child: DrawerItem(
projectsProvider.isArabic projectsProvider.isArabic
? TranslationBase.of(context).lanEnglish ? TranslationBase
: TranslationBase.of(context).lanArabic, .of(context)
.lanEnglish
: TranslationBase
.of(context)
.lanArabic,
// icon: DoctorApp.qr_code, // icon: DoctorApp.qr_code,
assetLink: projectsProvider.isArabic assetLink: projectsProvider.isArabic
? 'assets/images/usa-flag.png' ? 'assets/images/usa-flag.png'
: 'assets/images/saudi-arabia-flag.png', : 'assets/images/saudi-arabia-flag.png',
drawerWidth: drawerWidth,
), ),
onTap: () { onTap: () {
if (projectsProvider.isArabic) if (projectsProvider.isArabic)
@ -165,11 +192,15 @@ class _AppDrawerState extends State<AppDrawer> {
projectsProvider.changeLanguage('ar'); projectsProvider.changeLanguage('ar');
}, },
), ),
SizedBox(height: 10), SizedBox(height: SizeConfig.heightMultiplier *0.5 ),
InkWell( InkWell(
child: DrawerItem( child: DrawerItem(
TranslationBase.of(context).logout, TranslationBase
.of(context)
.logout,
icon: DoctorApp.logout_1, icon: DoctorApp.logout_1,
drawerWidth: drawerWidth,
), ),
onTap: () async { onTap: () async {
Navigator.pop(context); Navigator.pop(context);
@ -187,7 +218,6 @@ class _AppDrawerState extends State<AppDrawer> {
flex: 1, flex: 1,
child: Column(children: <Widget>[ child: Column(children: <Widget>[
Container( Container(
// This align moves the children to the bottom
child: Align( child: Align(
alignment: FractionalOffset.bottomCenter, alignment: FractionalOffset.bottomCenter,
child: Container( child: Container(
@ -202,7 +232,9 @@ class _AppDrawerState extends State<AppDrawer> {
style: TextStyle( style: TextStyle(
color: Color(0xFF989898), color: Color(0xFF989898),
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
fontSize: 14, fontSize: SizeConfig
.getTextMultiplierBasedOnWidth(
width: drawerWidth) * 6,
fontFamily: 'Poppins', fontFamily: 'Poppins',
), ),
children: <TextSpan>[ children: <TextSpan>[
@ -210,24 +242,25 @@ class _AppDrawerState extends State<AppDrawer> {
text: ' Cloud Solutions', text: ' Cloud Solutions',
style: TextStyle( style: TextStyle(
color: Color(0xFF2E303A), color: Color(0xFF2E303A),
fontSize: 15, fontSize: SizeConfig
.getTextMultiplierBasedOnWidth(
width: drawerWidth) * 7,
fontFamily: 'Poppins', fontFamily: 'Poppins',
), ),
) )
]), ]),
), ),
), ),
// Text("Powered by"),
Image.asset( Image.asset(
'assets/images/cs_logo_container.png', 'assets/images/cs_logo_container.png',
width: SizeConfig.imageSizeMultiplier * 20, width: SizeConfig.imageSizeMultiplier * 20,
) )
], ],
)))) ))))
])) ]))
])), ])),
), ),
width: SizeConfig.realScreenWidth * 0.60, width: drawerWidth,
margin: EdgeInsets.all(0), margin: EdgeInsets.all(0),
customCornerRaduis: false, customCornerRaduis: false,

@ -11,8 +11,9 @@ class DrawerItem extends StatefulWidget {
final IconData icon; final IconData icon;
final Color color; final Color color;
final String assetLink; final String assetLink;
final double drawerWidth;
DrawerItem(this.title, {this.icon, this.color, this.subTitle = '', this.assetLink}); DrawerItem(this.title, {this.icon, this.color, this.subTitle = '', this.assetLink, this.drawerWidth});
@override @override
_DrawerItemState createState() => _DrawerItemState(); _DrawerItemState createState() => _DrawerItemState();
@ -50,7 +51,7 @@ class _DrawerItemState extends State<DrawerItem> {
marginLeft: 5, marginLeft: 5,
marginRight: 5, marginRight: 5,
color:widget.color ??Color(0xFF2E303A), color:widget.color ??Color(0xFF2E303A),
fontSize: 14, fontSize: SizeConfig.getTextMultiplierBasedOnWidth(width: widget.drawerWidth ) * 6,
fontFamily: 'Poppins', fontFamily: 'Poppins',
fontWeight: FontWeight.w600, fontWeight: FontWeight.w600,
), ),

Loading…
Cancel
Save