[mob][photos] Move SubscriptionToggle widget to subscription_common_widgets.dart

This commit is contained in:
ashilkn 2024-07-27 12:16:47 +05:30
parent bebaa76085
commit 41f59ec9ca
2 changed files with 117 additions and 115 deletions

View File

@ -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);
}
}

View File

@ -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);
}
}