From 60b5d474c1d8efe2f87a3ecb3d8f07c1420b714e Mon Sep 17 00:00:00 2001 From: Elham Rababah Date: Sun, 6 Jun 2021 16:13:12 +0300 Subject: [PATCH] home design fixes for small and large screen --- lib/screens/home/dashboard_referral_patient.dart | 2 +- lib/screens/home/dashboard_swipe_widget.dart | 4 ++-- lib/screens/home/home_patient_card.dart | 7 ++++--- lib/screens/home/home_screen.dart | 15 ++++++++++++--- lib/screens/home/home_screen_header.dart | 14 ++++++-------- lib/widgets/dashboard/activity_card.dart | 2 +- .../dashboard/swiper_rounded_pagination.dart | 10 +++++----- .../patients/profile/profile-welcome-widget.dart | 2 +- lib/widgets/shared/app_drawer_widget.dart | 10 +++++----- lib/widgets/shared/app_scaffold_widget.dart | 4 +--- lib/widgets/shared/drawer_item_widget.dart | 8 ++++---- 11 files changed, 42 insertions(+), 36 deletions(-) diff --git a/lib/screens/home/dashboard_referral_patient.dart b/lib/screens/home/dashboard_referral_patient.dart index 1a9c09a2..0b9e6765 100644 --- a/lib/screens/home/dashboard_referral_patient.dart +++ b/lib/screens/home/dashboard_referral_patient.dart @@ -22,7 +22,7 @@ class DashboardReferralPatient extends StatelessWidget { Widget build(BuildContext context) { return RoundedContainer( raduis: 16, - showBorder: true, + showBorder: false, borderColor: Colors.white, shadowWidth: 0.2, shadowSpreadRadius: 3, diff --git a/lib/screens/home/dashboard_swipe_widget.dart b/lib/screens/home/dashboard_swipe_widget.dart index 1b5ce330..68e1263b 100644 --- a/lib/screens/home/dashboard_swipe_widget.dart +++ b/lib/screens/home/dashboard_swipe_widget.dart @@ -86,7 +86,7 @@ class _DashboardSwipeWidgetState extends State { if (index == 1) return RoundedContainer( raduis: 16, - showBorder: true, + showBorder: false, borderColor: Colors.white, shadowWidth: 0.2, shadowSpreadRadius: 3, @@ -102,7 +102,7 @@ class _DashboardSwipeWidgetState extends State { if (index == 0) return RoundedContainer( raduis: 16, - showBorder: true, + showBorder: false, borderColor: Colors.white, shadowWidth: 0.2, shadowSpreadRadius: 3, diff --git a/lib/screens/home/home_patient_card.dart b/lib/screens/home/home_patient_card.dart index 0a24b4db..3a7ded81 100644 --- a/lib/screens/home/home_patient_card.dart +++ b/lib/screens/home/home_patient_card.dart @@ -22,11 +22,12 @@ class HomePatientCard extends StatelessWidget { @override Widget build(BuildContext context) { - double width = SizeConfig.heightMultiplier* (SizeConfig.isHeightVeryShort?16:SizeConfig.isHeightVeryShort?14:13); + double width = SizeConfig.heightMultiplier* + (SizeConfig.isHeightVeryShort ? 16 : 13); return HomePageCard( color: backgroundColor, width: width, - margin: EdgeInsets.all(4), + margin: EdgeInsets.all(SizeConfig.widthMultiplier *1.6), child: Container( padding: EdgeInsets.all(8), child: Column( @@ -72,7 +73,7 @@ class HomePatientCard extends StatelessWidget { text, color: textColor, textAlign: TextAlign.start, - fontSize: SizeConfig.getTextMultiplierBasedOnWidth(width: width) * (SizeConfig.isHeightVeryShort?10:12), + fontSize: SizeConfig.getTextMultiplierBasedOnWidth(width: width) * (SizeConfig.isHeightVeryShort?11:12), ), ), ), diff --git a/lib/screens/home/home_screen.dart b/lib/screens/home/home_screen.dart index 2bc42f5e..75e02aa4 100644 --- a/lib/screens/home/home_screen.dart +++ b/lib/screens/home/home_screen.dart @@ -79,6 +79,9 @@ class _HomeScreenState extends State { ), body: ListView(children: [ Column(children: [ + // SizedBox( + // height: SizeConfig.heightMultiplier * 1.4, + // ), model.dashboardItemsList.length > 0 ? DashboardSwipeWidget( model.dashboardItemsList, @@ -90,6 +93,10 @@ class _HomeScreenState extends State { }, ) : SizedBox(), + + // SizedBox( + // height: SizeConfig.heightMultiplier * 1.4, + // ), model.dashboardItemsList.length > 0 ? FractionallySizedBox( widthFactor: 0.90, @@ -113,14 +120,16 @@ class _HomeScreenState extends State { ), ) : SizedBox(), - + SizedBox( + height: SizeConfig.heightMultiplier * 1.4, + ), FractionallySizedBox( // widthFactor: 0.90, child: Container( decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.only( - topRight: Radius.circular(50), + topRight: Radius.circular(70), )), padding: EdgeInsets.only(left: 20, top: 10, right: 20), margin: EdgeInsets.only(top: 10), @@ -153,7 +162,7 @@ class _HomeScreenState extends State { ], ), ), - SizedBox(height: SizeConfig.heightMultiplier* (SizeConfig.isHeightVeryShort?6:SizeConfig.isHeightShort?4:2)) + SizedBox(height: SizeConfig.heightMultiplier* (SizeConfig.isHeightVeryShort?3:SizeConfig.isHeightShort?4:2)) ], ), diff --git a/lib/screens/home/home_screen_header.dart b/lib/screens/home/home_screen_header.dart index 8e30504c..263d332f 100644 --- a/lib/screens/home/home_screen_header.dart +++ b/lib/screens/home/home_screen_header.dart @@ -11,6 +11,7 @@ import 'package:doctor_app_flutter/widgets/shared/app_texts_widget.dart'; import 'package:doctor_app_flutter/widgets/shared/loader/gif_loader_dialog_utils.dart'; import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; +import 'package:font_awesome_flutter/font_awesome_flutter.dart'; import 'package:provider/provider.dart'; // ignore: must_be_immutable @@ -28,7 +29,6 @@ class HomeScreenHeader extends StatefulWidget with PreferredSizeWidget { _HomeScreenHeaderState createState() => _HomeScreenHeaderState(); @override - // TODO: implement preferredSize Size get preferredSize => Size(double.maxFinite,height); } @@ -51,11 +51,8 @@ class _HomeScreenHeaderState extends State { color: Colors.grey[100], child: Stack(children: [ IconButton( - icon: Image.asset( - 'assets/images/menu.png', - width: SizeConfig.widthMultiplier * 7, - ), - iconSize: SizeConfig.heightMultiplier * 2, + icon: Icon(FontAwesomeIcons.ellipsisH), + iconSize: SizeConfig.heightMultiplier * (SizeConfig.isHeightVeryShort?4: 3), color: Colors.black, onPressed: () { widget.onOpenDrawer(); @@ -65,7 +62,7 @@ class _HomeScreenHeaderState extends State { children: [ ProfileWelcomeWidget( Row( - mainAxisAlignment: MainAxisAlignment.start, + mainAxisAlignment: MainAxisAlignment.end, children: [ Container( width: MediaQuery @@ -101,6 +98,7 @@ class _HomeScreenHeaderState extends State { mainAxisAlignment: MainAxisAlignment .center, + crossAxisAlignment: CrossAxisAlignment.center, children: [ Container( padding: @@ -158,7 +156,7 @@ class _HomeScreenHeaderState extends State { width: MediaQuery .of(context) .size - .width * .6) * 5, + .width * .6) * (SizeConfig.isWidthLarge?4:5), color: Color(0xFF2B353E), textOverflow: TextOverflow .ellipsis, diff --git a/lib/widgets/dashboard/activity_card.dart b/lib/widgets/dashboard/activity_card.dart index 44f0c50c..71fcad7f 100644 --- a/lib/widgets/dashboard/activity_card.dart +++ b/lib/widgets/dashboard/activity_card.dart @@ -13,7 +13,7 @@ class GetActivityCard extends StatelessWidget { return Container( width: width, padding: EdgeInsets.symmetric(horizontal: SizeConfig.heightMultiplier * .4, vertical: SizeConfig.heightMultiplier * .2), - margin: EdgeInsets.all(SizeConfig.heightMultiplier * .5), + margin: EdgeInsets.all(SizeConfig.widthMultiplier *1), decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.circular(15), diff --git a/lib/widgets/dashboard/swiper_rounded_pagination.dart b/lib/widgets/dashboard/swiper_rounded_pagination.dart index 7e5c2c70..c0360d96 100644 --- a/lib/widgets/dashboard/swiper_rounded_pagination.dart +++ b/lib/widgets/dashboard/swiper_rounded_pagination.dart @@ -1,3 +1,4 @@ +import 'package:doctor_app_flutter/config/size_config.dart'; import 'package:flutter/material.dart'; class SwiperRoundedPagination extends StatelessWidget { @@ -7,15 +8,14 @@ class SwiperRoundedPagination extends StatelessWidget { Widget build(BuildContext context) { return active == true ? Container( - height: 5, - width: 30, - // margin: EdgeInsets.only(10), + height: SizeConfig.heightMultiplier * .6, + width: SizeConfig.widthMultiplier * 6, decoration: BoxDecoration( borderRadius: BorderRadius.circular(5), color: Colors.black), ) : Container( - height: 5, - width: 8, + height: SizeConfig.heightMultiplier * .6, + width: SizeConfig.widthMultiplier * 2, margin: EdgeInsets.all(2), decoration: BoxDecoration( borderRadius: BorderRadius.circular(10), color: Colors.grey)); diff --git a/lib/widgets/patients/profile/profile-welcome-widget.dart b/lib/widgets/patients/profile/profile-welcome-widget.dart index a7621115..17b88630 100644 --- a/lib/widgets/patients/profile/profile-welcome-widget.dart +++ b/lib/widgets/patients/profile/profile-welcome-widget.dart @@ -22,7 +22,7 @@ class ProfileWelcomeWidget extends StatelessWidget { widthFactor: 0.9, child: Row( mainAxisAlignment: MainAxisAlignment.end, - crossAxisAlignment: CrossAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.center, children: [ this.isClinic == true ? clinicWidget : SizedBox(), SizedBox( diff --git a/lib/widgets/shared/app_drawer_widget.dart b/lib/widgets/shared/app_drawer_widget.dart index ee74590f..800bbc19 100644 --- a/lib/widgets/shared/app_drawer_widget.dart +++ b/lib/widgets/shared/app_drawer_widget.dart @@ -50,7 +50,7 @@ class _AppDrawerState extends State { child: Image.asset( 'assets/images/dr_app_logo.png', width: SizeConfig.getWidthMultiplier( - width: drawerWidth) * (SizeConfig.isHeightVeryShort? 25:SizeConfig.isHeightVeryShort?30: 32), + width: drawerWidth) * (SizeConfig.isHeightVeryShort? 25:SizeConfig.isHeightShort?32: 32), ), margin: EdgeInsets.only(top: SizeConfig.heightMultiplier * (SizeConfig.isHeightVeryShort?1:2), bottom: SizeConfig.heightMultiplier * 0.5), @@ -97,7 +97,7 @@ class _AppDrawerState extends State { fontFamily: 'Poppins', fontSize: SizeConfig .getTextMultiplierBasedOnWidth( - width: drawerWidth) * 8, + width: drawerWidth) * (SizeConfig.isWidthLarge?5: 8), ), ), Padding( @@ -109,7 +109,7 @@ class _AppDrawerState extends State { color: Color(0xFF2E303A), fontSize: SizeConfig .getTextMultiplierBasedOnWidth( - width: drawerWidth) * 6, + width: drawerWidth) * (SizeConfig.isWidthLarge?3: 6), fontFamily: 'Poppins', )) ], @@ -232,7 +232,7 @@ class _AppDrawerState extends State { fontWeight: FontWeight.bold, fontSize: SizeConfig .getTextMultiplierBasedOnWidth( - width: drawerWidth) * 6, + width: drawerWidth) * (SizeConfig.isWidthLarge?4: 6), fontFamily: 'Poppins', ), children: [ @@ -242,7 +242,7 @@ class _AppDrawerState extends State { color: Color(0xFF2E303A), fontSize: SizeConfig .getTextMultiplierBasedOnWidth( - width: drawerWidth) * 7, + width: drawerWidth) * (SizeConfig.isWidthLarge?5: 7), fontFamily: 'Poppins', ), ) diff --git a/lib/widgets/shared/app_scaffold_widget.dart b/lib/widgets/shared/app_scaffold_widget.dart index d3533801..e957b5d4 100644 --- a/lib/widgets/shared/app_scaffold_widget.dart +++ b/lib/widgets/shared/app_scaffold_widget.dart @@ -21,7 +21,6 @@ class AppScaffold extends StatelessWidget { final Widget appBar; final String subtitle; final bool isHomeIcon; - final Key key; AppScaffold( {this.appBarTitle = '', this.body, @@ -31,7 +30,7 @@ class AppScaffold extends StatelessWidget { this.bottomSheet, this.backgroundColor, this.isHomeIcon = true, - this.appBar, this.subtitle, this.key}); + this.appBar, this.subtitle}); @override Widget build(BuildContext context) { @@ -43,7 +42,6 @@ class AppScaffold extends StatelessWidget { }, child: Scaffold( backgroundColor: backgroundColor ?? Colors.white, - key: key, appBar: isShowAppBar ? appBar ?? AppBar( diff --git a/lib/widgets/shared/drawer_item_widget.dart b/lib/widgets/shared/drawer_item_widget.dart index 71021f5d..6d381cad 100644 --- a/lib/widgets/shared/drawer_item_widget.dart +++ b/lib/widgets/shared/drawer_item_widget.dart @@ -29,15 +29,15 @@ class _DrawerItemState extends State { children: [ if(widget.assetLink!=null) Container( - height: 20, - width: 20, + height: SizeConfig.imageSizeMultiplier * (SizeConfig.isWidthLarge?3: 5), + width: SizeConfig.imageSizeMultiplier * (SizeConfig.isWidthLarge?3: 5), child: Image.asset(widget.assetLink), ), if(widget.assetLink==null) Icon( widget.icon, color: widget.color ?? Colors.black87, - size: SizeConfig.imageSizeMultiplier * 5, + size: SizeConfig.imageSizeMultiplier * (SizeConfig.isWidthLarge?3: 5), ), Expanded( child: Column( @@ -51,7 +51,7 @@ class _DrawerItemState extends State { marginLeft: 5, marginRight: 5, color:widget.color ??Color(0xFF2E303A), - fontSize: SizeConfig.getTextMultiplierBasedOnWidth(width: widget.drawerWidth ) * (SizeConfig.isHeightVeryShort?5:6), + fontSize: SizeConfig.getTextMultiplierBasedOnWidth(width: widget.drawerWidth ) * (SizeConfig.isHeightVeryShort?5:(SizeConfig.isWidthLarge?4: 6)), fontFamily: 'Poppins', fontWeight: FontWeight.w600, ),