From 8310451f6bcb9222418e105e9b18b218ad5e3d14 Mon Sep 17 00:00:00 2001 From: anhtunz Date: Tue, 15 Apr 2025 11:31:29 +0700 Subject: [PATCH] fix(ui): Change TextStyle to ResponsiveText --- .../device_log/device_logs_screen.dart | 8 +- .../devices/add_new_device_widget.dart | 3 +- .../device_detail/device_detail_screen.dart | 205 +++++++++++------- .../devices/devices_manager_screen.dart | 7 +- lib/feature/home/shared/alert_card.dart | 9 +- lib/feature/home/shared/overview_card.dart | 5 +- lib/feature/home/shared/status_card.dart | 11 +- lib/feature/home/shared/warning_card.dart | 9 +- .../add_device_to_group_dialog.dart | 5 +- .../group_detail/group_detail_screen.dart | 5 +- .../inter_family/inter_family_screen.dart | 2 +- .../map/widget/show_direction_widget.dart | 2 +- .../map/widget/show_nearest_place.dart | 10 +- .../device_notification_settings_screen.dart | 2 +- lib/feature/settings/settings_screen.dart | 10 +- .../dialog/request_permission_dialog.dart | 3 +- lib/product/extension/context_extension.dart | 70 +++++- lib/product/shared/shared_line_chart.dart | 4 +- lib/product/utils/responsive_text_utils.dart | 10 + 19 files changed, 236 insertions(+), 144 deletions(-) create mode 100644 lib/product/utils/responsive_text_utils.dart diff --git a/lib/feature/device_log/device_logs_screen.dart b/lib/feature/device_log/device_logs_screen.dart index d12c218..775af68 100644 --- a/lib/feature/device_log/device_logs_screen.dart +++ b/lib/feature/device_log/device_logs_screen.dart @@ -90,9 +90,7 @@ class _DeviceLogsScreenState extends State { hint: Text( appLocalization(context) .choose_device_dropdownButton, - style: const TextStyle( - fontSize: 14, - ), + style: context.responsiveBodySmall ), items: allDevicesSnapshot.data?.isNotEmpty ?? false ? allDevicesSnapshot.data! @@ -101,9 +99,7 @@ class _DeviceLogsScreenState extends State { value: device.thingId, child: Text( device.name!, - style: const TextStyle( - fontSize: 14, - ), + style: context.responsiveBodySmall ), ), ) diff --git a/lib/feature/devices/add_new_device_widget.dart b/lib/feature/devices/add_new_device_widget.dart index 9cb9c62..ea31512 100644 --- a/lib/feature/devices/add_new_device_widget.dart +++ b/lib/feature/devices/add_new_device_widget.dart @@ -25,8 +25,7 @@ addNewDevice(BuildContext context, String role) async { children: [ Text( '${appLocalization(context).add_device_title}: ', - style: - const TextStyle(fontSize: 18, fontWeight: FontWeight.bold), + style: context.responsiveBodyLargeWithBold, ), Container( alignment: Alignment.centerRight, diff --git a/lib/feature/devices/device_detail/device_detail_screen.dart b/lib/feature/devices/device_detail/device_detail_screen.dart index f5c0dcc..c1ee6b2 100644 --- a/lib/feature/devices/device_detail/device_detail_screen.dart +++ b/lib/feature/devices/device_detail/device_detail_screen.dart @@ -46,8 +46,8 @@ class _DetailDeviceScreenState extends State { late DetailDeviceBloc detailDeviceBloc; Completer controller = Completer(); - CameraPosition initialCamera = - const CameraPosition(target: LatLng(20.966048511844402, 105.74977710843086), zoom: 15); + CameraPosition initialCamera = const CameraPosition( + target: LatLng(20.966048511844402, 105.74977710843086), zoom: 15); Timer? getDeviceDetailTimer; @override @@ -118,7 +118,8 @@ class _DetailDeviceScreenState extends State { children: [ Positioned.fill( child: Image.asset( - ImageConstants.instance.getImage('smoke-detector'), + ImageConstants.instance + .getImage('smoke-detector'), fit: BoxFit.fill, ), ), @@ -156,13 +157,14 @@ class _DetailDeviceScreenState extends State { height: context.dynamicHeight(0.08), width: context.dynamicWidth(0.5), decoration: BoxDecoration( - color: DeviceUtils.instance - .getTableRowColor(context,deviceSnapshot.data?.state ?? 3), + color: DeviceUtils.instance.getTableRowColor( + context, deviceSnapshot.data?.state ?? 3), borderRadius: BorderRadius.circular(50), ), alignment: Alignment.bottomCenter, child: Row( - mainAxisAlignment: MainAxisAlignment.spaceAround, + mainAxisAlignment: + MainAxisAlignment.spaceAround, children: [ SizedBox( height: context.mediumValue, @@ -170,17 +172,20 @@ class _DetailDeviceScreenState extends State { child: deviceSnapshot.data?.state == 1 ? RippleAnimation( color: Colors.red, - delay: context.dynamicMilliSecondDuration( + delay: context + .dynamicMilliSecondDuration( 800, ), repeat: true, minRadius: 10, ripplesCount: 5, - duration: context.dynamicMilliSecondDuration( + duration: context + .dynamicMilliSecondDuration( 1800, ), child: CircleAvatar( - backgroundColor: Colors.transparent, + backgroundColor: + Colors.transparent, minRadius: context.mediumValue, maxRadius: context.mediumValue, backgroundImage: AssetImage( @@ -191,8 +196,10 @@ class _DetailDeviceScreenState extends State { ), ) : CircleAvatar( - backgroundColor: - DeviceUtils.instance.getTableRowColor(context, + backgroundColor: DeviceUtils + .instance + .getTableRowColor( + context, deviceSnapshot.data?.state ?? 3, ), minRadius: context.mediumValue, @@ -237,19 +244,18 @@ class _DetailDeviceScreenState extends State { child: Padding( padding: context.paddingLow, child: Column( - mainAxisAlignment: MainAxisAlignment.spaceBetween, + mainAxisAlignment: + MainAxisAlignment.spaceBetween, children: [ Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, + mainAxisAlignment: + MainAxisAlignment.spaceBetween, children: [ Text( - appLocalization(context) - .paginated_data_table_column_deviceSignal, - style: const TextStyle( - fontSize: 18, - fontWeight: FontWeight.bold, - ), - ), + appLocalization(context) + .paginated_data_table_column_deviceSignal, + style: context + .responsiveBodyLargeWithBold), SizedBox( height: context.dynamicWidth(0.12), width: context.dynamicWidth(0.12), @@ -259,7 +265,8 @@ class _DetailDeviceScreenState extends State { sensorSnapshot.data!['sensorCsq'], ), size: 30, - color: DeviceUtils.instance.getSignalIconColor( + color: DeviceUtils.instance + .getSignalIconColor( context, sensorSnapshot.data!['sensorCsq'], ), @@ -268,8 +275,10 @@ class _DetailDeviceScreenState extends State { ], ), Row( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.center, + mainAxisAlignment: + MainAxisAlignment.start, + crossAxisAlignment: + CrossAxisAlignment.center, children: [ Container( height: context.dynamicHeight(0.09), @@ -277,9 +286,11 @@ class _DetailDeviceScreenState extends State { child: Text( sensorSnapshot.data!['sensorCsq'], style: TextStyle( - color: DeviceUtils.instance.getSignalIconColor( + color: DeviceUtils.instance + .getSignalIconColor( context, - sensorSnapshot.data!['sensorCsq'], + sensorSnapshot + .data!['sensorCsq'], ), fontSize: 40, fontWeight: FontWeight.w900, @@ -299,10 +310,12 @@ class _DetailDeviceScreenState extends State { child: Padding( padding: context.paddingLow, child: Column( - mainAxisAlignment: MainAxisAlignment.spaceBetween, + mainAxisAlignment: + MainAxisAlignment.spaceBetween, children: [ Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, + mainAxisAlignment: + MainAxisAlignment.spaceBetween, children: [ Text( appLocalization(context) @@ -316,14 +329,18 @@ class _DetailDeviceScreenState extends State { height: context.dynamicWidth(0.12), width: context.dynamicWidth(0.12), child: Image.asset( - DeviceUtils.instance.getDeviceBatteryImg( + DeviceUtils.instance + .getDeviceBatteryImg( int.parse( - sensorSnapshot.data!['sensorBattery'], + sensorSnapshot + .data!['sensorBattery'], ), ), - color: DeviceUtils.instance.getDeviceBatteryColor( + color: DeviceUtils.instance + .getDeviceBatteryColor( int.parse( - sensorSnapshot.data!['sensorBattery'], + sensorSnapshot + .data!['sensorBattery'], ), ), ), @@ -331,18 +348,23 @@ class _DetailDeviceScreenState extends State { ], ), Row( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.center, + mainAxisAlignment: + MainAxisAlignment.start, + crossAxisAlignment: + CrossAxisAlignment.center, children: [ Container( height: context.dynamicHeight(0.09), alignment: Alignment.centerLeft, child: Text( - sensorSnapshot.data!['sensorBattery'], + sensorSnapshot + .data!['sensorBattery'], style: TextStyle( - color: DeviceUtils.instance.getDeviceBatteryColor( + color: DeviceUtils.instance + .getDeviceBatteryColor( int.parse( - sensorSnapshot.data!['sensorBattery'], + sensorSnapshot + .data!['sensorBattery'], ), ), fontSize: 50, @@ -360,9 +382,11 @@ class _DetailDeviceScreenState extends State { child: Text( '%', style: TextStyle( - color: DeviceUtils.instance.getDeviceBatteryColor( + color: DeviceUtils.instance + .getDeviceBatteryColor( int.parse( - sensorSnapshot.data!['sensorBattery'], + sensorSnapshot + .data!['sensorBattery'], ), ), fontSize: 30, @@ -390,7 +414,8 @@ class _DetailDeviceScreenState extends State { child: Column( children: [ Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, + mainAxisAlignment: + MainAxisAlignment.spaceBetween, children: [ Text( appLocalization(context) @@ -405,9 +430,11 @@ class _DetailDeviceScreenState extends State { width: context.dynamicWidth(0.12), child: Image.asset( 'assets/icons/temperature.png', - color: DeviceUtils.instance.getDeviceTempColor( + color: DeviceUtils.instance + .getDeviceTempColor( int.parse( - sensorSnapshot.data!['sensorTemp'], + sensorSnapshot + .data!['sensorTemp'], ), ), ), @@ -423,20 +450,28 @@ class _DetailDeviceScreenState extends State { width: double.infinity, height: 20, decoration: BoxDecoration( - color: Colors.grey.withValues(alpha: 0.3), - borderRadius: BorderRadius.circular(10), + color: Colors.grey + .withValues(alpha: 0.3), + borderRadius: + BorderRadius.circular(10), ), ), LayoutBuilder( - builder: (context, constraints) => Container( + builder: (context, constraints) => + Container( width: constraints.maxWidth * - (int.parse(sensorSnapshot.data!['sensorTemp']) / 75), + (int.parse(sensorSnapshot + .data!['sensorTemp']) / + 75), height: 20, decoration: BoxDecoration( - color: DeviceUtils.instance.getDeviceTempColor( - int.parse(sensorSnapshot.data!['sensorTemp']), + color: DeviceUtils.instance + .getDeviceTempColor( + int.parse(sensorSnapshot + .data!['sensorTemp']), ), - borderRadius: BorderRadius.circular(10), + borderRadius: + BorderRadius.circular(10), ), ), ) @@ -446,25 +481,26 @@ class _DetailDeviceScreenState extends State { height: 5, ), Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, + mainAxisAlignment: + MainAxisAlignment.spaceBetween, children: [ Text( "${sensorSnapshot.data!['sensorTemp']} °C", style: TextStyle( - color: DeviceUtils.instance.getDeviceTempColor( + color: DeviceUtils.instance + .getDeviceTempColor( int.parse( - sensorSnapshot.data!['sensorTemp'], + sensorSnapshot + .data!['sensorTemp'], ), ), fontSize: 30, fontWeight: FontWeight.w900, ), ), - const Text( + Text( "75 °C", - style: TextStyle( - fontSize: 20, - ), + style: context.responsiveBodyLarge ), ], ) @@ -480,11 +516,9 @@ class _DetailDeviceScreenState extends State { mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Text( - appLocalization(context).paginated_data_table_column_devicePower, - style: const TextStyle( - fontSize: 18, - fontWeight: FontWeight.bold, - ), + appLocalization(context) + .paginated_data_table_column_devicePower, + style: context.responsiveBodyLargeWithBold ), SizedBox( height: context.dynamicWidth(0.12), @@ -504,7 +538,8 @@ class _DetailDeviceScreenState extends State { stream: detailDeviceBloc.streamSensorTemps, builder: (context, sensorTempsSnapshot) { if (sensorTempsSnapshot.data == null) { - detailDeviceBloc.getNearerSensorValue(widget.thingID); + detailDeviceBloc + .getNearerSensorValue(widget.thingID); return const AspectRatio( aspectRatio: 3, child: Center( @@ -523,7 +558,8 @@ class _DetailDeviceScreenState extends State { child: Container( margin: context.paddingLow, child: sharedLineChart( - appLocalization(context).detail_device_volt_message, + appLocalization(context) + .detail_device_volt_message, sensorTempsSnapshot.data ?? [], ), ), @@ -550,33 +586,48 @@ class _DetailDeviceScreenState extends State { Radius.circular(15), ), ), - child: deviceSnapshot.data!.settings!.latitude != "" + child: deviceSnapshot + .data!.settings!.latitude != + "" ? StreamBuilder( - stream: detailDeviceBloc.streamDeviceLocation, + stream: detailDeviceBloc + .streamDeviceLocation, builder: (context, locationSnapshot) { if (locationSnapshot.data == null) { detailDeviceBloc.findLocation( - context, deviceSnapshot.data!.areaPath!); + context, + deviceSnapshot + .data!.areaPath!); } return GoogleMap( - initialCameraPosition: initialCamera, + initialCameraPosition: + initialCamera, mapType: MapType.normal, markers: { Marker( infoWindow: InfoWindow( - title: locationSnapshot.data ?? "", + title: + locationSnapshot.data ?? + "", ), - markerId: MarkerId(deviceSnapshot.data!.thingId!), + markerId: MarkerId( + deviceSnapshot + .data!.thingId!), position: LatLng( - double.parse( - deviceSnapshot.data!.settings!.latitude!), - double.parse( - deviceSnapshot.data!.settings!.longitude!), + double.parse(deviceSnapshot + .data! + .settings! + .latitude!), + double.parse(deviceSnapshot + .data! + .settings! + .longitude!), ), ), }, onMapCreated: (mapcontroller) { - controller.complete(mapcontroller); + controller + .complete(mapcontroller); }, mapToolbarEnabled: false, zoomControlsEnabled: false, @@ -591,11 +642,9 @@ class _DetailDeviceScreenState extends State { ), ), Text( - appLocalization(context).device_update_location, - style: const TextStyle( - fontSize: 18, - fontWeight: FontWeight.bold, - ), + appLocalization(context) + .device_update_location, + style: context.responsiveBodyLargeWithBold ) ], ), diff --git a/lib/feature/devices/devices_manager_screen.dart b/lib/feature/devices/devices_manager_screen.dart index b5021c2..ecafd15 100644 --- a/lib/feature/devices/devices_manager_screen.dart +++ b/lib/feature/devices/devices_manager_screen.dart @@ -103,7 +103,7 @@ class _DevicesManagerScreenState extends State { child: Text( appLocalization(context) .paginated_data_table_title, - style: context.headlineMediumTextStyle, + style: context.responsiveBodyLargeWithBold, ), ), columns: [ @@ -190,10 +190,7 @@ class _DevicesManagerScreenState extends State { SizedBox(height: context.lowValue), Text( appLocalization(context).overview_message, - style: const TextStyle( - fontSize: 20, - fontWeight: FontWeight.bold, - ), + style: context.responsiveBodyLargeWithBold ), StreamBuilder>>( stream: devicesManagerBloc.streamDeviceByState, diff --git a/lib/feature/home/shared/alert_card.dart b/lib/feature/home/shared/alert_card.dart index a35501f..12858b0 100644 --- a/lib/feature/home/shared/alert_card.dart +++ b/lib/feature/home/shared/alert_card.dart @@ -62,10 +62,7 @@ Future notificationCard(BuildContext context, String notiticationType, SizedBox( child: Text( "${appLocalization(context).device_title} ${device.isOwner! ? device.name : device.alias}", - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 18, - ), + style: context.responsiveBodyLargeWithBold, maxLines: 2, overflow: TextOverflow.ellipsis, softWrap: true, @@ -92,7 +89,7 @@ Future notificationCard(BuildContext context, String notiticationType, Expanded( child: Text( location, - style: const TextStyle(fontSize: 15), + style: context.responsiveBodySmall, maxLines: 2, overflow: TextOverflow.ellipsis, softWrap: true, @@ -111,7 +108,7 @@ Future notificationCard(BuildContext context, String notiticationType, Expanded( child: Text( time.toString(), - style: const TextStyle(fontSize: 15), + style: context.responsiveBodySmall, maxLines: 2, overflow: TextOverflow.ellipsis, softWrap: true, diff --git a/lib/feature/home/shared/overview_card.dart b/lib/feature/home/shared/overview_card.dart index c48e83c..46d3e12 100644 --- a/lib/feature/home/shared/overview_card.dart +++ b/lib/feature/home/shared/overview_card.dart @@ -33,10 +33,7 @@ class OverviewCard extends StatelessWidget { isOwner ? appLocalization(context).overview_message : appLocalization(context).interfamily_page_name, - style: const TextStyle( - fontSize: 20, - fontWeight: FontWeight.bold, - ), + style: context.h2, ), SizedBox(height: context.normalValue), Column( diff --git a/lib/feature/home/shared/status_card.dart b/lib/feature/home/shared/status_card.dart index 5216c1b..08dc479 100644 --- a/lib/feature/home/shared/status_card.dart +++ b/lib/feature/home/shared/status_card.dart @@ -1,4 +1,5 @@ import 'package:flutter/material.dart'; +import '../../../product/extension/context_extension.dart'; class StatusCard extends StatelessWidget { final String label; @@ -27,14 +28,8 @@ class StatusCard extends StatelessWidget { child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ - Text(label, style: const TextStyle(fontSize: 18)), - Text( - count.toString(), - style: const TextStyle( - fontSize: 24, - fontWeight: FontWeight.bold, - ), - ), + Text(label, style: context.responsiveBodyLarge), + Text(count.toString(), style: context.h2), ], ), ); diff --git a/lib/feature/home/shared/warning_card.dart b/lib/feature/home/shared/warning_card.dart index 6b552b4..a3c3390 100644 --- a/lib/feature/home/shared/warning_card.dart +++ b/lib/feature/home/shared/warning_card.dart @@ -97,10 +97,7 @@ Future warningCard(BuildContext context, APIServices apiServices, SizedBox( child: Text( "${appLocalization(context).device_title}: ${device.isOwner! ? device.name : device.alias}", - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 18, - ), + style: context.responsiveBodyLargeWithBold, maxLines: 2, overflow: TextOverflow.ellipsis, softWrap: true, @@ -128,7 +125,7 @@ Future warningCard(BuildContext context, APIServices apiServices, Expanded( child: Text( fullLocation, - style: const TextStyle(fontSize: 15), + style: context.responsiveBodySmall, maxLines: 2, overflow: TextOverflow.ellipsis, softWrap: true, @@ -147,7 +144,7 @@ Future warningCard(BuildContext context, APIServices apiServices, Expanded( child: Text( time, - style: const TextStyle(fontSize: 15), + style: context.responsiveBodySmall, maxLines: 2, overflow: TextOverflow.ellipsis, softWrap: true, diff --git a/lib/feature/inter_family/group_detail/add_device_to_group_dialog.dart b/lib/feature/inter_family/group_detail/add_device_to_group_dialog.dart index 1741121..16e07bf 100644 --- a/lib/feature/inter_family/group_detail/add_device_to_group_dialog.dart +++ b/lib/feature/inter_family/group_detail/add_device_to_group_dialog.dart @@ -2,6 +2,7 @@ import 'package:dropdown_button2/dropdown_button2.dart'; import 'package:flutter/material.dart'; +import '../../../product/extension/context_extension.dart'; import '../../../bloc/group_detail_bloc.dart'; import '../../../product/constant/icon/icon_constants.dart'; import '../../../product/services/language_services.dart'; @@ -36,7 +37,7 @@ addDeviceDialog(BuildContext context, DetailGroupBloc detailGroupBloc, ), hint: Text( appLocalization(context).choose_device_dropdownButton, - style: const TextStyle(fontSize: 14), + style: context.responsiveBodySmall, ), items: ownerDevices .map( @@ -73,7 +74,7 @@ addDeviceDialog(BuildContext context, DetailGroupBloc detailGroupBloc, Expanded( child: Text( item.name!, - style: const TextStyle(fontSize: 14), + style: context.responsiveBodySmall, ), ), ], diff --git a/lib/feature/inter_family/group_detail/group_detail_screen.dart b/lib/feature/inter_family/group_detail/group_detail_screen.dart index 8ee2552..6cbae4d 100644 --- a/lib/feature/inter_family/group_detail/group_detail_screen.dart +++ b/lib/feature/inter_family/group_detail/group_detail_screen.dart @@ -493,10 +493,7 @@ class _DetailGroupScreenState extends State { mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Text('${appLocalization(context).map_result}: ', - style: const TextStyle( - fontSize: 20, - fontWeight: FontWeight.bold, - color: Colors.black)), + style: context.h3), Container( alignment: Alignment.centerRight, child: IconButton( diff --git a/lib/feature/inter_family/inter_family_screen.dart b/lib/feature/inter_family/inter_family_screen.dart index 646ef10..733314a 100644 --- a/lib/feature/inter_family/inter_family_screen.dart +++ b/lib/feature/inter_family/inter_family_screen.dart @@ -111,7 +111,7 @@ class _InterFamilyScreenState extends State { ), ), drawer: Drawer( - width: context.dynamicWidth(0.4), + width: context.dynamicWidth(0.6), child: ListView( padding: EdgeInsets.zero, children: [ diff --git a/lib/feature/map/widget/show_direction_widget.dart b/lib/feature/map/widget/show_direction_widget.dart index 65adff9..f86f5d3 100644 --- a/lib/feature/map/widget/show_direction_widget.dart +++ b/lib/feature/map/widget/show_direction_widget.dart @@ -38,7 +38,7 @@ showDirections( children: [ Text( appLocalization(context).map_show_direction, - style: context.titleLargeTextStyle, + style: context.responsiveBodyLargeWithBold, ), Container( alignment: Alignment.centerRight, diff --git a/lib/feature/map/widget/show_nearest_place.dart b/lib/feature/map/widget/show_nearest_place.dart index feb36fd..86e3ac1 100644 --- a/lib/feature/map/widget/show_nearest_place.dart +++ b/lib/feature/map/widget/show_nearest_place.dart @@ -62,10 +62,7 @@ showNearPlacesSideSheet( Center( child: Text( '${appLocalization(modalBottomSheetContext).map_result}: ', - style: const TextStyle( - fontSize: 20, - fontWeight: FontWeight.bold, - ), + style: context.h3 ), ), Container( @@ -119,10 +116,7 @@ showNearPlacesSideSheet( children: [ Text( place.result!.name!, - style: const TextStyle( - fontSize: 16, - fontWeight: FontWeight.w500, - ), + style: context.responsiveBodyMediumWithBold, ), SizedBox(height: listViewContext.lowValue), Text( diff --git a/lib/feature/settings/device_notification_settings/device_notification_settings_screen.dart b/lib/feature/settings/device_notification_settings/device_notification_settings_screen.dart index a64e340..9db6be3 100644 --- a/lib/feature/settings/device_notification_settings/device_notification_settings_screen.dart +++ b/lib/feature/settings/device_notification_settings/device_notification_settings_screen.dart @@ -73,7 +73,7 @@ class _DeviceNotificationSettingsScreenState hint: Text( appLocalization(context) .choose_device_dropdownButton, - style: const TextStyle(fontSize: 14), + style: context.responsiveBodySmall, ), iconStyleData: const IconStyleData( icon: Icon( diff --git a/lib/feature/settings/settings_screen.dart b/lib/feature/settings/settings_screen.dart index f5245d8..24bb0c8 100644 --- a/lib/feature/settings/settings_screen.dart +++ b/lib/feature/settings/settings_screen.dart @@ -62,10 +62,7 @@ class _SettingsScreenState extends State { child: Text( getAvatarContent( userSnapshot.data?.username ?? ""), - style: const TextStyle( - fontSize: 35, - fontWeight: FontWeight.bold, - ), + style: context.dynamicResponsiveSize(36), ), ), ), @@ -76,8 +73,7 @@ class _SettingsScreenState extends State { children: [ Text( userSnapshot.data?.name ?? "User Name", - style: const TextStyle( - fontWeight: FontWeight.w900, fontSize: 26), + style: context.h2, ) ], ), @@ -132,7 +128,7 @@ class _SettingsScreenState extends State { leading: IconConstants.instance.getMaterialIcon(icon), title: Text( content, - style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold), + style: context.responsiveBodyMediumWithBold, ), trailing: const Icon( Icons.arrow_forward_ios_outlined, diff --git a/lib/product/base/widget/dialog/request_permission_dialog.dart b/lib/product/base/widget/dialog/request_permission_dialog.dart index 6f7884a..e30c159 100644 --- a/lib/product/base/widget/dialog/request_permission_dialog.dart +++ b/lib/product/base/widget/dialog/request_permission_dialog.dart @@ -30,8 +30,7 @@ class RequestPermissionDialog { child: Text( "Alow app to use $content permission", textAlign: TextAlign.center, - style: const TextStyle( - fontWeight: FontWeight.bold, fontSize: 18), + style: context.responsiveBodyLargeWithBold, ), ), Divider(height: dialogContext.lowValue), diff --git a/lib/product/extension/context_extension.dart b/lib/product/extension/context_extension.dart index aabe49f..fd02b23 100644 --- a/lib/product/extension/context_extension.dart +++ b/lib/product/extension/context_extension.dart @@ -1,6 +1,7 @@ import 'dart:math'; import 'package:flutter/material.dart'; +import 'package:sfm_app/product/utils/responsive_text_utils.dart'; import '../theme/app_theme_light.dart'; @@ -9,55 +10,105 @@ extension ContextExtension on BuildContext { MediaQueryData get mediaQuery => MediaQuery.of(this); } +extension ResponsiveTextStyle on BuildContext { + TextStyle get h1 => TextStyle( + fontSize: ResponsiveText.getSize(this, 32), fontWeight: FontWeight.bold); + + TextStyle get h2 => TextStyle( + fontSize: ResponsiveText.getSize(this, 24), fontWeight: FontWeight.bold); + + TextStyle get h3 => TextStyle( + fontSize: ResponsiveText.getSize(this, 20), fontWeight: FontWeight.bold); + + TextStyle get responsiveBodyLarge => + TextStyle(fontSize: ResponsiveText.getSize(this, 18)); + + TextStyle get responsiveBodyLargeWithBold => TextStyle( + fontSize: ResponsiveText.getSize(this, 18), fontWeight: FontWeight.bold); + + TextStyle get responsiveBodyMedium => + TextStyle(fontSize: ResponsiveText.getSize(this, 16)); + + TextStyle get responsiveBodyMediumWithBold => TextStyle( + fontSize: ResponsiveText.getSize(this, 16), fontWeight: FontWeight.bold); + + TextStyle get responsiveBodySmall => + TextStyle(fontSize: ResponsiveText.getSize(this, 14)); + + TextStyle get responsiveBodySmallWithBold => TextStyle( + fontSize: ResponsiveText.getSize(this, 14), fontWeight: FontWeight.bold); + TextStyle dynamicResponsiveSize(double val) => + TextStyle(fontSize: ResponsiveText.getSize(this, val)); + TextStyle dynamicResponsiveSizeWithBold(double val) => TextStyle( + fontSize: ResponsiveText.getSize(this, val), fontWeight: FontWeight.bold); +} + // VALUES extension MediaQueryExtension on BuildContext { double get height => mediaQuery.size.height; + double get width => mediaQuery.size.width; double get lowValue => height * 0.01; + double get normalValue => height * 0.02; + double get mediumValue => height * 0.04; + double get highValue => height * 0.1; double dynamicWidth(double val) => width * val; + double dynamicHeight(double val) => height * val; } // THEME extension ThemeExtension on BuildContext { ThemeData get theme => Theme.of(this); + TextTheme get textTheme => theme.textTheme; + ColorScheme get colors => AppThemeLight.instance.theme.colorScheme; } // PADDING ALLL extension PaddingExtensionAll on BuildContext { EdgeInsets get paddingLow => EdgeInsets.all(lowValue); + EdgeInsets get paddingNormal => EdgeInsets.all(normalValue); + EdgeInsets get paddingMedium => EdgeInsets.all(mediumValue); + EdgeInsets get paddingHigh => EdgeInsets.all(highValue); + EdgeInsets dynamicPadding(double val) => EdgeInsets.all(val); - // double dynamicPadding(double val) => height * val; +// double dynamicPadding(double val) => height * val; } // PADDING SYMETRIC extension PaddingExtensionSymetric on BuildContext { // VERTICAL PADDİNG EdgeInsets get paddingLowVertical => EdgeInsets.symmetric(vertical: lowValue); + EdgeInsets get paddingNormalVertical => EdgeInsets.symmetric(vertical: normalValue); + EdgeInsets get paddingMediumVertical => EdgeInsets.symmetric(vertical: mediumValue); + EdgeInsets get paddingHighVertical => EdgeInsets.symmetric(vertical: highValue); // HORIZONTAL PADDİNG EdgeInsets get paddingLowHorizontal => EdgeInsets.symmetric(horizontal: lowValue); + EdgeInsets get paddingNormalHorizontal => EdgeInsets.symmetric(horizontal: normalValue); + EdgeInsets get paddingMediumHorizontal => EdgeInsets.symmetric(horizontal: mediumValue); + EdgeInsets get paddingHighHorizontal => EdgeInsets.symmetric(horizontal: highValue); } @@ -70,34 +121,51 @@ extension PageExtension on BuildContext { // DURATION extension DurationExtension on BuildContext { Duration get lowDuration => const Duration(milliseconds: 150); + Duration get normalDuration => const Duration(milliseconds: 500); + Duration dynamicMilliSecondDuration(int milliseconds) => Duration(milliseconds: milliseconds); + Duration dynamicMinutesDuration(int minutes) => Duration(minutes: minutes); } // RADIUS extension RadiusExtension on BuildContext { Radius get lowRadius => Radius.circular(width * 0.02); + Radius get normalRadius => Radius.circular(width * 0.05); + Radius get highRadius => Radius.circular(width * 0.1); + Radius dynamicRadius(double radius) => Radius.circular(radius); } extension TextStyleExtention on BuildContext { TextStyle get labelSmallTextStyle => Theme.of(this).textTheme.labelSmall!; + TextStyle get labelMediumTextStyle => Theme.of(this).textTheme.labelMedium!; + TextStyle get labelLargeTextStyle => Theme.of(this).textTheme.labelLarge!; + TextStyle get bodySmallTextStyle => Theme.of(this).textTheme.bodySmall!; + TextStyle get bodyMediumTextStyle => Theme.of(this).textTheme.bodyMedium!; + TextStyle get bodyLargeTextStyle => Theme.of(this).textTheme.bodyLarge!; + TextStyle get titleSmallTextStyle => Theme.of(this).textTheme.titleSmall!; + TextStyle get titleMediumTextStyle => Theme.of(this).textTheme.titleMedium!; + TextStyle get titleLargeTextStyle => Theme.of(this).textTheme.titleLarge!; + TextStyle get headlineSmallTextStyle => Theme.of(this).textTheme.headlineSmall!; + TextStyle get headlineMediumTextStyle => Theme.of(this).textTheme.headlineMedium!; + TextStyle get headlineLargeTextStyle => Theme.of(this).textTheme.headlineLarge!; } diff --git a/lib/product/shared/shared_line_chart.dart b/lib/product/shared/shared_line_chart.dart index 5999e0f..2a7dfb8 100644 --- a/lib/product/shared/shared_line_chart.dart +++ b/lib/product/shared/shared_line_chart.dart @@ -1,7 +1,7 @@ import 'package:fl_chart/fl_chart.dart'; import 'package:flutter/material.dart'; -import 'package:sfm_app/feature/device_log/device_logs_model.dart'; -import 'package:sfm_app/product/utils/date_time_utils.dart'; +import '../../feature/device_log/device_logs_model.dart'; +import '../utils/date_time_utils.dart'; Widget sharedLineChart(String chartName, List sensors) { return LineChart( diff --git a/lib/product/utils/responsive_text_utils.dart b/lib/product/utils/responsive_text_utils.dart new file mode 100644 index 0000000..a374982 --- /dev/null +++ b/lib/product/utils/responsive_text_utils.dart @@ -0,0 +1,10 @@ +import 'package:flutter/cupertino.dart'; +import '../extension/context_extension.dart'; + +class ResponsiveText{ + static double getSize(BuildContext context, double size){ + double screenWidth = context.width; + double scaleFactor = screenWidth / 375 ; + return (size* scaleFactor).clamp(size * 0.8, size * 1.4); + } +} \ No newline at end of file