ML-189 Auto-downsize exposure pairs items for big display sizes (#190)

* added autosize text

* added more room for exposure pairs list

* downsize text only for long values

lib/screens/metering/components/camera_container/widget_container_camera.dart

@@ -76,30 +76,33 @@ class CameraContainer extends StatelessWidget {
                 height: min(meteringContainerHeight, cameraPreviewHeight) + Dimens.paddingM * 2,
               ),
               Expanded(
-                child: Padding(
-                  padding: const EdgeInsets.symmetric(horizontal: Dimens.paddingM),
                 child: Row(
                   children: [
                     Expanded(
                       child: Padding(
-                          padding: EdgeInsets.only(top: topBarOverflow >= 0 ? topBarOverflow : 0),
+                        padding: EdgeInsets.only(
+                          left: Dimens.paddingM - Dimens.grid8,
+                          top: topBarOverflow >= 0 ? topBarOverflow : 0,
+                        ),
                         child: ExposurePairsList(
                           exposurePairs,
                           onExposurePairTap: onExposurePairTap,
                         ),
                       ),
                     ),
-                      const SizedBox(width: Dimens.grid8),
+                    SizedBox(
-                      Expanded(
+                      width: MediaQuery.sizeOf(context).width / 2 - Dimens.grid4,
                       child: Padding(
-                          padding: EdgeInsets.only(top: topBarOverflow <= 0 ? -topBarOverflow : 0),
+                        padding: EdgeInsets.only(
+                          top: topBarOverflow <= 0 ? -topBarOverflow : 0,
+                          right: Dimens.paddingM,
+                        ),
                         child: const _CameraControlsBuilder(),
                       ),
                     ),
                   ],
                 ),
               ),
-              ),
             ],
           ),
         ),

lib/screens/metering/components/shared/exposure_pairs_list/components/exposure_pairs_list_item/widget_item_list_exposure_pairs.dart

@@ -1,3 +1,4 @@
+import 'package:auto_size_text/auto_size_text.dart';
 import 'package:flutter/material.dart';
 import 'package:lightmeter/res/dimens.dart';
 import 'package:m3_lightmeter_resources/m3_lightmeter_resources.dart';
@@ -15,22 +16,9 @@ class ExposurePairsListItem<T extends PhotographyStopValue> extends StatelessWid
   @override
   Widget build(BuildContext context) {
     final List<Widget> rowChildren = [
-      Flexible(
+      _Title(value),
-        child: Text(
-          value.toString(),
-          style: labelTextStyle(context).copyWith(color: Theme.of(context).colorScheme.onBackground),
-          softWrap: false,
-          overflow: TextOverflow.fade,
-        ),
-      ),
       const SizedBox(width: Dimens.grid8),
-      ColoredBox(
+      if (value.stopType == StopType.full) const _Tick.full() else const _Tick.short(),
-        color: Theme.of(context).colorScheme.onBackground,
-        child: SizedBox(
-          height: 1,
-          width: tickLength(),
-        ),
-      ),
       if (value.stopType != StopType.full) const SizedBox(width: Dimens.grid4),
     ];
     return Row(
@@ -59,3 +47,61 @@ class ExposurePairsListItem<T extends PhotographyStopValue> extends StatelessWid
     }
   }
 }
+
+class _Title<T extends PhotographyStopValue> extends StatelessWidget {
+  final T value;
+  late final String _title = value.toString();
+
+  _Title(this.value, {super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Flexible(
+      child: _title.length > 5 // downsize text only for long values like 1/4000
+          ? AutoSizeText(
+              value.toString(),
+              stepGranularity: 0.5,
+              minFontSize: 10,
+              style: labelTextStyle(context).copyWith(color: Theme.of(context).colorScheme.onBackground),
+              softWrap: false,
+              overflow: TextOverflow.fade,
+              maxLines: 1,
+            )
+          : Text(
+              value.toString(),
+              style: labelTextStyle(context).copyWith(color: Theme.of(context).colorScheme.onBackground),
+              softWrap: false,
+              overflow: TextOverflow.fade,
+              maxLines: 1,
+            ),
+    );
+  }
+
+  TextStyle labelTextStyle(BuildContext context) {
+    switch (value.stopType) {
+      case StopType.full:
+        return Theme.of(context).textTheme.bodyLarge!;
+      case StopType.half:
+      case StopType.third:
+        return Theme.of(context).textTheme.bodyMedium!;
+    }
+  }
+}
+
+class _Tick extends StatelessWidget {
+  final double _length;
+
+  const _Tick.full() : _length = Dimens.grid16;
+  const _Tick.short() : _length = Dimens.grid8;
+
+  @override
+  Widget build(BuildContext context) {
+    return ColoredBox(
+      color: Theme.of(context).colorScheme.onBackground,
+      child: SizedBox(
+        height: 1,
+        width: _length,
+      ),
+    );
+  }
+}

pubspec.yaml

@@ -8,6 +8,7 @@ environment:
 
 dependencies:
   app_settings: 4.2.0
+  auto_size_text: 3.0.0
   bloc_concurrency: 0.2.2
   camera: 0.10.5+2
   camera_android_camerax: 0.6.1+1