From 97f7426aeeee806c847ab2ccf6cc2cf1d202fe44 Mon Sep 17 00:00:00 2001 From: Elham Rababah Date: Mon, 31 May 2021 10:52:54 +0300 Subject: [PATCH] fix drawer design --- lib/widgets/shared/app_drawer_widget.dart | 91 +++++++++++++++------- lib/widgets/shared/drawer_item_widget.dart | 5 +- 2 files changed, 65 insertions(+), 31 deletions(-) diff --git a/lib/widgets/shared/app_drawer_widget.dart b/lib/widgets/shared/app_drawer_widget.dart index 8f8c0108..820c63cb 100644 --- a/lib/widgets/shared/app_drawer_widget.dart +++ b/lib/widgets/shared/app_drawer_widget.dart @@ -31,6 +31,7 @@ class _AppDrawerState extends State { Widget build(BuildContext context) { AuthenticationViewModel authenticationViewModel = Provider.of(context); projectsProvider = Provider.of(context); + double drawerWidth = SizeConfig.realScreenWidth * 0.60; return RoundedContainer( child: Container( color: Colors.white, @@ -41,7 +42,6 @@ class _AppDrawerState extends State { child: ListView(padding: EdgeInsets.zero, children: [ Container( margin: EdgeInsets.symmetric(horizontal: 15), - // height: SizeConfig.heightMultiplier * 50, child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ @@ -50,8 +50,11 @@ class _AppDrawerState extends State { Container( child: Image.asset( '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( child: InkWell( @@ -60,16 +63,16 @@ class _AppDrawerState extends State { }, child: Icon( 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, mainAxisAlignment: MainAxisAlignment.spaceBetween, ), - SizedBox(height: 5), + SizedBox(height: SizeConfig.heightMultiplier * 0.5,), if (authenticationViewModel.doctorProfile != null) InkWell( onTap: () { @@ -85,31 +88,42 @@ class _AppDrawerState extends State { Padding( padding: EdgeInsets.only(top: 10), child: AppText( - TranslationBase.of(context).dr + - authenticationViewModel.doctorProfile?.doctorName, + TranslationBase + .of(context) + .dr + + authenticationViewModel.doctorProfile + ?.doctorName, fontWeight: FontWeight.bold, color: Color(0xFF2E303A), fontFamily: 'Poppins', - fontSize: 17, + fontSize: SizeConfig + .getTextMultiplierBasedOnWidth( + width: drawerWidth) * 8, ), ), Padding( padding: EdgeInsets.only(top: 0), child: AppText( - authenticationViewModel.doctorProfile?.clinicDescription, + authenticationViewModel.doctorProfile + ?.clinicDescription, fontWeight: FontWeight.w600, color: Color(0xFF2E303A), - fontSize: 15, + fontSize: SizeConfig + .getTextMultiplierBasedOnWidth( + width: drawerWidth) * 6, fontFamily: 'Poppins', )) ], ), ), - SizedBox(height: 40), + SizedBox(height: SizeConfig.heightMultiplier * 4,), InkWell( child: DrawerItem( - TranslationBase.of(context).applyOrRescheduleLeave, + TranslationBase + .of(context) + .applyOrRescheduleLeave, icon: DoctorApp.reschedule__1, + drawerWidth: drawerWidth, // subTitle: , ), onTap: () { @@ -122,19 +136,26 @@ class _AppDrawerState extends State { )); }, ), - SizedBox(height: 15), + SizedBox(height: SizeConfig.heightMultiplier *2), InkWell( child: DrawerItem( - TranslationBase.of(context).myQRCode, + TranslationBase + .of(context) + .myQRCode, icon: DoctorApp.qr_code_3, + drawerWidth: drawerWidth, + // subTitle: , ), ), - SizedBox(height: 15), + SizedBox(height: SizeConfig.heightMultiplier *1.5), InkWell( child: Container( - height: 80, - child: Image.asset('assets/images/qr_code.png'), + // height: 80, + child: Image.asset('assets/images/qr_code.png', + width: SizeConfig.getWidthMultiplier( + width: drawerWidth) * 30, + ), ), onTap: () {}, ), @@ -142,7 +163,7 @@ class _AppDrawerState extends State { ), ), SizedBox( - height: MediaQuery.of(context).size.height * 0.09, + height: SizeConfig.heightMultiplier * 5, ), Container( margin: EdgeInsets.symmetric(horizontal: 20), @@ -150,13 +171,19 @@ class _AppDrawerState extends State { children: [ InkWell( child: DrawerItem( + projectsProvider.isArabic - ? TranslationBase.of(context).lanEnglish - : TranslationBase.of(context).lanArabic, + ? TranslationBase + .of(context) + .lanEnglish + : TranslationBase + .of(context) + .lanArabic, // icon: DoctorApp.qr_code, assetLink: projectsProvider.isArabic ? 'assets/images/usa-flag.png' : 'assets/images/saudi-arabia-flag.png', + drawerWidth: drawerWidth, ), onTap: () { if (projectsProvider.isArabic) @@ -165,11 +192,15 @@ class _AppDrawerState extends State { projectsProvider.changeLanguage('ar'); }, ), - SizedBox(height: 10), + SizedBox(height: SizeConfig.heightMultiplier *0.5 ), InkWell( child: DrawerItem( - TranslationBase.of(context).logout, + TranslationBase + .of(context) + .logout, icon: DoctorApp.logout_1, + drawerWidth: drawerWidth, + ), onTap: () async { Navigator.pop(context); @@ -187,7 +218,6 @@ class _AppDrawerState extends State { flex: 1, child: Column(children: [ Container( - // This align moves the children to the bottom child: Align( alignment: FractionalOffset.bottomCenter, child: Container( @@ -202,7 +232,9 @@ class _AppDrawerState extends State { style: TextStyle( color: Color(0xFF989898), fontWeight: FontWeight.bold, - fontSize: 14, + fontSize: SizeConfig + .getTextMultiplierBasedOnWidth( + width: drawerWidth) * 6, fontFamily: 'Poppins', ), children: [ @@ -210,24 +242,25 @@ class _AppDrawerState extends State { text: ' Cloud Solutions', style: TextStyle( color: Color(0xFF2E303A), - fontSize: 15, + fontSize: SizeConfig + .getTextMultiplierBasedOnWidth( + width: drawerWidth) * 7, fontFamily: 'Poppins', ), ) ]), ), ), - // Text("Powered by"), Image.asset( 'assets/images/cs_logo_container.png', width: SizeConfig.imageSizeMultiplier * 20, ) ], - )))) + )))) ])) - ])), + ])), ), - width: SizeConfig.realScreenWidth * 0.60, + width: drawerWidth, margin: EdgeInsets.all(0), customCornerRaduis: false, diff --git a/lib/widgets/shared/drawer_item_widget.dart b/lib/widgets/shared/drawer_item_widget.dart index 2b8ce40d..3526f57a 100644 --- a/lib/widgets/shared/drawer_item_widget.dart +++ b/lib/widgets/shared/drawer_item_widget.dart @@ -11,8 +11,9 @@ class DrawerItem extends StatefulWidget { final IconData icon; final Color color; 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 _DrawerItemState createState() => _DrawerItemState(); @@ -50,7 +51,7 @@ class _DrawerItemState extends State { marginLeft: 5, marginRight: 5, color:widget.color ??Color(0xFF2E303A), - fontSize: 14, + fontSize: SizeConfig.getTextMultiplierBasedOnWidth(width: widget.drawerWidth ) * 6, fontFamily: 'Poppins', fontWeight: FontWeight.w600, ),