[adaptive_style] rework with extension types

examples/adaptive_style_example/lib/main.dart

@@ -7,7 +7,8 @@ class MyApplication extends StatelessWidget {
   const MyApplication({super.key});
 
   @override
-  Widget build(context) => const AdaptiveSizeProvider(
+  Widget build(context) => const SizeRefProvider(
+        deviceSizes: [DeviceSize.iphoneSE],
         child: MaterialApp(
           home: MyHomePage(),
         ),
@@ -18,37 +19,26 @@ class MyHomePage extends StatelessWidget {
   const MyHomePage({super.key});
 
   @override
-  Widget build(context) => Scaffold(
-        body: AdaptiveSizeBuilder(builder: (context, adaptiveSize) {
-          final deviceSize = adaptiveSize.mostSimilarDeviceSize;
-          return switch (deviceSize) {
-            (DeviceSize.iphoneSE) => const Stack(
-                children: [
-                  Padding(
-                    padding: EdgeInsets.all(10),
-                    child: Center(
-                      child: ColoredBox(
-                        color: Colors.blue,
-                        child: SizedBox.expand(),
-                      ),
+  Widget build(context) => SizeRefBuilder(builder: (context, sizeRef) {
+        return switch (sizeRef.size) {
+          (DeviceSize.iphoneSE) => Center(
+              child: SizedBox.fromSize(
+                size: sizeRef.size * sizeRef.scale.min,
+                child: Scaffold(
+                  backgroundColor: Colors.black,
+                  body: Center(
+                    child: FlutterLogo(
+                      size: 100 * sizeRef.scale.min,
                     ),
                   ),
-                ],
+                ),
               ),
-            _ => const Stack(
-                children: [
-                  Padding(
-                    padding: EdgeInsets.all(10),
-                    child: Center(
-                      child: ColoredBox(
-                        color: Colors.red,
-                        child: SizedBox.expand(),
-                      ),
-                    ),
-                  ),
-                ],
+            ),
+          _ => const Scaffold(
+              body: Center(
+                child: FlutterLogo(size: 100),
               ),
-          };
-        }),
-      );
+            ),
+        };
+      });
 }

examples/adaptive_style_example/pubspec.yaml

@@ -11,6 +11,8 @@ dependencies:
   flutter:
     sdk: flutter
   adaptive_style: ^0.0.1
+  yak_flutter: ^3.0.2
+
 
 dev_dependencies:
   flutter_test:

packages/adaptive_style/lib/adaptive_style.dart

@@ -2,7 +2,7 @@ library adaptive_style;
 
 export 'src/adaptive_size_builder.dart';
 export 'src/adaptive_size_provider.dart';
-export 'src/adaptive_size.dart';
+export 'src/_adaptive_size.dart';
 export 'src/device_size.dart';
 export 'src/extension.dart';
 export 'src/inherited_adaptive_size.dart';

packages/adaptive_style/lib/src/_adaptive_size.dart

@@ -0,0 +1,42 @@
+// import 'package:flutter/widgets.dart';
+// import 'package:yak_flutter/yak_flutter.dart';
+// import 'extension.dart';
+// import 'device_size.dart';
+
+// typedef AdaptiveSizeNotifier = RestrictedNotifier<AdaptiveSizeData>;
+
+// final class AdaptiveSizeData {
+//   const AdaptiveSizeData({
+//     required this.screenSize,
+//     required this.scale,
+//     required this.availableSizes,
+//     required this.mostSimilarDeviceSize,
+//   });
+
+//   // factory AdaptiveSizeData.fromSize(
+//   //   Size size, {
+//   //   List<DeviceSize> availableSizes = DeviceSize.values,
+//   // }) {
+//   //   final mostSimilarDeviceSize = availableSizes.mostSimilarTo(size);
+//   //   final scale = mostSimilarDeviceSize.size.closestDimentionScale(size);
+
+//   //   return AdaptiveSizeData(
+//   //     availableSizes: availableSizes,
+//   //     realScreenSize: size,
+//   //     mostSimilarDeviceSize: mostSimilarDeviceSize,
+//   //     scale: scale,
+//   //   );
+//   // }
+
+//   final Size screenSize;
+//   final Offset widthScale, ;
+//   final List<DeviceSize> availableSizes;
+//   final DeviceSize mostSimilarDeviceSize;
+
+//   @override
+//   bool operator ==(Object other) =>
+//       other is AdaptiveSizeData && other.hashCode == hashCode;
+
+//   @override
+//   int get hashCode => Object.hash(screenSize, availableSizes);
+// }

packages/adaptive_style/lib/src/adaptive_size_builder.dart

@@ -1,26 +1,26 @@
 import 'package:flutter/widgets.dart';
 
-import 'adaptive_size.dart';
 import 'inherited_adaptive_size.dart';
+import 'size_ref.dart';
 
-typedef AdaptiveSizeBuild = Widget Function(BuildContext, AdaptiveSizeData);
+typedef SizeRefBuild = Widget Function(BuildContext, SizeRef);
 
-class AdaptiveSizeBuilder extends StatelessWidget {
-  final AdaptiveSizeBuild builder;
-  const AdaptiveSizeBuilder({
+class SizeRefBuilder extends StatelessWidget {
+  final SizeRefBuild builder;
+  const SizeRefBuilder({
     super.key,
     required this.builder,
   });
 
   @override
   Widget build(context) {
-    final adaptiveSize = InheritedAdaptiveSize.maybeOf(context);
-    if (adaptiveSize == null) {
-      throw Exception('InheritedAdaptiveSize not found in BuildContext');
+    final sizeRefNotifier = InheritedSizeRef.maybeOf(context);
+    if (sizeRefNotifier == null) {
+      throw Exception('InheritedSizeRef not found in BuildContext');
     }
 
     return ValueListenableBuilder(
-      valueListenable: adaptiveSize as ValueNotifier<AdaptiveSizeData>,
+      valueListenable: sizeRefNotifier as ValueNotifier<SizeRef>,
       builder: (context, value, _) => builder(context, value),
     );
   }

packages/adaptive_style/lib/src/adaptive_size_provider.dart

@@ -1,33 +1,33 @@
 import 'dart:async';
 
+import 'package:adaptive_style/adaptive_style.dart';
 import 'package:flutter/widgets.dart';
 import 'package:yak_flutter/yak_flutter.dart';
+import 'size_ref.dart';
+import 'size_scale.dart';
 
-import 'adaptive_size.dart';
-import 'device_size.dart';
-import 'inherited_adaptive_size.dart';
-
-class AdaptiveSizeProvider extends StatefulWidget {
+class SizeRefProvider extends StatefulWidget {
   final Widget child;
   final List<DeviceSize> deviceSizes;
-  const AdaptiveSizeProvider({
+  const SizeRefProvider({
     super.key,
     required this.child,
-    this.deviceSizes = DeviceSize.values,
+    this.deviceSizes = const [],
   });
 
   @override
-  State<AdaptiveSizeProvider> createState() => _AdaptiveSizeProvidertState();
+  State<SizeRefProvider> createState() => _SizeRefProvidertState();
 }
 
-class _AdaptiveSizeProvidertState extends State<AdaptiveSizeProvider> {
+class _SizeRefProvidertState extends State<SizeRefProvider> {
   final _initialized = Completer<bool>();
-  late final ValueNotifier<AdaptiveSizeData> _notifier;
+  late final ValueNotifier<SizeRef> _notifier;
 
   @override
   void didChangeDependencies() {
     if (!_initialized.isCompleted) {
       _initialize(context);
+      _initialized.complete(true);
       return;
     }
     _update(context);
@@ -42,28 +42,25 @@ class _AdaptiveSizeProvidertState extends State<AdaptiveSizeProvider> {
 
   void _update(BuildContext context) {
     final size = MediaQuery.sizeOf(context);
-    if (size == _notifier.value.realScreenSize &&
-        widget.deviceSizes == _notifier.value.deviceSizes) {
+    final mostSimilarSize = widget.deviceSizes.mostSimilarTo(size);
+    final scale = SizeScale(size, mostSimilarSize);
+    final SizeRef sizeRef = (scale: scale, size: mostSimilarSize);
+    if (sizeRef == _notifier.value) {
       return;
     }
-
-    _notifier.value = AdaptiveSizeData.fromSize(
-      size,
-      deviceSizes: widget.deviceSizes,
-    );
+    _notifier.value = sizeRef;
   }
 
-  void _initialize(BuildContext size) {
-    final adaptiveSize = AdaptiveSizeData.fromSize(
-      MediaQuery.sizeOf(context),
-      deviceSizes: widget.deviceSizes,
-    );
-    _notifier = ValueNotifier<AdaptiveSizeData>(adaptiveSize);
-    _initialized.complete(true);
+  void _initialize(BuildContext context) {
+    final size = MediaQuery.sizeOf(context);
+    final mostSimilarSize = widget.deviceSizes.mostSimilarTo(size);
+    final scale = SizeScale(size, mostSimilarSize);
+    final SizeRef sizeRef = (scale: scale, size: mostSimilarSize);
+    _notifier = ValueNotifier<SizeRef>(sizeRef);
   }
 
   @override
-  Widget build(context) => InheritedAdaptiveSize(
+  Widget build(context) => InheritedSizeRef(
         notifier: RestrictedNotifier(_notifier),
         child: widget.child,
       );

packages/adaptive_style/lib/src/device_size.dart

@@ -1,27 +1,36 @@
 import 'dart:ui' show Size;
+import 'package:flutter/widgets.dart' show Orientation;
 
 /// a collection of well known screen dimesions
 /// as offered by [chrome device toolbar]
-enum DeviceSize {
-  iphoneSE(Size(375, 667)),
-  iphoneXR(Size(414, 896)),
-  iphone12PRO(Size(390, 844)),
-  iphone14PRO(Size(430, 932)),
-  pixel7(Size(412, 915)),
-  galaxyS8Plus(Size(360, 740)),
-  galaxyS20Ultra(Size(412, 915)),
-  iPadMini(Size(768, 1024)),
-  iPadAir(Size(820, 1180)),
-  iPadPro(Size(1024, 1366)),
-  surfacePro7(Size(912, 1368)),
-  surfaceDuo(Size(540, 720)),
-  galaxyFold(Size(280, 653)),
-  galaxyA51(Size(412, 914)),
-  galaxyA71(Size(412, 914)),
-  nestHub(Size(1024, 600)),
-  nestHubMax(Size(1280, 800));
 
-  const DeviceSize(this.size);
+// enum Orientation {
+//   landscape,
+//   portrait,
+// }
 
-  final Size size;
+extension type const DeviceSize._(Size value) implements Size {
+  const DeviceSize(Size value) : this._(value);
+  static const iphoneSE = DeviceSize(Size(375, 667));
+  static const iphoneXR = DeviceSize(Size(414, 896));
+  static const iphone12PRO = DeviceSize(Size(390, 844));
+  static const iphone14PRO = DeviceSize(Size(430, 932));
+  static const pixel7 = DeviceSize(Size(412, 915));
+  static const galaxyS8Plus = DeviceSize(Size(360, 740));
+  static const galaxyS20Ultra = DeviceSize(Size(412, 915));
+  static const iPadMini = DeviceSize(Size(768, 1024));
+  static const iPadAir = DeviceSize(Size(820, 1180));
+  static const iPadPro = DeviceSize(Size(1024, 1366));
+  static const surfacePro7 = DeviceSize(Size(912, 1368));
+  static const surfaceDuo = DeviceSize(Size(540, 720));
+  static const galaxyFold = DeviceSize(Size(280, 653));
+  static const galaxyA51 = DeviceSize(Size(412, 914));
+  static const galaxyA71 = DeviceSize(Size(412, 914));
+  static const nestHub = DeviceSize(Size(1024, 600));
+  static const nestHubMax = DeviceSize(Size(1280, 800));
+
+  Orientation get orientation =>
+      aspectRatio <= 1 ? Orientation.portrait : Orientation.landscape;
+
+  DeviceSize flip() => DeviceSize(Size(height, width));
 }