From 6e1eb0d0bb46b1468185250ffbacc096da866fea Mon Sep 17 00:00:00 2001 From: Sikander Saleem Date: Mon, 26 Jan 2026 10:48:07 +0300 Subject: [PATCH] ui improvements --- lib/core/utils/size_utils.dart | 17 +- lib/main.dart | 234 ++++++++++--------- lib/presentation/home/landing_page.dart | 4 +- lib/widgets/appbar/collapsing_list_view.dart | 38 ++- pubspec.yaml | 1 + 5 files changed, 150 insertions(+), 144 deletions(-) diff --git a/lib/core/utils/size_utils.dart b/lib/core/utils/size_utils.dart index 736f1ac..d04ad70 100644 --- a/lib/core/utils/size_utils.dart +++ b/lib/core/utils/size_utils.dart @@ -4,8 +4,11 @@ import 'dart:math' as math; import 'package:flutter/material.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 = 430; // iPhone X / 12 base width, -const num figmaDesignHeight = 927; // iPhone X / 12 base height +const num figmaDesignWidth = 430; // iPhone X / 12 base width, 375 +const num figmaDesignHeight = 927; // iPhone X / 12 base height 812 + +const num figmaDesignWidthTF = 375; +const num figmaDesignHeightTF = 812; extension ConstrainedResponsive on num { /// Width with max cap for tablets @@ -50,9 +53,9 @@ extension ResponsiveExtension on num { double get w { double baseScale = (this * _screenWidth) / figmaDesignWidth; - if (_isFoldable) { + if (_isFoldable|| isTablet ) { // For foldables, use more conservative width scaling - double scale = _screenWidth / figmaDesignWidth; + double scale = _screenWidth / figmaDesignWidthTF; scale = scale.clamp(0.8, 1.4); return this * scale; } @@ -64,9 +67,9 @@ extension ResponsiveExtension on num { double get h { double baseScale = (this * _screenHeight) / figmaDesignHeight; - if (_isFoldable) { + if (_isFoldable || isTablet ) { // For foldables, use height-based scaling but with constraints - double scale = (_screenHeight / figmaDesignHeight).clamp(0.8, 1.4); + double scale = (_screenHeight / figmaDesignHeightTF).clamp(0.8, 1.4); return this * scale; } @@ -79,7 +82,7 @@ extension ResponsiveExtension on num { if (_isFoldable || isTablet) { // Use the same logic as enhanced width for foldables - double scale = _screenWidth / figmaDesignWidth; + double scale = _screenWidth / figmaDesignWidthTF; scale = scale.clamp(0.8, 1.4); return this * scale; } diff --git a/lib/main.dart b/lib/main.dart index e15e8a7..82b758e 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -1,8 +1,10 @@ import 'dart:io'; +import 'package:device_preview/device_preview.dart'; import 'package:easy_localization/easy_localization.dart'; import 'package:firebase_core/firebase_core.dart'; import 'package:firebase_messaging/firebase_messaging.dart'; +import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; import 'package:hmg_patient_app_new/core/app_state.dart'; @@ -89,120 +91,123 @@ Future callInitializations() async { void main() async { await callInitializations(); runApp( - EasyLocalization( - supportedLocales: const [ - Locale('en', 'US'), - Locale('ar', 'SA'), - ], - path: 'assets/langs', - fallbackLocale: Locale('en', 'US'), - child: MultiProvider(providers: [ - ChangeNotifierProvider( - create: (_) => getIt.get(), - ), - ChangeNotifierProvider( - create: (_) => getIt.get(), - ), - ChangeNotifierProvider( - create: (_) => getIt.get(), - ), - ChangeNotifierProvider( - create: (_) => getIt.get(), - ), - ChangeNotifierProvider( - create: (_) => getIt.get(), - ), - ChangeNotifierProvider( - create: (_) => getIt.get(), - ), - ChangeNotifierProvider( - create: (_) => getIt.get(), - ), - ChangeNotifierProvider( - create: (_) => getIt.get(), - ), - ChangeNotifierProvider( - create: (_) => getIt.get(), - ), - ChangeNotifierProvider( - create: (_) => getIt.get(), - ), - ChangeNotifierProvider( - create: (_) => getIt.get(), - ), - ChangeNotifierProvider( - create: (_) => getIt.get(), - ), - ChangeNotifierProvider( - create: (_) => getIt.get(), - ), - ChangeNotifierProvider( - create: (_) => getIt.get(), - ), - ChangeNotifierProvider( - create: (_) => getIt.get(), - ), - ChangeNotifierProvider( - create: (_) => getIt.get(), - ), - ChangeNotifierProvider( - create: (_) => getIt.get(), - ), - ChangeNotifierProvider( - create: (_) => getIt.get(), - ), - ChangeNotifierProvider( - create: (_) => getIt.get(), - ), - ChangeNotifierProvider( - create: (_) => getIt.get(), - ), - ChangeNotifierProvider( - create: (_) => getIt.get(), - ), - ChangeNotifierProvider( - create: (_) => getIt.get(), - ), - ChangeNotifierProvider( - create: (_) => getIt.get(), - ), - ChangeNotifierProvider( - create: (_) => getIt.get(), - ), - ChangeNotifierProvider( - create: (_) => getIt.get(), - ), - ChangeNotifierProvider( - create: (_) => getIt.get(), - ), - ChangeNotifierProvider( - create: (_) => getIt.get(), - ), - ChangeNotifierProvider( - create: (_) => getIt.get(), - ), - ChangeNotifierProvider( - create: (_) => getIt.get(), - ), - ChangeNotifierProvider( - create: (_) => getIt.get(), - ), - ChangeNotifierProvider( - create: (_) => getIt.get(), - ), - ChangeNotifierProvider( - create: (_) => getIt.get(), - ), - ChangeNotifierProvider( - create: (_) => getIt.get(), - ), - ChangeNotifierProvider( - create: (_) => getIt.get(), - ), - ChangeNotifierProvider( - create: (_) => getIt.get(), - ) - ], child: MyApp()), + DevicePreview( + enabled: false, + builder: (context) => EasyLocalization( + supportedLocales: const [ + Locale('en', 'US'), + Locale('ar', 'SA'), + ], + path: 'assets/langs', + fallbackLocale: Locale('en', 'US'), + child: MultiProvider(providers: [ + ChangeNotifierProvider( + create: (_) => getIt.get(), + ), + ChangeNotifierProvider( + create: (_) => getIt.get(), + ), + ChangeNotifierProvider( + create: (_) => getIt.get(), + ), + ChangeNotifierProvider( + create: (_) => getIt.get(), + ), + ChangeNotifierProvider( + create: (_) => getIt.get(), + ), + ChangeNotifierProvider( + create: (_) => getIt.get(), + ), + ChangeNotifierProvider( + create: (_) => getIt.get(), + ), + ChangeNotifierProvider( + create: (_) => getIt.get(), + ), + ChangeNotifierProvider( + create: (_) => getIt.get(), + ), + ChangeNotifierProvider( + create: (_) => getIt.get(), + ), + ChangeNotifierProvider( + create: (_) => getIt.get(), + ), + ChangeNotifierProvider( + create: (_) => getIt.get(), + ), + ChangeNotifierProvider( + create: (_) => getIt.get(), + ), + ChangeNotifierProvider( + create: (_) => getIt.get(), + ), + ChangeNotifierProvider( + create: (_) => getIt.get(), + ), + ChangeNotifierProvider( + create: (_) => getIt.get(), + ), + ChangeNotifierProvider( + create: (_) => getIt.get(), + ), + ChangeNotifierProvider( + create: (_) => getIt.get(), + ), + ChangeNotifierProvider( + create: (_) => getIt.get(), + ), + ChangeNotifierProvider( + create: (_) => getIt.get(), + ), + ChangeNotifierProvider( + create: (_) => getIt.get(), + ), + ChangeNotifierProvider( + create: (_) => getIt.get(), + ), + ChangeNotifierProvider( + create: (_) => getIt.get(), + ), + ChangeNotifierProvider( + create: (_) => getIt.get(), + ), + ChangeNotifierProvider( + create: (_) => getIt.get(), + ), + ChangeNotifierProvider( + create: (_) => getIt.get(), + ), + ChangeNotifierProvider( + create: (_) => getIt.get(), + ), + ChangeNotifierProvider( + create: (_) => getIt.get(), + ), + ChangeNotifierProvider( + create: (_) => getIt.get(), + ), + ChangeNotifierProvider( + create: (_) => getIt.get(), + ), + ChangeNotifierProvider( + create: (_) => getIt.get(), + ), + ChangeNotifierProvider( + create: (_) => getIt.get(), + ), + ChangeNotifierProvider( + create: (_) => getIt.get(), + ), + ChangeNotifierProvider( + create: (_) => getIt.get(), + ), + ChangeNotifierProvider( + create: (_) => getIt.get(), + ) + ], child: MyApp()), + ), // Wrap your app ), ); } @@ -243,4 +248,3 @@ class MyApp extends StatelessWidget { } } // flutter pub run easy_localization:generate -S assets/langs -f keys -o locale_keys.g.dart - diff --git a/lib/presentation/home/landing_page.dart b/lib/presentation/home/landing_page.dart index 36bd3a1..59babf8 100644 --- a/lib/presentation/home/landing_page.dart +++ b/lib/presentation/home/landing_page.dart @@ -299,9 +299,9 @@ class _LandingPageState extends State { backgroundColor: Color(0xFF2B353E), borderColor: Color(0xFF2B353E), textColor: AppColors.whiteColor, - fontSize: 14, + fontSize: 14.f, fontWeight: FontWeight.w600, - borderRadius: 12, + borderRadius: 12.r, height: 40.h, ), ], diff --git a/lib/widgets/appbar/collapsing_list_view.dart b/lib/widgets/appbar/collapsing_list_view.dart index 2b453ef..7a771d1 100644 --- a/lib/widgets/appbar/collapsing_list_view.dart +++ b/lib/widgets/appbar/collapsing_list_view.dart @@ -1,4 +1,3 @@ - import 'package:easy_localization/easy_localization.dart'; import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; @@ -69,7 +68,7 @@ class CollapsingListView extends StatelessWidget { automaticallyImplyLeading: isLeading, pinned: true, toolbarHeight: 40.h, - leadingWidth: isLeading ? null : double.infinity, + leadingWidth: isLeading ? 40.w + 32.w : double.infinity, systemOverlayStyle: SystemUiOverlayStyle(statusBarBrightness: Brightness.light), surfaceTintColor: Colors.transparent, backgroundColor: AppColors.bgScaffoldColor, @@ -93,23 +92,22 @@ class CollapsingListView extends StatelessWidget { // : null, leading: Visibility( visible: isLeading, - child: Transform.flip( - flipX: appState.isArabic(), - child: IconButton( - icon: Utils.buildSvgWithAssets(icon: isClose ? AppAssets.close_bottom_nav_trans : AppAssets.arrow_back_new, width: 24.h, height: 24.h), - padding: EdgeInsets.zero, - constraints: BoxConstraints(), - style: const ButtonStyle(tapTargetSize: MaterialTapTargetSize.shrinkWrap), - onPressed: () { - if (leadingCallback != null) { - leadingCallback!(); - } else { - context.pop(); - } - }, - highlightColor: Colors.transparent, + child: Container( + height: 32.h, + width: 32.w, + alignment: appState.isArabic() ? Alignment.centerRight : Alignment.centerLeft, + margin: EdgeInsets.fromLTRB(24.w, 0, 24.w, 0), + child: Transform.flip( + flipX: appState.isArabic(), + child: Utils.buildSvgWithAssets(icon: isClose ? AppAssets.close_bottom_nav_trans : AppAssets.arrow_back_new, width: 24.h, height: 24.h), ), - ), + ).onPress(() { + if (leadingCallback != null) { + leadingCallback!(); + } else { + context.pop(); + } + }), ) // : ScrollAnimatedTitle( // title: title, @@ -218,7 +216,7 @@ class ScrollAnimatedTitle extends StatefulWidget implements PreferredSizeWidget }); @override - Size get preferredSize => const Size.fromHeight(50.0); + Size get preferredSize => const Size.fromHeight(56.0); @override State createState() => _ScrollAnimatedTitleState(); @@ -265,7 +263,7 @@ class _ScrollAnimatedTitleState extends State { final isRtl = Directionality.of(context) == TextDirection.RTL; return Container( // height: (widget.preferredSize.height - _fontSize / 2).h, - height: 60.h, + height: 56.h, alignment: isRtl ? (widget.showBack ? Alignment.topRight : Alignment.centerRight) : (widget.showBack ? Alignment.topLeft : Alignment.centerLeft), padding: EdgeInsets.fromLTRB(24.w, 0, 24.w, 0), child: Row( diff --git a/pubspec.yaml b/pubspec.yaml index 26903b6..a8978ca 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -83,6 +83,7 @@ dependencies: open_filex: ^4.7.0 flutter_swiper_view: ^1.1.8 flutter_callkit_incoming: ^3.0.0 + device_preview: ^1.3.1 location: ^8.0.1 gms_check: ^1.0.4