mirror of
https://github.com/ente-io/ente.git
synced 2025-08-05 14:17:10 +00:00
[mob][photos] Move SubscriptionToggle widget to subscription_common_widgets.dart
This commit is contained in:
parent
bebaa76085
commit
41f59ec9ca
@ -578,118 +578,3 @@ class _StripeSubscriptionPageState extends State<StripeSubscriptionPage> {
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class SubscriptionToggle extends StatefulWidget {
|
||||
final Function(bool) onToggle;
|
||||
const SubscriptionToggle({required this.onToggle, super.key});
|
||||
|
||||
@override
|
||||
State<SubscriptionToggle> createState() => _SubscriptionToggleState();
|
||||
}
|
||||
|
||||
class _SubscriptionToggleState extends State<SubscriptionToggle> {
|
||||
bool _isYearly = true;
|
||||
@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: getEnteColorScheme(context).fillBaseGrey,
|
||||
borderRadius: BorderRadius.circular(50),
|
||||
),
|
||||
padding: const EdgeInsets.symmetric(
|
||||
vertical: borderPadding,
|
||||
horizontal: borderPadding,
|
||||
),
|
||||
width: double.infinity,
|
||||
child: Stack(
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
GestureDetector(
|
||||
onTap: () {
|
||||
setIsYearly(false);
|
||||
},
|
||||
behavior: HitTestBehavior.opaque,
|
||||
child: Container(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
vertical: 8,
|
||||
),
|
||||
width: widthOfButton,
|
||||
child: Center(
|
||||
child: Text(
|
||||
"Monthly",
|
||||
style: textTheme.bodyFaint,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: spaceBetweenButtons),
|
||||
GestureDetector(
|
||||
onTap: () {
|
||||
setIsYearly(true);
|
||||
},
|
||||
behavior: HitTestBehavior.opaque,
|
||||
child: Container(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
vertical: 8,
|
||||
),
|
||||
width: widthOfButton,
|
||||
child: Center(
|
||||
child: Text(
|
||||
"Yearly",
|
||||
style: textTheme.bodyFaint,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
AnimatedPositioned(
|
||||
duration: const Duration(milliseconds: 350),
|
||||
curve: Curves.easeInOutQuart,
|
||||
left: _isYearly ? widthOfButton + spaceBetweenButtons : 0,
|
||||
child: Container(
|
||||
width: widthOfButton,
|
||||
height: 40,
|
||||
decoration: BoxDecoration(
|
||||
color: getEnteColorScheme(context).backgroundBase,
|
||||
borderRadius: BorderRadius.circular(50),
|
||||
),
|
||||
child: AnimatedSwitcher(
|
||||
duration: const Duration(milliseconds: 350),
|
||||
switchInCurve: Curves.easeInOutExpo,
|
||||
switchOutCurve: Curves.easeInOutExpo,
|
||||
child: Text(
|
||||
key: ValueKey(_isYearly),
|
||||
_isYearly ? "Yearly" : "Monthly",
|
||||
style: textTheme.body,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
setIsYearly(bool isYearly) {
|
||||
setState(() {
|
||||
_isYearly = isYearly;
|
||||
});
|
||||
widget.onToggle(isYearly);
|
||||
}
|
||||
}
|
||||
|
@ -180,3 +180,120 @@ class SubFaqWidget extends StatelessWidget {
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class SubscriptionToggle extends StatefulWidget {
|
||||
final Function(bool) onToggle;
|
||||
const SubscriptionToggle({required this.onToggle, super.key});
|
||||
|
||||
@override
|
||||
State<SubscriptionToggle> createState() => _SubscriptionToggleState();
|
||||
}
|
||||
|
||||
class _SubscriptionToggleState extends State<SubscriptionToggle> {
|
||||
bool _isYearly = true;
|
||||
@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: getEnteColorScheme(context).fillBaseGrey,
|
||||
borderRadius: BorderRadius.circular(50),
|
||||
),
|
||||
padding: const EdgeInsets.symmetric(
|
||||
vertical: borderPadding,
|
||||
horizontal: borderPadding,
|
||||
),
|
||||
width: double.infinity,
|
||||
child: Stack(
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
GestureDetector(
|
||||
onTap: () {
|
||||
setIsYearly(false);
|
||||
},
|
||||
behavior: HitTestBehavior.opaque,
|
||||
child: Container(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
vertical: 8,
|
||||
),
|
||||
width: widthOfButton,
|
||||
child: Center(
|
||||
child: Text(
|
||||
"Monthly",
|
||||
style: textTheme.bodyFaint,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: spaceBetweenButtons),
|
||||
GestureDetector(
|
||||
onTap: () {
|
||||
setIsYearly(true);
|
||||
},
|
||||
behavior: HitTestBehavior.opaque,
|
||||
child: Container(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
vertical: 8,
|
||||
),
|
||||
width: widthOfButton,
|
||||
child: Center(
|
||||
child: Text(
|
||||
"Yearly",
|
||||
style: textTheme.bodyFaint,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
AnimatedPositioned(
|
||||
duration: const Duration(milliseconds: 350),
|
||||
curve: Curves.easeInOutQuart,
|
||||
left: _isYearly ? widthOfButton + spaceBetweenButtons : 0,
|
||||
child: Container(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
vertical: 8,
|
||||
),
|
||||
width: widthOfButton,
|
||||
decoration: BoxDecoration(
|
||||
color: getEnteColorScheme(context).backgroundBase,
|
||||
borderRadius: BorderRadius.circular(50),
|
||||
),
|
||||
child: AnimatedSwitcher(
|
||||
duration: const Duration(milliseconds: 350),
|
||||
switchInCurve: Curves.easeInOutExpo,
|
||||
switchOutCurve: Curves.easeInOutExpo,
|
||||
child: Text(
|
||||
key: ValueKey(_isYearly),
|
||||
_isYearly ? "Yearly" : "Monthly",
|
||||
style: textTheme.body,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
setIsYearly(bool isYearly) {
|
||||
setState(() {
|
||||
_isYearly = isYearly;
|
||||
});
|
||||
widget.onToggle(isYearly);
|
||||
}
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user