feat(style): use native switch & chip (#732)

* chore: remove useless themedata

* feat(style): new switch

* feat(style): use native chip components

* chore: remove unused import

* feat(accessibility): set tooltip

* chore: remove unneeded themedata

* chore: fix theme

* feat(i18n): add 3 new strings

* feat(style): correct material 3 theme on nondynamic

assets/i18n/en_US.json

@@ -79,8 +79,11 @@
         "searchBarHint": "Search patches",
         "doneButton": "Done",
         "recommended": "Recommended",
+        "recommendedTooltip": "Select all recommended patches",
         "all": "All",
+        "allTooltip": "Select all patches",
         "none": "None",
+        "noneTooltip": "Deselect all patches",
         "loadPatchesSelection": "Load patches selection",
         "noSavedPatches": "No saved patches for the selected app.\nPress Done to save current selection.",
         "noPatchesFound": "No patches found for the selected app",

lib/theme.dart

@@ -12,7 +12,7 @@ var lightCustomTheme = ThemeData(
   navigationBarTheme: NavigationBarThemeData(
     labelTextStyle: MaterialStateProperty.all(
       TextStyle(
-        color: lightCustomColorScheme.secondary,
+        color: lightCustomColorScheme.onSurface,
         fontWeight: FontWeight.w500,
       ),
     ),
@@ -33,7 +33,7 @@ var darkCustomTheme = ThemeData(
   navigationBarTheme: NavigationBarThemeData(
     labelTextStyle: MaterialStateProperty.all(
       TextStyle(
-        color: darkCustomColorScheme.secondary,
+        color: darkCustomColorScheme.onSurface,
         fontWeight: FontWeight.w500,
       ),
     ),
@@ -41,50 +41,4 @@ var darkCustomTheme = ThemeData(
   canvasColor: const Color(0xff1B1A1D),
   scaffoldBackgroundColor: const Color(0xff1B1A1D),
   textTheme: GoogleFonts.robotoTextTheme(ThemeData.dark().textTheme),
-  switchTheme: SwitchThemeData(
-    thumbColor:
-        MaterialStateProperty.resolveWith<Color?>((Set<MaterialState> states) {
-      if (states.contains(MaterialState.disabled)) {
-        return null;
-      }
-      if (states.contains(MaterialState.selected)) {
-        return const Color(0xffA5CAFF);
-      }
-      return null;
-    }),
-    trackColor:
-        MaterialStateProperty.resolveWith<Color?>((Set<MaterialState> states) {
-      if (states.contains(MaterialState.disabled)) {
-        return null;
-      }
-      if (states.contains(MaterialState.selected)) {
-        return const Color(0xffA5CAFF);
-      }
-      return null;
-    }),
-  ),
-  radioTheme: RadioThemeData(
-    fillColor:
-        MaterialStateProperty.resolveWith<Color?>((Set<MaterialState> states) {
-      if (states.contains(MaterialState.disabled)) {
-        return null;
-      }
-      if (states.contains(MaterialState.selected)) {
-        return const Color(0xffA5CAFF);
-      }
-      return null;
-    }),
-  ),
-  checkboxTheme: CheckboxThemeData(
-    fillColor:
-        MaterialStateProperty.resolveWith<Color?>((Set<MaterialState> states) {
-      if (states.contains(MaterialState.disabled)) {
-        return null;
-      }
-      if (states.contains(MaterialState.selected)) {
-        return const Color(0xffA5CAFF);
-      }
-      return null;
-    }),
-  ),
 );

lib/ui/theme/dynamic_theme_builder.dart

@@ -23,139 +23,29 @@ class DynamicThemeBuilder extends StatelessWidget {
       builder: (lightColorScheme, darkColorScheme) {
         final ThemeData lightDynamicTheme = ThemeData(
           useMaterial3: true,
-          canvasColor: lightColorScheme?.surface,
           navigationBarTheme: NavigationBarThemeData(
-            backgroundColor: lightColorScheme?.surface,
-            indicatorColor: lightColorScheme?.secondaryContainer,
             labelTextStyle: MaterialStateProperty.all(
               GoogleFonts.roboto(
                 color: lightColorScheme?.onSurface,
                 fontWeight: FontWeight.w500,
               ),
             ),
-            iconTheme: MaterialStateProperty.all(
-              IconThemeData(
-                color: lightColorScheme?.onSecondaryContainer,
-              ),
-            ),
           ),
-          scaffoldBackgroundColor: lightColorScheme?.surface,
           colorScheme: lightColorScheme?.harmonized(),
           textTheme: GoogleFonts.robotoTextTheme(ThemeData.light().textTheme),
-          switchTheme: SwitchThemeData(
-            thumbColor: MaterialStateProperty.resolveWith<Color?>(
-                (Set<MaterialState> states) {
-              if (states.contains(MaterialState.disabled)) {
-                return null;
-              }
-              if (states.contains(MaterialState.selected)) {
-                return lightColorScheme?.primary;
-              }
-              return null;
-            }),
-            trackColor: MaterialStateProperty.resolveWith<Color?>(
-                (Set<MaterialState> states) {
-              if (states.contains(MaterialState.disabled)) {
-                return null;
-              }
-              if (states.contains(MaterialState.selected)) {
-                return lightColorScheme?.primary;
-              }
-              return null;
-            }),
-          ),
-          radioTheme: RadioThemeData(
-            fillColor: MaterialStateProperty.resolveWith<Color?>(
-                (Set<MaterialState> states) {
-              if (states.contains(MaterialState.disabled)) {
-                return null;
-              }
-              if (states.contains(MaterialState.selected)) {
-                return lightColorScheme?.primary;
-              }
-              return null;
-            }),
-          ),
-          checkboxTheme: CheckboxThemeData(
-            fillColor: MaterialStateProperty.resolveWith<Color?>(
-                (Set<MaterialState> states) {
-              if (states.contains(MaterialState.disabled)) {
-                return null;
-              }
-              if (states.contains(MaterialState.selected)) {
-                return lightColorScheme?.primary;
-              }
-              return null;
-            }),
-          ),
         );
         final ThemeData darkDynamicTheme = ThemeData(
           useMaterial3: true,
-          canvasColor: darkColorScheme?.surface,
           navigationBarTheme: NavigationBarThemeData(
-            backgroundColor: darkColorScheme?.surface,
-            indicatorColor: darkColorScheme?.secondaryContainer,
             labelTextStyle: MaterialStateProperty.all(
               GoogleFonts.roboto(
                 color: darkColorScheme?.onSurface,
                 fontWeight: FontWeight.w500,
               ),
             ),
-            iconTheme: MaterialStateProperty.all(
-              IconThemeData(
-                color: darkColorScheme?.onSecondaryContainer,
-              ),
-            ),
           ),
-          scaffoldBackgroundColor: darkColorScheme?.surface,
           colorScheme: darkColorScheme?.harmonized(),
           textTheme: GoogleFonts.robotoTextTheme(ThemeData.dark().textTheme),
-          switchTheme: SwitchThemeData(
-            thumbColor: MaterialStateProperty.resolveWith<Color?>(
-                (Set<MaterialState> states) {
-              if (states.contains(MaterialState.disabled)) {
-                return null;
-              }
-              if (states.contains(MaterialState.selected)) {
-                return darkColorScheme?.primary;
-              }
-              return null;
-            }),
-            trackColor: MaterialStateProperty.resolveWith<Color?>(
-                (Set<MaterialState> states) {
-              if (states.contains(MaterialState.disabled)) {
-                return null;
-              }
-              if (states.contains(MaterialState.selected)) {
-                return darkColorScheme?.primary;
-              }
-              return null;
-            }),
-          ),
-          radioTheme: RadioThemeData(
-            fillColor: MaterialStateProperty.resolveWith<Color?>(
-                (Set<MaterialState> states) {
-              if (states.contains(MaterialState.disabled)) {
-                return null;
-              }
-              if (states.contains(MaterialState.selected)) {
-                return darkColorScheme?.primary;
-              }
-              return null;
-            }),
-          ),
-          checkboxTheme: CheckboxThemeData(
-            fillColor: MaterialStateProperty.resolveWith<Color?>(
-                (Set<MaterialState> states) {
-              if (states.contains(MaterialState.disabled)) {
-                return null;
-              }
-              if (states.contains(MaterialState.selected)) {
-                return darkColorScheme?.primary;
-              }
-              return null;
-            }),
-          ),
         );
         return DynamicTheme(
           themeCollection: ThemeCollection(

lib/ui/views/home/home_view.dart

@@ -7,7 +7,6 @@ import 'package:revanced_manager/ui/views/home/home_viewmodel.dart';
 import 'package:revanced_manager/ui/widgets/homeView/available_updates_card.dart';
 import 'package:revanced_manager/ui/widgets/homeView/installed_apps_card.dart';
 import 'package:revanced_manager/ui/widgets/homeView/latest_commit_card.dart';
-import 'package:revanced_manager/ui/widgets/shared/custom_chip.dart';
 import 'package:revanced_manager/ui/widgets/shared/custom_sliver_app_bar.dart';
 import 'package:stacked/stacked.dart';
 
@@ -22,8 +21,6 @@ class HomeView extends StatelessWidget {
       viewModelBuilder: () => locator<HomeViewModel>(),
       builder: (context, model, child) => Scaffold(
         body: RefreshIndicator(
-          color: Theme.of(context).colorScheme.secondary,
-          backgroundColor: Theme.of(context).colorScheme.secondaryContainer,
           onRefresh: () => model.forceRefresh(context),
           child: CustomScrollView(
             slivers: <Widget>[
@@ -67,21 +64,47 @@ class HomeView extends StatelessWidget {
                       const SizedBox(height: 8),
                       Row(
                         children: <Widget>[
-                          CustomChip(
+                          ActionChip(
+                            avatar: const Icon(Icons.grid_view),
                             label: I18nText('homeView.installed'),
-                            isSelected: !model.showUpdatableApps,
+                            side: BorderSide(
-                            onSelected: (value) {
+                              color: model.showUpdatableApps
+                                  ? Theme.of(context).colorScheme.outline
+                                  : Theme.of(context)
+                                      .colorScheme
+                                      .secondaryContainer,
+                              width: model.showUpdatableApps ? 1 : 1,
+                            ),
+                            backgroundColor: model.showUpdatableApps
+                                ? Theme.of(context).colorScheme.background
+                                : Theme.of(context)
+                                    .colorScheme
+                                    .secondaryContainer,
+                            onPressed: () {
                               model.toggleUpdatableApps(false);
                             },
                           ),
                           const SizedBox(width: 10),
-                          CustomChip(
+                          ActionChip(
+                            avatar: const Icon(Icons.update),
                             label: I18nText('homeView.updatesAvailable'),
-                            isSelected: model.showUpdatableApps,
+                            side: BorderSide(
-                            onSelected: (value) {
+                              color: !model.showUpdatableApps
+                                  ? Theme.of(context).colorScheme.outline
+                                  : Theme.of(context)
+                                      .colorScheme
+                                      .secondaryContainer,
+                              width: !model.showUpdatableApps ? 1 : 1,
+                            ),
+                            backgroundColor: !model.showUpdatableApps
+                                ? Theme.of(context).colorScheme.background
+                                : Theme.of(context)
+                                    .colorScheme
+                                    .secondaryContainer,
+                            onPressed: () {
                               model.toggleUpdatableApps(true);
                             },
-                          )
+                          ),
                         ],
                       ),
                       const SizedBox(height: 14),

lib/ui/views/navigation/navigation_view.dart

@@ -42,7 +42,6 @@ class NavigationView extends StatelessWidget {
                 context,
                 'navigationView.dashboardTab',
               ),
-              tooltip: '',
             ),
             NavigationDestination(
               icon: model.isIndexSelected(1)
@@ -52,7 +51,6 @@ class NavigationView extends StatelessWidget {
                 context,
                 'navigationView.patcherTab',
               ),
-              tooltip: '',
             ),
             NavigationDestination(
               icon: model.isIndexSelected(2)
@@ -62,7 +60,6 @@ class NavigationView extends StatelessWidget {
                 context,
                 'navigationView.settingsTab',
               ),
-              tooltip: '',
             ),
           ],
         ),

lib/ui/views/patches_selector/patches_selector_view.dart

@@ -2,7 +2,6 @@ import 'package:flutter/material.dart';
 import 'package:flutter_i18n/flutter_i18n.dart';
 import 'package:revanced_manager/ui/views/patches_selector/patches_selector_viewmodel.dart';
 import 'package:revanced_manager/ui/widgets/patchesSelectorView/patch_item.dart';
-import 'package:revanced_manager/ui/widgets/shared/custom_chip.dart';
 import 'package:revanced_manager/ui/widgets/shared/custom_popup_menu.dart';
 import 'package:revanced_manager/ui/widgets/shared/search_bar.dart';
 import 'package:stacked/stacked.dart';
@@ -135,27 +134,36 @@ class _PatchesSelectorViewState extends State<PatchesSelectorView> {
                         children: [
                           Row(
                             children: [
-                              CustomChip(
+                              ActionChip(
-                                label:
+                                label: I18nText('patchesSelectorView.recommended'),
-                                    I18nText('patchesSelectorView.recommended'),
+                                tooltip: FlutterI18n.translate(
-                                onSelected: (value) {
+                                  context,
+                                  'patchesSelectorView.recommendedTooltip',
+                                ),
+                                onPressed: () {
                                   model.selectRecommendedPatches();
                                 },
                               ),
                               const SizedBox(width: 8),
-                              CustomChip(
+                              ActionChip(
                                 label: I18nText('patchesSelectorView.all'),
-                                onSelected: (value) {
+                                tooltip: FlutterI18n.translate(
-                                  if (value) {
+                                  context,
-                                    model.selectAllPatcherWarning(context);
+                                  'patchesSelectorView.allTooltip',
-                                  }
+                                ),
+                                onPressed: () {
+                                  model.selectAllPatcherWarning(context);
                                   model.selectAllPatches(true);
                                 },
                               ),
                               const SizedBox(width: 8),
-                              CustomChip(
+                              ActionChip(
                                 label: I18nText('patchesSelectorView.none'),
-                                onSelected: (value) {
+                                tooltip: FlutterI18n.translate(
+                                  context,
+                                  'patchesSelectorView.noneTooltip',
+                                ),
+                                onPressed: () {
                                   model.clearPatches();
                                 },
                               ),

lib/ui/views/settings/settingsFragment/settings_update_theme.dart

@@ -7,7 +7,6 @@ import 'package:flutter_i18n/widgets/I18nText.dart';
 import 'package:revanced_manager/app/app.locator.dart';
 import 'package:revanced_manager/services/manager_api.dart';
 import 'package:revanced_manager/ui/views/settings/settings_viewmodel.dart';
-import 'package:revanced_manager/ui/widgets/settingsView/custom_switch_tile.dart';
 import 'package:revanced_manager/ui/widgets/settingsView/settings_section.dart';
 import 'package:stacked/stacked.dart';
 
@@ -64,8 +63,8 @@ class SUpdateThemeUI extends StatelessWidget {
     return SettingsSection(
       title: 'settingsView.appearanceSectionTitle',
       children: <Widget>[
-        CustomSwitchTile(
+        SwitchListTile(
-          padding: const EdgeInsets.symmetric(horizontal: 20.0),
+          contentPadding: const EdgeInsets.symmetric(horizontal: 20.0),
           title: I18nText(
             'settingsView.darkThemeLabel',
             child: const Text(
@@ -78,7 +77,7 @@ class SUpdateThemeUI extends StatelessWidget {
           ),
           subtitle: I18nText('settingsView.darkThemeHint'),
           value: SUpdateTheme().getDarkThemeStatus(),
-          onTap: (value) => SUpdateTheme().setUseDarkTheme(
+          onChanged: (value) => SUpdateTheme().setUseDarkTheme(
             context,
             value,
           ),
@@ -88,8 +87,8 @@ class SUpdateThemeUI extends StatelessWidget {
           builder: (context, snapshot) => Visibility(
             visible:
                 snapshot.hasData && snapshot.data! >= ANDROID_12_SDK_VERSION,
-            child: CustomSwitchTile(
+            child: SwitchListTile(
-              padding: const EdgeInsets.symmetric(horizontal: 20.0),
+              contentPadding: const EdgeInsets.symmetric(horizontal: 20.0),
               title: I18nText(
                 'settingsView.dynamicThemeLabel',
                 child: const Text(
@@ -102,11 +101,12 @@ class SUpdateThemeUI extends StatelessWidget {
               ),
               subtitle: I18nText('settingsView.dynamicThemeHint'),
               value: _settingViewModel.sUpdateTheme.getDynamicThemeStatus(),
-              onTap: (value) =>
+              onChanged: (value) => {
-                  _settingViewModel.sUpdateTheme.setUseDynamicTheme(
+                _settingViewModel.sUpdateTheme.setUseDynamicTheme(
-                context,
+                  context,
-                value,
+                  value,
-              ),
+                ),
+              },
             ),
           ),
         ),

lib/ui/widgets/settingsView/settings_experimental_patches.dart

@@ -1,7 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_i18n/widgets/I18nText.dart';
 import 'package:revanced_manager/ui/views/settings/settings_viewmodel.dart';
-import 'package:revanced_manager/ui/widgets/settingsView/custom_switch_tile.dart';
 
 class SExperimentalPatches extends StatefulWidget {
   const SExperimentalPatches({super.key});
@@ -15,8 +14,8 @@ final _settingsViewModel = SettingsViewModel();
 class _SExperimentalPatchesState extends State<SExperimentalPatches> {
   @override
   Widget build(BuildContext context) {
-    return CustomSwitchTile(
+    return SwitchListTile(
-      padding: const EdgeInsets.symmetric(horizontal: 20.0),
+      contentPadding: const EdgeInsets.symmetric(horizontal: 20.0),
       title: I18nText(
         'settingsView.experimentalPatchesLabel',
         child: const Text(
@@ -29,7 +28,7 @@ class _SExperimentalPatchesState extends State<SExperimentalPatches> {
       ),
       subtitle: I18nText('settingsView.experimentalPatchesHint'),
       value: _settingsViewModel.areExperimentalPatchesEnabled(),
-      onTap: (value) {
+      onChanged: (value) {
         setState(() {
           _settingsViewModel.useExperimentalPatches(value);
         });

lib/ui/widgets/settingsView/settings_experimental_universal_patches.dart

@@ -1,7 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_i18n/widgets/I18nText.dart';
 import 'package:revanced_manager/ui/views/settings/settings_viewmodel.dart';
-import 'package:revanced_manager/ui/widgets/settingsView/custom_switch_tile.dart';
 
 class SExperimentalUniversalPatches extends StatefulWidget {
   const SExperimentalUniversalPatches({super.key});
@@ -17,8 +16,8 @@ class _SExperimentalUniversalPatchesState
     extends State<SExperimentalUniversalPatches> {
   @override
   Widget build(BuildContext context) {
-    return CustomSwitchTile(
+    return SwitchListTile(
-      padding: const EdgeInsets.symmetric(horizontal: 20.0),
+      contentPadding: const EdgeInsets.symmetric(horizontal: 20.0),
       title: I18nText(
         'settingsView.experimentalUniversalPatchesLabel',
         child: const Text(
@@ -31,7 +30,7 @@ class _SExperimentalUniversalPatchesState
       ),
       subtitle: I18nText('settingsView.experimentalUniversalPatchesHint'),
       value: _settingsViewModel.areUniversalPatchesEnabled(),
-      onTap: (value) {
+      onChanged: (value) {
         setState(() {
           _settingsViewModel.showUniversalPatches(value);
         });