started implementing metering screen

lib/main.dart

@@ -1,4 +1,8 @@
 import 'package:flutter/material.dart';
+import 'package:material_color_utilities/material_color_utilities.dart';
+
+import 'res/theme.dart';
+import 'screens/metering/metering_screen.dart';
 
 void main() {
   runApp(const MyApp());
@@ -12,56 +16,10 @@ class MyApp extends StatelessWidget {
     return MaterialApp(
       title: 'Flutter Demo',
       theme: ThemeData(
-        primarySwatch: Colors.blue,
+        useMaterial3: true,
-      ),
+        colorScheme: lightColorScheme,
-      home: const MyHomePage(title: 'Flutter Demo Home Page'),
-    );
-  }
-}
-
-class MyHomePage extends StatefulWidget {
-  const MyHomePage({super.key, required this.title});
-
-  final String title;
-
-  @override
-  State<MyHomePage> createState() => _MyHomePageState();
-}
-
-class _MyHomePageState extends State<MyHomePage> {
-  int _counter = 0;
-
-  void _incrementCounter() {
-    setState(() {
-      _counter++;
-    });
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    return Scaffold(
-      appBar: AppBar(
-        title: Text(widget.title),
-      ),
-      body: Center(
-        child: Column(
-          mainAxisAlignment: MainAxisAlignment.center,
-          children: <Widget>[
-            const Text(
-              'You have pushed the button this many times:',
-            ),
-            Text(
-              '$_counter',
-              style: Theme.of(context).textTheme.headline4,
-            ),
-          ],
-        ),
-      ),
-      floatingActionButton: FloatingActionButton(
-        onPressed: _incrementCounter,
-        tooltip: 'Increment',
-        child: const Icon(Icons.add),
       ),
+      home: const MeteringScreen(),
     );
   }
 }

lib/res/dimens.dart

@@ -4,6 +4,7 @@ class Dimens {
   static const double borderRadiusM = 16;
   static const double borderRadiusL = 24;
 
+  static const double grid4 = 4;
   static const double grid8 = 8;
   static const double grid16 = 16;
 

lib/res/theme.dart

@@ -0,0 +1,22 @@
+import 'package:flutter/material.dart';
+import 'package:material_color_utilities/material_color_utilities.dart';
+
+ColorScheme get lightColorScheme {
+  final scheme = Scheme.light(0xFF2196f3);
+  return ColorScheme.light(
+    primary: Color(scheme.primary),
+    onPrimary: Color(scheme.onPrimary),
+    primaryContainer: Color(scheme.primaryContainer),
+    onPrimaryContainer: Color(scheme.onPrimaryContainer),
+    secondary: Color(scheme.secondary),
+    onSecondary: Color(scheme.onSecondary),
+    error: Color(scheme.error),
+    onError: Color(scheme.onError),
+    background: Color(scheme.background),
+    onBackground: Color(scheme.onBackground),
+    surface: Color.alphaBlend(Color(scheme.primary).withOpacity(0.05), Color(scheme.background)),
+    onSurface: Color(scheme.onSurface),
+    surfaceVariant: Color.alphaBlend(Color(scheme.primary).withOpacity(0.5), Color(scheme.background)),
+    onSurfaceVariant: Color(scheme.onSurfaceVariant),
+  );
+}

lib/screens/metering/components/topbar/components/reading_container.dart

@@ -58,9 +58,9 @@ class _ReadingValueBuilder extends StatelessWidget {
       children: [
         Text(
           reading.label,
-          style: textTheme.labelLarge?.copyWith(color: Theme.of(context).colorScheme.onPrimaryContainer),
+          style: textTheme.labelMedium?.copyWith(color: Theme.of(context).colorScheme.onPrimaryContainer),
         ),
-        const SizedBox(height: Dimens.grid8),
+        const SizedBox(height: Dimens.grid4),
         Text(
           reading.value,
           style: textTheme.titleLarge?.copyWith(color: Theme.of(context).colorScheme.onPrimaryContainer),

lib/screens/metering/components/topbar/topbar.dart

@@ -0,0 +1,139 @@
+import 'package:flutter/material.dart';
+import 'package:lightmeter/res/dimens.dart';
+import 'package:lightmeter/screens/metering/components/topbar/components/reading_container.dart';
+import 'package:lightmeter/screens/metering/components/topbar/topbar_shape.dart';
+import 'package:lightmeter/utils/text_line_height.dart';
+
+class MeteringTopBar extends StatelessWidget {
+  static const _columnsCount = 3;
+
+  final double lux;
+  final double ev;
+  final int iso;
+  final double nd;
+
+  const MeteringTopBar({
+    required this.lux,
+    required this.ev,
+    required this.iso,
+    required this.nd,
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final columnWidth = (MediaQuery.of(context).size.width - Dimens.paddingM * (_columnsCount + 1)) / 3;
+    return CustomPaint(
+      painter: TopBarShape(
+        color: Theme.of(context).colorScheme.surface,
+        appendixSize: Size(
+          (MediaQuery.of(context).size.width - Dimens.paddingM * 4) / 3 + Dimens.paddingM * 2,
+          Dimens.paddingM +
+              Theme.of(context).textTheme.labelMedium!.lineHeight +
+              Dimens.grid4 +
+              Theme.of(context).textTheme.titleLarge!.lineHeight +
+              Dimens.paddingM * 2,
+        ),
+      ),
+      child: Padding(
+        padding: const EdgeInsets.all(Dimens.paddingM),
+        child: SafeArea(
+          bottom: false,
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              IntrinsicHeight(
+                child: Row(
+                  crossAxisAlignment: CrossAxisAlignment.stretch,
+                  children: [
+                    Expanded(
+                      child: ReadingContainer(
+                        values: [
+                          const ReadingValue(
+                            label: 'Fastest',
+                            value: 'f/5.6 - 1/2000',
+                          ),
+                          const ReadingValue(
+                            label: 'Slowest',
+                            value: 'f/45 - 1/30',
+                          ),
+                        ],
+                      ),
+                    ),
+                    const _InnerPadding(),
+                    SizedBox(
+                      width: columnWidth,
+                      child: ClipRRect(
+                        borderRadius: BorderRadius.circular(Dimens.borderRadiusM),
+                        child: AspectRatio(
+                          aspectRatio: 3 / 4,
+                          child: ColoredBox(color: Colors.black),
+                        ),
+                      ),
+                    )
+                  ],
+                ),
+              ),
+              const _InnerPadding(),
+              Row(
+                children: [
+                  SizedBox(
+                    width: columnWidth,
+                    child: ReadingContainer.singleValue(
+                      value: ReadingValue(
+                        label: 'LUX',
+                        value: lux.toString(),
+                      ),
+                    ),
+                  ),
+                  const _InnerPadding(),
+                  SizedBox(
+                    width: columnWidth,
+                    child: ReadingContainer.singleValue(
+                      value: ReadingValue(
+                        label: 'EV',
+                        value: ev.toString(),
+                      ),
+                    ),
+                  ),
+                  const _InnerPadding(),
+                  SizedBox(
+                    width: columnWidth,
+                    child: ReadingContainer.singleValue(
+                      value: ReadingValue(
+                        label: 'ISO',
+                        value: iso.toString(),
+                      ),
+                    ),
+                  ),
+                ],
+              ),
+              const _InnerPadding(),
+              Row(
+                children: [
+                  const Spacer(),
+                  const _InnerPadding(),
+                  const Spacer(),
+                  const _InnerPadding(),
+                  SizedBox(
+                    width: columnWidth,
+                    child: ReadingContainer.singleValue(
+                      value: ReadingValue(
+                        label: 'ND',
+                        value: nd.toString(),
+                      ),
+                    ),
+                  ),
+                ],
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class _InnerPadding extends SizedBox {
+  const _InnerPadding() : super(height: Dimens.paddingM, width: Dimens.borderRadiusM);
+}

lib/screens/metering/metering_screen.dart

@@ -0,0 +1,26 @@
+import 'package:flutter/material.dart';
+import 'package:lightmeter/screens/metering/components/topbar/components/reading_container.dart';
+
+import 'components/topbar/topbar.dart';
+
+class MeteringScreen extends StatelessWidget {
+  const MeteringScreen({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: Theme.of(context).colorScheme.background,
+      body: Column(
+        children: [
+          MeteringTopBar(
+            lux: 283,
+            ev: 2.3,
+            iso: 6400,
+            nd: 0,
+          ),
+          const Spacer()
+        ],
+      ),
+    );
+  }
+}

lib/utils/text_line_height.dart

@@ -0,0 +1,5 @@
+import 'package:flutter/widgets.dart';
+
+extension TextLineHeight on TextStyle {
+  double get lineHeight => fontSize! * height!;
+}