finalized ProFeaturesScreen layout

lib/l10n/intl_en.arb

@@ -103,11 +103,13 @@
             }
         }
     },
-    "proFeatures": "Pro features",
-    "unlockProFeatures": "Unlock Pro features",
-    "unlockProFeaturesDescription": "Unlock professional features:\n \u2022 Equipment profiles containing filters for aperture, shutter speed, and more\n \u2022 List of films with compensation for what's known as reciprocity failure\n \u2022 Spot metering & Histogram\n \u2022 And more!\n\nBy unlocking Pro features you support the development and make it possible to add new features to the app.",
     "unlock": "Unlock",
-    "proFeaturesSupportText": "By purchasing you support the development and make it possible to add new features to the app.",
+    "proFeaturesTitle": "Lightmeter Pro",
+    "featuresFree": "Free",
+    "featuresPro": "Pro",
+    "proFeaturesPromoText": "Lightmeter Pro delivers everything you need to get the best shots!",
+    "proFeaturesWhatsIncluded": "What's included?",
+    "proFeaturesSupportText": "By purchasing Lightmeter Pro you support the development and make it possible to add new features to the app.",
     "unlockFor": "Unlock for {price}",
     "@unlockFor": {
         "price": {

lib/screens/metering/components/shared/readings_container/components/lightmeter_pro/widget_lightmeter_pro.dart

@@ -15,7 +15,7 @@ class LightmeterProAnimatedDialog extends StatelessWidget {
         textColor: Theme.of(context).colorScheme.onErrorContainer,
         values: [
           ReadingValue(
-            label: S.of(context).proFeatures,
+            label: S.of(context).proFeaturesTitle,
             value: S.of(context).unlock,
           ),
         ],

lib/screens/pro_features/screen_pro_features.dart

@@ -1,38 +1,50 @@
-import 'dart:math';
-
 import 'package:flutter/material.dart';
 import 'package:lightmeter/data/models/app_feature.dart';
 import 'package:lightmeter/generated/l10n.dart';
+import 'package:lightmeter/providers/services_provider.dart';
 import 'package:lightmeter/res/dimens.dart';
 import 'package:lightmeter/res/theme.dart';
-import 'package:lightmeter/screens/settings/components/about/widget_settings_section_about.dart';
-import 'package:lightmeter/screens/settings/components/general/widget_settings_section_general.dart';
-import 'package:lightmeter/screens/settings/components/lightmeter_pro/widget_settings_section_lightmeter_pro.dart';
-import 'package:lightmeter/screens/settings/components/metering/widget_settings_section_metering.dart';
-import 'package:lightmeter/screens/settings/components/theme/widget_settings_section_theme.dart';
-import 'package:lightmeter/screens/settings/flow_settings.dart';
 import 'package:lightmeter/screens/shared/sliver_screen/screen_sliver.dart';
-import 'package:lightmeter/utils/context_utils.dart';
 import 'package:lightmeter/utils/text_height.dart';
 import 'package:m3_lightmeter_iap/m3_lightmeter_iap.dart';
 
-class ProFeaturesScreen extends StatefulWidget {
+class ProFeaturesScreen extends StatelessWidget {
   const ProFeaturesScreen({super.key});
 
-  @override
-  State<ProFeaturesScreen> createState() => _ProFeaturesScreenState();
-}
-
-class _ProFeaturesScreenState extends State<ProFeaturesScreen> {
   @override
   Widget build(BuildContext context) {
-    return ScaffoldMessenger(
+    return Column(
-      child: Column(
       children: [
         Expanded(
           child: SliverScreen(
-              title: S.of(context).proFeatures,
+            title: S.of(context).proFeaturesTitle,
             slivers: [
+              SliverToBoxAdapter(
+                child: Padding(
+                  padding: const EdgeInsets.symmetric(
+                    horizontal: Dimens.paddingM,
+                    vertical: Dimens.paddingS,
+                  ),
+                  child: Text(
+                    S.of(context).proFeaturesPromoText,
+                    style: Theme.of(context).textTheme.bodyLarge,
+                  ),
+                ),
+              ),
+              SliverToBoxAdapter(
+                child: Padding(
+                  padding: const EdgeInsets.fromLTRB(
+                    Dimens.paddingM,
+                    Dimens.paddingM,
+                    Dimens.paddingM,
+                    0,
+                  ),
+                  child: Text(
+                    S.of(context).proFeaturesWhatsIncluded,
+                    style: Theme.of(context).textTheme.headlineSmall,
+                  ),
+                ),
+              ),
               const SliverToBoxAdapter(child: _FeaturesHeader()),
               SliverList.separated(
                 itemCount: AppFeature.values.length,
@@ -44,7 +56,12 @@ class _ProFeaturesScreenState extends State<ProFeaturesScreen> {
                   child: Divider(),
                 ),
               ),
-                const SliverToBoxAdapter(child: SizedBox(height: Dimens.grid16)),
+              SliverToBoxAdapter(
+                child: Padding(
+                  padding: const EdgeInsets.all(Dimens.paddingM),
+                  child: Text(S.of(context).proFeaturesSupportText),
+                ),
+              ),
             ],
           ),
         ),
@@ -55,15 +72,19 @@ class _ProFeaturesScreenState extends State<ProFeaturesScreen> {
             Dimens.paddingM,
             Dimens.paddingM,
             Dimens.paddingM,
-              MediaQuery.paddingOf(context).bottom,
+            Dimens.paddingM + MediaQuery.paddingOf(context).bottom,
           ),
           child: FilledButton(
-              onPressed: () {},
+            onPressed: () {
+              ServicesProvider.maybeOf(context)
+                  ?.analytics
+                  .setCustomKey('iap_product_type', IAPProductType.paidFeatures.storeId);
+              IAPProductsProvider.maybeOf(context)?.buy(IAPProductType.paidFeatures);
+            },
             child: Text(S.of(context).unlockFor(IAPProducts.productOf(context, IAPProductType.paidFeatures)!.price)),
           ),
         ),
       ],
-      ),
     );
   }
 }
@@ -73,41 +94,25 @@ class _FeaturesHeader extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Row(
+    return Padding(
+      padding: const EdgeInsets.symmetric(horizontal: Dimens.paddingM),
+      child: Row(
         children: [
           const Spacer(),
-        _FeatureHighlight(
+          _FeatureHighlight(child: Text(S.of(context).featuresFree)),
-          child: Center(
-            child: Padding(
-              padding: EdgeInsets.symmetric(
-                horizontal: Dimens.paddingM,
-                vertical: Dimens.paddingS,
-              ),
-              child: Text('Free'),
-            ),
-          ),
-        ),
           _FeatureHighlight(
             roundedTop: true,
             highlight: true,
-          child: Center(
-            child: Padding(
-              padding: EdgeInsets.symmetric(
-                horizontal: Dimens.paddingM,
-                vertical: Dimens.paddingS,
-              ),
             child: Text(
-                'Pro',
+              S.of(context).featuresPro,
               style: Theme.of(context)
                   .textTheme
                   .bodyMedium!
                   .copyWith(color: Theme.of(context).colorScheme.onSecondaryContainer),
             ),
           ),
-          ),
-        ),
-        const SizedBox(width: Dimens.grid16),
         ],
+      ),
     );
   }
 }
@@ -145,7 +150,9 @@ class _FeatureItem extends StatelessWidget {
             ),
             Opacity(
               opacity: feature.isFree ? 1 : 0,
-              child: const _CheckBox(highlight: false),
+              child: const _FeatureHighlight(
+                child: _CheckBox(highlight: false),
+              ),
             ),
             _FeatureHighlight(
               highlight: true,
@@ -179,18 +186,24 @@ class _FeatureHighlight extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     _FeatureHighlight._freeWidth ??= textSize(
-      'Free',
+      S.of(context).featuresFree,
       Theme.of(context).textTheme.bodyMedium,
       MediaQuery.sizeOf(context).width,
     ).width;
     _FeatureHighlight._proWidth ??= textSize(
-      'Pro',
+      S.of(context).featuresPro,
       Theme.of(context).textTheme.bodyMedium,
       MediaQuery.sizeOf(context).width,
     ).width;
     return Container(
-      constraints:
+      constraints: BoxConstraints(
-          BoxConstraints(minWidth: (highlight ? _FeatureHighlight._proWidth : _FeatureHighlight._freeWidth) ?? 0.0),
+        minWidth:
+            ((highlight ? _FeatureHighlight._proWidth : _FeatureHighlight._freeWidth) ?? 0.0) + Dimens.paddingM * 2,
+      ),
+      padding: const EdgeInsets.symmetric(
+        horizontal: Dimens.paddingM,
+        vertical: Dimens.paddingS,
+      ),
       decoration: BoxDecoration(
         color: highlight ? Theme.of(context).colorScheme.secondaryContainer : null,
         borderRadius: roundedTop
@@ -217,15 +230,9 @@ class _CheckBox extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Padding(
+    return Icon(
-      padding: const EdgeInsets.symmetric(
-        horizontal: Dimens.paddingM,
-        vertical: Dimens.paddingS,
-      ),
-      child: Icon(
       Icons.check_outlined,
       color: highlight ? Theme.of(context).colorScheme.onSecondaryContainer : null,
-      ),
     );
   }
 }

lib/screens/settings/components/lightmeter_pro/components/buy_pro/widget_list_tile_buy_pro.dart

@@ -13,7 +13,7 @@ class BuyProListTile extends StatelessWidget {
     final isPending = status == IAPProductStatus.purchased || status == null;
     return ListTile(
       leading: const Icon(Icons.star_outlined),
-      title: Text(S.of(context).unlockProFeatures),
+      title: Text(S.of(context).proFeaturesTitle),
       onTap: !isPending
           ? () {
               showDialog(

lib/screens/settings/components/lightmeter_pro/widget_settings_section_lightmeter_pro.dart

@@ -9,7 +9,7 @@ class LightmeterProSettingsSection extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return SettingsSection(
-      title: S.of(context).proFeatures,
+      title: S.of(context).proFeaturesTitle,
       children: const [BuyProListTile()],
     );
   }

lib/screens/shared/pro_features_dialog/widget_dialog_pro_features.dart

@@ -12,10 +12,10 @@ class ProFeaturesDialog extends StatelessWidget {
 
   double height(BuildContext context) => TransparentDialog.height(
         context,
-        title: S.of(context).proFeatures,
+        title: S.of(context).proFeaturesTitle,
         contextHeight: dialogTextHeight(
           context,
-          S.of(context).unlockProFeaturesDescription,
+          S.of(context).proFeaturesPromoText,
           Theme.of(context).textTheme.bodyMedium,
           Dimens.paddingL * 2,
         ),
@@ -25,14 +25,14 @@ class ProFeaturesDialog extends StatelessWidget {
   Widget build(BuildContext context) {
     return TransparentDialog(
       icon: Icons.star_outlined,
-      title: S.of(context).proFeatures,
+      title: S.of(context).proFeaturesTitle,
       scrollableContent: false,
       content: Flexible(
         child: SingleChildScrollView(
           child: Padding(
             padding: const EdgeInsets.symmetric(horizontal: Dimens.paddingL),
             child: Text(
-              S.of(context).unlockProFeaturesDescription,
+              S.of(context).proFeaturesPromoText,
               style: Theme.of(context).textTheme.bodyMedium,
             ),
           ),

test/screens/settings/components/widget_settings_section_lightmeter_pro_test.dart

@@ -34,7 +34,7 @@ void main() {
       await tester.tap(find.byType(BuyProListTile));
       await tester.pumpAndSettle();
       expect(find.byType(TransparentDialog), findsOneWidget);
-      expect(find.text(S.current.proFeatures), findsNWidgets(2));
+      expect(find.text(S.current.proFeaturesTitle), findsNWidgets(2));
       expect(find.text(S.current.cancel), findsOneWidget);
       expect(find.text(S.current.unlockFor(_price)), findsOneWidget);
 
@@ -51,7 +51,7 @@ void main() {
       await tester.tap(find.byType(BuyProListTile));
       await tester.pumpAndSettle();
       expect(find.byType(TransparentDialog), findsOneWidget);
-      expect(find.text(S.current.proFeatures), findsNWidgets(2));
+      expect(find.text(S.current.proFeaturesTitle), findsNWidgets(2));
       expect(find.text(S.current.cancel), findsOneWidget);
       expect(find.text(S.current.unlockFor(_price)), findsOneWidget);