Update app scale implementation

This commit is contained in:
Shawn 2023-01-01 12:27:26 -07:00
parent f74dc5bd68
commit 1e1cac7c54
2 changed files with 20 additions and 15 deletions

View File

@ -6,24 +6,28 @@ import 'package:wonders/common_libs.dart';
export 'colors.dart'; export 'colors.dart';
AppStyle $styles = AppStyle();
@immutable @immutable
class AppStyle { class AppStyle {
AppStyle({Size? appSize}) { AppStyle({Size? screenSize}) {
/// Measure the diagonal size of the app window, and slightly adjust the scale value which is if (screenSize == null) {
/// applied to paddings and font-sizes across the app.
if (appSize == null) {
scale = 1; scale = 1;
return; return;
} }
final screenSize = (appSize.width + appSize.height) / 2; final shortestSide = screenSize.shortestSide;
if (screenSize > 1000) { const tabletXl = 1000;
scale = 1.25; // large tablets const tabletLg = 800;
} else if (screenSize > 800) { const tabletSm = 600;
scale = 1; // small tablets const phoneLg = 400;
if (shortestSide > tabletXl) {
scale = 1.25;
} else if (shortestSide > tabletLg) {
scale = 1.15;
} else if (shortestSide > tabletSm) {
scale = 1;
} else if (shortestSide > phoneLg) {
scale = .9; // phone
} else { } else {
scale = .9; // phones scale = .85; // small phone
} }
debugPrint('screenSize=$screenSize, scale=$scale'); debugPrint('screenSize=$screenSize, scale=$scale');
} }

View File

@ -4,13 +4,14 @@ import 'package:wonders/ui/common/app_scroll_behavior.dart';
class WondersAppScaffold extends StatelessWidget with GetItMixin { class WondersAppScaffold extends StatelessWidget with GetItMixin {
WondersAppScaffold({Key? key, required this.child}) : super(key: key); WondersAppScaffold({Key? key, required this.child}) : super(key: key);
final Widget child; final Widget child;
static AppStyle get style => _style;
static AppStyle _style = AppStyle();
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
Animate.defaultDuration = $styles.times.fast;
// Listen to the device size, and update AppStyle when it changes // Listen to the device size, and update AppStyle when it changes
$styles = AppStyle(appSize: Size(context.widthPx, context.heightPx)); _style = AppStyle(screenSize: context.sizePx);
//$styles = AppStyle(appSize: null); //Size(context.widthPx, context.heightPx)); Animate.defaultDuration = $styles.times.fast;
return Stack( return Stack(
key: ValueKey($styles.scale), key: ValueKey($styles.scale),
children: [ children: [