Size utils & fixes

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

@ -1,6 +1,8 @@
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.
const num figmaDesignWidth = 375; // iPhone X / 12 base width
@ -18,12 +20,23 @@ extension ResponsiveExtension on num {
double get h => (this * _screenHeight) / figmaDesignHeight;
//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
// 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 scale = _screenWidth / figmaDesignWidth;
if (scale > 1.6) scale = 1.6; // optional clamp for tablets
double aspectRatio = _screenWidth / _screenHeight;
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;
}
@ -129,8 +142,9 @@ class SizeUtils {
deviceType = DeviceType.mobile;
}
log("longerSide: $longerSide");
log("isTablet: $isTablet");
print("longerSide: $longerSide");
print("shorterSide: $shorterSide");
print("isTablet: $isTablet");
}
}

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

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

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

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

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

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

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

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

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

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

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

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

Loading…
Cancel
Save