Size utils & fixes

haroon_dev
haroon amjad 3 weeks ago
parent 3c81cffa75
commit 65220270c2

@ -1,6 +1,8 @@
import 'dart:developer'; import 'dart:developer';
import 'package:flutter/material.dart'; // These are the Viewport values of your Figma Design. import 'package:device_info_plus/device_info_plus.dart';
import 'package:flutter/material.dart';
import 'package:sizer/sizer.dart'; // These are the Viewport values of your Figma Design.
// These are used in the code as a reference to create your UI Responsively. // These are used in the code as a reference to create your UI Responsively.
const num figmaDesignWidth = 375; // iPhone X / 12 base width const num figmaDesignWidth = 375; // iPhone X / 12 base width
@ -18,12 +20,23 @@ extension ResponsiveExtension on num {
double get h => (this * _screenHeight) / figmaDesignHeight; double get h => (this * _screenHeight) / figmaDesignHeight;
//radius //radius
double get r => (this * _screenWidth) / figmaDesignWidth; // double get r => (this * _screenWidth) / figmaDesignWidth;
double get r {
return isTablet ? ((this * _screenWidth) / figmaDesignWidth) * 0.7 : (this * _screenWidth) / figmaDesignWidth;
}
/// Scale text size /// Scale text size
// double get f {
// double scale = _screenWidth / figmaDesignWidth;
// if (scale > 1.6) scale = 1.6; // optional clamp for tablets
// return this * scale;
// }
double get f { double get f {
double scale = _screenWidth / figmaDesignWidth; double aspectRatio = _screenWidth / _screenHeight;
if (scale > 1.6) scale = 1.6; // optional clamp for tablets double scale = (_screenWidth < _screenHeight ? _screenWidth : _screenHeight) / figmaDesignWidth;
double clamp = (aspectRatio > 1.3 || aspectRatio < 0.77) ? 1.6 : 1.2;
if (scale > clamp) scale = clamp;
return this * scale; return this * scale;
} }
@ -129,8 +142,9 @@ class SizeUtils {
deviceType = DeviceType.mobile; deviceType = DeviceType.mobile;
} }
log("longerSide: $longerSide"); print("longerSide: $longerSide");
log("isTablet: $isTablet"); print("shorterSide: $shorterSide");
print("isTablet: $isTablet");
} }
} }

@ -256,7 +256,7 @@ class _AppointmentPaymentPageState extends State<AppointmentPaymentPage> {
backgroundColor: AppColors.primaryRedColor, backgroundColor: AppColors.primaryRedColor,
borderColor: AppColors.secondaryLightRedBorderColor, borderColor: AppColors.secondaryLightRedBorderColor,
textColor: AppColors.whiteColor, textColor: AppColors.whiteColor,
fontSize: 10, fontSize: 10.f,
fontWeight: FontWeight.w500, fontWeight: FontWeight.w500,
borderRadius: 8, borderRadius: 8,
padding: EdgeInsets.fromLTRB(15, 0, 15, 0), padding: EdgeInsets.fromLTRB(15, 0, 15, 0),

@ -101,7 +101,7 @@ class HospitalListItem extends StatelessWidget {
child: AppCustomChipWidget( child: AppCustomChipWidget(
labelText: "Location turned off".needTranslation, labelText: "Location turned off".needTranslation,
deleteIcon: AppAssets.location_unavailable, deleteIcon: AppAssets.location_unavailable,
deleteIconSize: Size(9, 12), deleteIconSize: Size(9.w, 12.h),
textColor: AppColors.blackColor, textColor: AppColors.blackColor,
)), )),
], ],

@ -61,7 +61,7 @@ class RegionListItem extends StatelessWidget {
Widget placesCountItem(String svgPath, String count, String title) { Widget placesCountItem(String svgPath, String count, String title) {
return AppCustomChipWidget( return AppCustomChipWidget(
iconSize: 14, iconSize: 14.h,
icon: svgPath, icon: svgPath,
iconHasColor: false, iconHasColor: false,
richText: RichText( richText: RichText(

@ -69,7 +69,6 @@ class _BookAppointmentPageState extends State<BookAppointmentPage> {
backgroundColor: AppColors.bgScaffoldColor, backgroundColor: AppColors.bgScaffoldColor,
body: CollapsingListView( body: CollapsingListView(
title: LocaleKeys.bookAppo.tr(context: context), title: LocaleKeys.bookAppo.tr(context: context),
isLeading: Navigator.of(context).canPop(),
child: SingleChildScrollView( child: SingleChildScrollView(
child: Consumer<BookAppointmentsViewModel>(builder: (context, bookAppointmentsVM, child) { child: Consumer<BookAppointmentsViewModel>(builder: (context, bookAppointmentsVM, child) {
return Column( return Column(
@ -458,9 +457,9 @@ class _BookAppointmentPageState extends State<BookAppointmentPage> {
backgroundColor: AppColors.primaryRedColor, backgroundColor: AppColors.primaryRedColor,
borderColor: AppColors.primaryRedColor, borderColor: AppColors.primaryRedColor,
textColor: AppColors.whiteColor, textColor: AppColors.whiteColor,
fontSize: 16, fontSize: 16.f,
fontWeight: FontWeight.w500, fontWeight: FontWeight.w500,
borderRadius: 12, borderRadius: 12.r,
padding: EdgeInsets.fromLTRB(10, 0, 10, 0), padding: EdgeInsets.fromLTRB(10, 0, 10, 0),
height: 50.h, height: 50.h,
icon: AppAssets.login1, icon: AppAssets.login1,

@ -180,10 +180,10 @@ class DoctorsFilters extends StatelessWidget{
backgroundColor: AppColors.primaryRedColor, backgroundColor: AppColors.primaryRedColor,
borderColor: AppColors.primaryRedColor, borderColor: AppColors.primaryRedColor,
textColor: Colors.white, textColor: Colors.white,
fontSize: 16, fontSize: 16.f,
padding: EdgeInsets.zero, padding: EdgeInsets.zero,
fontWeight: FontWeight.w500, fontWeight: FontWeight.w500,
borderRadius: 12, borderRadius: 10.r,
icon: AppAssets.add_icon, icon: AppAssets.add_icon,
iconColor: AppColors.primaryRedColor, iconColor: AppColors.primaryRedColor,
).paddingAll(24.h), ).paddingAll(24.h),

@ -250,9 +250,9 @@ class _SearchDoctorByNameState extends State<SearchDoctorByName> {
backgroundColor: AppColors.primaryRedColor, backgroundColor: AppColors.primaryRedColor,
borderColor: AppColors.primaryRedColor, borderColor: AppColors.primaryRedColor,
textColor: AppColors.whiteColor, textColor: AppColors.whiteColor,
fontSize: 16, fontSize: 16.f,
fontWeight: FontWeight.w500, fontWeight: FontWeight.w500,
borderRadius: 12, borderRadius: 10.r,
padding: EdgeInsets.fromLTRB(10, 0, 10, 0), padding: EdgeInsets.fromLTRB(10, 0, 10, 0),
height: 50.h, height: 50.h,
icon: AppAssets.search_icon, icon: AppAssets.search_icon,

@ -107,9 +107,9 @@ class SelectLivecareClinicPage extends StatelessWidget {
backgroundColor: AppColors.primaryRedColor, backgroundColor: AppColors.primaryRedColor,
borderColor: AppColors.primaryRedColor, borderColor: AppColors.primaryRedColor,
textColor: AppColors.whiteColor, textColor: AppColors.whiteColor,
fontSize: 16, fontSize: 16.f,
fontWeight: FontWeight.w500, fontWeight: FontWeight.w500,
borderRadius: 12, borderRadius: 10.r,
padding: EdgeInsets.fromLTRB(10, 0, 10, 0), padding: EdgeInsets.fromLTRB(10, 0, 10, 0),
height: 50.h, height: 50.h,
icon: AppAssets.livecare_book_icon, icon: AppAssets.livecare_book_icon,
@ -122,18 +122,13 @@ class SelectLivecareClinicPage extends StatelessWidget {
onPressed: () { onPressed: () {
Navigator.of(context).pop(); Navigator.of(context).pop();
onNegativeClicked?.call(); onNegativeClicked?.call();
// Navigator.of(context).push(
// CustomPageRoute(
// page: SelectDoctorPage(),
// ),
// );
}, },
backgroundColor: AppColors.secondaryLightRedColor, backgroundColor: AppColors.secondaryLightRedColor,
borderColor: AppColors.secondaryLightRedColor, borderColor: AppColors.secondaryLightRedColor,
textColor: AppColors.primaryRedColor, textColor: AppColors.primaryRedColor,
fontSize: 16, fontSize: 16.f,
fontWeight: FontWeight.w500, fontWeight: FontWeight.w500,
borderRadius: 12, borderRadius: 10.r,
padding: EdgeInsets.fromLTRB(10, 0, 10, 0), padding: EdgeInsets.fromLTRB(10, 0, 10, 0),
height: 50.h, height: 50.h,
).paddingSymmetrical(24.h, 0.h), ).paddingSymmetrical(24.h, 0.h),

@ -111,7 +111,7 @@ class _AppointmentCalendarState extends State<AppointmentCalendar> {
selectionDecoration: ShapeDecoration( selectionDecoration: ShapeDecoration(
color: AppColors.transparent, color: AppColors.transparent,
shape: SmoothRectangleBorder( shape: SmoothRectangleBorder(
borderRadius: BorderRadius.circular(12 ?? 0), borderRadius: BorderRadius.circular(10.r),
smoothness: 1, smoothness: 1,
side: BorderSide(color: AppColors.primaryRedColor, width: 1.5), side: BorderSide(color: AppColors.primaryRedColor, width: 1.5),
), ),
@ -246,10 +246,10 @@ class _AppointmentCalendarState extends State<AppointmentCalendar> {
backgroundColor: AppColors.primaryRedColor, backgroundColor: AppColors.primaryRedColor,
borderColor: AppColors.primaryRedColor, borderColor: AppColors.primaryRedColor,
textColor: AppColors.whiteColor, textColor: AppColors.whiteColor,
fontSize: 16, fontSize: 16.f,
fontWeight: FontWeight.w500, fontWeight: FontWeight.w500,
borderRadius: 12, borderRadius: 10.r,
padding: EdgeInsets.fromLTRB(10, 0, 10, 0), padding: EdgeInsets.symmetric(horizontal: 10.w),
height: 50.h, height: 50.h,
), ),
], ],

@ -159,10 +159,10 @@ class DoctorCard extends StatelessWidget {
backgroundColor: Color(0xffFEE9EA), backgroundColor: Color(0xffFEE9EA),
borderColor: Color(0xffFEE9EA), borderColor: Color(0xffFEE9EA),
textColor: Color(0xffED1C2B), textColor: Color(0xffED1C2B),
fontSize: 14, fontSize: 14.f,
fontWeight: FontWeight.w500, fontWeight: FontWeight.w500,
borderRadius: 12, borderRadius: 10.r,
padding: EdgeInsets.fromLTRB(10, 0, 10, 0), padding: EdgeInsets.fromLTRB(10.h, 0, 10.h, 0),
height: 40.h, height: 40.h,
icon: AppAssets.add_icon, icon: AppAssets.add_icon,
iconColor: AppColors.primaryRedColor, iconColor: AppColors.primaryRedColor,

@ -61,9 +61,9 @@ class LargeServiceCard extends StatelessWidget {
backgroundColor: AppColors.borderOnlyColor, backgroundColor: AppColors.borderOnlyColor,
borderColor: AppColors.borderOnlyColor, borderColor: AppColors.borderOnlyColor,
textColor: AppColors.whiteColor, textColor: AppColors.whiteColor,
fontSize: 14, fontSize: 14.f,
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
borderRadius: 12, borderRadius: 10.r,
padding: EdgeInsets.fromLTRB(10, 0, 10, 0), padding: EdgeInsets.fromLTRB(10, 0, 10, 0),
height: 40.h, height: 40.h,
), ),

@ -79,7 +79,7 @@ class CustomTabBarState extends State<CustomTabBar> {
padding: EdgeInsets.all(4.w), padding: EdgeInsets.all(4.w),
decoration: RoundedRectangleBorder().toSmoothCornerDecoration( decoration: RoundedRectangleBorder().toSmoothCornerDecoration(
color: AppColors.whiteColor, color: AppColors.whiteColor,
borderRadius: 12.r, borderRadius: 10.r,
), ),
child: Center(child: parentWidget)); child: Center(child: parentWidget));
} }
@ -92,7 +92,7 @@ class CustomTabBarState extends State<CustomTabBar> {
alignment: Alignment.center, alignment: Alignment.center,
decoration: RoundedRectangleBorder().toSmoothCornerDecoration( decoration: RoundedRectangleBorder().toSmoothCornerDecoration(
color: isSelected ? widget.activeBackgroundColor : widget.inActiveBackgroundColor, color: isSelected ? widget.activeBackgroundColor : widget.inActiveBackgroundColor,
borderRadius: 12.r, borderRadius: 10.r,
), ),
child: Row( child: Row(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,

@ -113,7 +113,7 @@ class TextInputWidget extends StatelessWidget {
children: [ children: [
Container( Container(
padding: padding, padding: padding,
height: 58.h, height: 63.h,
alignment: Alignment.center, alignment: Alignment.center,
decoration: RoundedRectangleBorder().toSmoothCornerDecoration( decoration: RoundedRectangleBorder().toSmoothCornerDecoration(
color: Colors.white, color: Colors.white,

Loading…
Cancel
Save