mirror of
https://github.com/vodemn/m3_lightmeter.git
synced 2024-11-21 15:00:40 +00:00
finalized ProFeaturesScreen
layout
This commit is contained in:
parent
79885acb8d
commit
3a9baf42d6
7 changed files with 118 additions and 109 deletions
|
@ -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": {
|
||||
|
|
|
@ -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,
|
||||
),
|
||||
],
|
||||
|
|
|
@ -1,69 +1,90 @@
|
|||
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(
|
||||
child: Column(
|
||||
children: [
|
||||
Expanded(
|
||||
child: SliverScreen(
|
||||
title: S.of(context).proFeatures,
|
||||
slivers: [
|
||||
const SliverToBoxAdapter(child: _FeaturesHeader()),
|
||||
SliverList.separated(
|
||||
itemCount: AppFeature.values.length,
|
||||
itemBuilder: (context, index) {
|
||||
return _FeatureItem(feature: AppFeature.values[index]);
|
||||
},
|
||||
separatorBuilder: (_, __) => const Padding(
|
||||
padding: EdgeInsets.symmetric(horizontal: Dimens.paddingM),
|
||||
child: Divider(),
|
||||
return Column(
|
||||
children: [
|
||||
Expanded(
|
||||
child: SliverScreen(
|
||||
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,
|
||||
),
|
||||
),
|
||||
const SliverToBoxAdapter(child: SizedBox(height: Dimens.grid16)),
|
||||
],
|
||||
),
|
||||
),
|
||||
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,
|
||||
itemBuilder: (context, index) {
|
||||
return _FeatureItem(feature: AppFeature.values[index]);
|
||||
},
|
||||
separatorBuilder: (_, __) => const Padding(
|
||||
padding: EdgeInsets.symmetric(horizontal: Dimens.paddingM),
|
||||
child: Divider(),
|
||||
),
|
||||
),
|
||||
SliverToBoxAdapter(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(Dimens.paddingM),
|
||||
child: Text(S.of(context).proFeaturesSupportText),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
Container(
|
||||
color: Theme.of(context).colorScheme.surfaceElevated1,
|
||||
width: MediaQuery.sizeOf(context).width,
|
||||
padding: EdgeInsets.fromLTRB(
|
||||
Dimens.paddingM,
|
||||
Dimens.paddingM,
|
||||
Dimens.paddingM,
|
||||
MediaQuery.paddingOf(context).bottom,
|
||||
),
|
||||
child: FilledButton(
|
||||
onPressed: () {},
|
||||
child: Text(S.of(context).unlockFor(IAPProducts.productOf(context, IAPProductType.paidFeatures)!.price)),
|
||||
),
|
||||
),
|
||||
Container(
|
||||
color: Theme.of(context).colorScheme.surfaceElevated1,
|
||||
width: MediaQuery.sizeOf(context).width,
|
||||
padding: EdgeInsets.fromLTRB(
|
||||
Dimens.paddingM,
|
||||
Dimens.paddingM,
|
||||
Dimens.paddingM,
|
||||
Dimens.paddingM + MediaQuery.paddingOf(context).bottom,
|
||||
),
|
||||
],
|
||||
),
|
||||
child: FilledButton(
|
||||
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(
|
||||
children: [
|
||||
const Spacer(),
|
||||
_FeatureHighlight(
|
||||
child: Center(
|
||||
child: Padding(
|
||||
padding: EdgeInsets.symmetric(
|
||||
horizontal: Dimens.paddingM,
|
||||
vertical: Dimens.paddingS,
|
||||
),
|
||||
child: Text('Free'),
|
||||
return Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: Dimens.paddingM),
|
||||
child: Row(
|
||||
children: [
|
||||
const Spacer(),
|
||||
_FeatureHighlight(child: Text(S.of(context).featuresFree)),
|
||||
_FeatureHighlight(
|
||||
roundedTop: true,
|
||||
highlight: true,
|
||||
child: Text(
|
||||
S.of(context).featuresPro,
|
||||
style: Theme.of(context)
|
||||
.textTheme
|
||||
.bodyMedium!
|
||||
.copyWith(color: Theme.of(context).colorScheme.onSecondaryContainer),
|
||||
),
|
||||
),
|
||||
),
|
||||
_FeatureHighlight(
|
||||
roundedTop: true,
|
||||
highlight: true,
|
||||
child: Center(
|
||||
child: Padding(
|
||||
padding: EdgeInsets.symmetric(
|
||||
horizontal: Dimens.paddingM,
|
||||
vertical: Dimens.paddingS,
|
||||
),
|
||||
child: Text(
|
||||
'Pro',
|
||||
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:
|
||||
BoxConstraints(minWidth: (highlight ? _FeatureHighlight._proWidth : _FeatureHighlight._freeWidth) ?? 0.0),
|
||||
constraints: BoxConstraints(
|
||||
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(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: Dimens.paddingM,
|
||||
vertical: Dimens.paddingS,
|
||||
),
|
||||
child: Icon(
|
||||
Icons.check_outlined,
|
||||
color: highlight ? Theme.of(context).colorScheme.onSecondaryContainer : null,
|
||||
),
|
||||
return Icon(
|
||||
Icons.check_outlined,
|
||||
color: highlight ? Theme.of(context).colorScheme.onSecondaryContainer : null,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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(
|
||||
|
|
|
@ -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()],
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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,
|
||||
),
|
||||
),
|
||||
|
|
|
@ -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);
|
||||
|
||||
|
|
Loading…
Reference in a new issue