From 10cb54ddc11c8e131370a0bfa6e3d0c0c5efdcb3 Mon Sep 17 00:00:00 2001
From: ashilkn <ashilkn99@gmail.com>
Date: Sat, 13 Apr 2024 19:43:19 +0530
Subject: [PATCH] [mob] Use SegmentedButton instead of broken(UI) toggle in
 stripe subscription page

---
 .../ui/payment/stripe_subscription_page.dart  | 46 +++++++++----------
 1 file changed, 21 insertions(+), 25 deletions(-)

diff --git a/mobile/lib/ui/payment/stripe_subscription_page.dart b/mobile/lib/ui/payment/stripe_subscription_page.dart
index 4a04d49d1a..0c63c71223 100644
--- a/mobile/lib/ui/payment/stripe_subscription_page.dart
+++ b/mobile/lib/ui/payment/stripe_subscription_page.dart
@@ -537,21 +537,6 @@ class _StripeSubscriptionPageState extends State<StripeSubscriptionPage> {
   }
 
   Widget _showSubscriptionToggle() {
-    Widget planText(String title, bool reduceOpacity) {
-      return Padding(
-        padding: const EdgeInsets.only(left: 4, right: 4),
-        child: Text(
-          title,
-          style: TextStyle(
-            color: Theme.of(context)
-                .colorScheme
-                .onSurface
-                .withOpacity(reduceOpacity ? 0.5 : 1.0),
-          ),
-        ),
-      );
-    }
-
     return Container(
       padding: const EdgeInsets.only(left: 8, right: 8, top: 2, bottom: 2),
       margin: const EdgeInsets.only(bottom: 6),
@@ -561,18 +546,29 @@ class _StripeSubscriptionPageState extends State<StripeSubscriptionPage> {
             child: Row(
               mainAxisAlignment: MainAxisAlignment.center,
               children: [
-                planText(S.of(context).monthly, _showYearlyPlan),
-                Switch(
-                  value: _showYearlyPlan,
-                  activeColor: Colors.white,
-                  inactiveThumbColor: Colors.white,
-                  activeTrackColor: getEnteColorScheme(context).strokeMuted,
-                  onChanged: (value) async {
-                    _showYearlyPlan = value;
-                    await _filterStripeForUI();
+                SegmentedButton(
+                  style: SegmentedButton.styleFrom(
+                    selectedBackgroundColor:
+                        getEnteColorScheme(context).fillMuted,
+                    selectedForegroundColor:
+                        getEnteColorScheme(context).textBase,
+                  ),
+                  segments: <ButtonSegment<bool>>[
+                    ButtonSegment(
+                      label: Text(S.of(context).monthly),
+                      value: false,
+                    ),
+                    ButtonSegment(
+                      label: Text(S.of(context).yearly),
+                      value: true,
+                    ),
+                  ],
+                  selected: {_showYearlyPlan},
+                  onSelectionChanged: (p0) {
+                    _showYearlyPlan = p0.first;
+                    _filterStripeForUI();
                   },
                 ),
-                planText(S.of(context).yearly, !_showYearlyPlan),
               ],
             ),
           ),