kenmirrors/ente
1
0
Fork 0
mirror of https://github.com/ente-io/ente.git synced 2025-08-06 06:33:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[mob][photos] Create new subscription toggle

Browse Source
This commit is contained in:
ashilkn 2024-07-26 18:50:11 +05:30
parent 87e3aa4d11
commit fc93deb575
1 changed files with 163 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

221
mobile/lib/ui/payment/stripe_subscription_page.dart
View File

@ -8,7 +8,6 @@ import 'package:photos/models/billing_plan.dart';
import 'package:photos/models/subscription.dart'; import 'package:photos/models/subscription.dart';
import 'package:photos/models/user_details.dart'; import 'package:photos/models/user_details.dart';
import 'package:photos/services/billing_service.dart'; import 'package:photos/services/billing_service.dart';
import "package:photos/services/update_service.dart";
import 'package:photos/services/user_service.dart'; import 'package:photos/services/user_service.dart';
import "package:photos/theme/colors.dart"; import "package:photos/theme/colors.dart";
import 'package:photos/theme/ente_theme.dart'; import 'package:photos/theme/ente_theme.dart';
@ -210,6 +209,8 @@ class _StripeSubscriptionPageState extends State<StripeSubscriptionPage> {
), ),
); );
widgets.add(_showSubscriptionToggle());
widgets.addAll([ widgets.addAll([
Column( Column(
mainAxisAlignment: MainAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center,
@ -218,8 +219,6 @@ class _StripeSubscriptionPageState extends State<StripeSubscriptionPage> {
const Padding(padding: EdgeInsets.all(4)), const Padding(padding: EdgeInsets.all(4)),
]); ]);
widgets.add(_showSubscriptionToggle());
if (_currentSubscription != null) { if (_currentSubscription != null) {
widgets.add( widgets.add(
ValidityWidget( ValidityWidget(
@ -537,61 +536,58 @@ class _StripeSubscriptionPageState extends State<StripeSubscriptionPage> {
} }
Widget _showSubscriptionToggle() { Widget _showSubscriptionToggle() {
return Container( // return Container(
padding: const EdgeInsets.only(left: 8, right: 8, top: 2, bottom: 2), // padding: const EdgeInsets.fromLTRB(16, 32, 16, 6),
margin: const EdgeInsets.only(bottom: 6), // child: Column(
child: Column( // children: [
children: [ // RepaintBoundary(
RepaintBoundary( // child: SizedBox(
child: SizedBox( // width: 250,
width: 250, // child: Row(
child: Row( // mainAxisSize: MainAxisSize.max,
mainAxisSize: MainAxisSize.max, // mainAxisAlignment: MainAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center, // children: [
children: [ // Expanded(
Expanded( // child: SegmentedButton(
child: SegmentedButton( // style: SegmentedButton.styleFrom(
style: SegmentedButton.styleFrom( // selectedBackgroundColor:
selectedBackgroundColor: // getEnteColorScheme(context).fillMuted,
getEnteColorScheme(context).fillMuted, // selectedForegroundColor:
selectedForegroundColor: // getEnteColorScheme(context).textBase,
getEnteColorScheme(context).textBase, // side: BorderSide(
side: BorderSide( // color: getEnteColorScheme(context).strokeMuted,
color: getEnteColorScheme(context).strokeMuted, // width: 1,
width: 1, // ),
), // ),
), // segments: <ButtonSegment<bool>>[
segments: <ButtonSegment<bool>>[ // ButtonSegment(
ButtonSegment( // label: Text(S.of(context).monthly),
label: Text(S.of(context).monthly), // value: false,
value: false, // ),
), // ButtonSegment(
ButtonSegment( // label: Text(S.of(context).yearly),
label: Text(S.of(context).yearly), // value: true,
value: true, // ),
), // ],
], // selected: {_showYearlyPlan},
selected: {_showYearlyPlan}, // onSelectionChanged: (p0) {
onSelectionChanged: (p0) { // _showYearlyPlan = p0.first;
_showYearlyPlan = p0.first; // _filterStripeForUI();
_filterStripeForUI(); // },
}, // ),
), // ),
), // ],
], // ),
), // ),
), // ),
), // const Padding(padding: EdgeInsets.all(8)),
_isFreePlanUser() && !UpdateService.instance.isPlayStoreFlavor() // ],
? Text( // ),
S.of(context).twoMonthsFreeOnYearlyPlans, // );
style: getEnteTextTheme(context).miniMuted,
) //
: const SizedBox.shrink(),
const Padding(padding: EdgeInsets.all(8)), return SubscriptionToggle();
],
),
);
} }
void _addCurrentPlanWidget(List<Widget> planWidgets) { void _addCurrentPlanWidget(List<Widget> planWidgets) {
@ -623,3 +619,112 @@ class _StripeSubscriptionPageState extends State<StripeSubscriptionPage> {
); );
} }
} }
class SubscriptionToggle extends StatefulWidget {
const SubscriptionToggle({super.key});
@override
State<SubscriptionToggle> createState() => _SubscriptionToggleState();
}
class _SubscriptionToggleState extends State<SubscriptionToggle> {
bool _isYearly = false;
@override
Widget build(BuildContext context) {
const borderPadding = 2.5;
const spaceBetweenButtons = 4.0;
final textTheme = getEnteTextTheme(context);
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 32),
child: LayoutBuilder(
builder: (context, constrains) {
final widthOfButton = (constrains.maxWidth -
(borderPadding * 2) -
spaceBetweenButtons) /
2;
return Container(
decoration: BoxDecoration(
color: const Color.fromRGBO(242, 242, 242, 1),
borderRadius: BorderRadius.circular(50),
),
padding: const EdgeInsets.symmetric(
vertical: borderPadding,
horizontal: borderPadding,
),
width: double.infinity,
child: Stack(
children: [
Row(
children: [
GestureDetector(
onTap: () {
setState(() {
_isYearly = false;
});
},
child: Container(
padding: const EdgeInsets.symmetric(
vertical: 8,
),
width: widthOfButton,
child: Center(
child: Text(
"Monthly",
style: textTheme.bodyFaint,
),
),
),
),
const SizedBox(width: spaceBetweenButtons),
GestureDetector(
onTap: () {
setState(() {
_isYearly = true;
});
},
child: Container(
padding: const EdgeInsets.symmetric(
vertical: 8,
),
width: widthOfButton,
child: Center(
child: Text(
"Yearly",
style: textTheme.bodyFaint,
),
),
),
),
],
),
AnimatedPositioned(
duration: const Duration(milliseconds: 500),
curve: Curves.easeInOutQuart,
left: _isYearly ? widthOfButton + spaceBetweenButtons : 0,
child: Container(
width: widthOfButton,
height: 40,
decoration: BoxDecoration(
color: const Color.fromRGBO(255, 255, 255, 1),
borderRadius: BorderRadius.circular(50),
),
child: AnimatedSwitcher(
duration: const Duration(milliseconds: 500),
switchInCurve: Curves.easeInOutExpo,
switchOutCurve: Curves.easeInOutExpo,
child: Text(
key: ValueKey(_isYearly),
_isYearly ? "Yearly" : "Monthly",
style: textTheme.body,
),
),
),
),
],
),
);
},
),
);
}
}