feat: improve app theming code and add Material You (#58)

lib/ui/widgets/shared/application_item.dart

@@ -1,10 +1,8 @@
 import 'dart:typed_data';
 import 'package:flutter/material.dart';
 import 'package:flutter_i18n/flutter_i18n.dart';
-import 'package:google_fonts/google_fonts.dart';
-import 'package:revanced_manager/constants.dart';
-import 'package:revanced_manager/theme.dart';
-import 'package:revanced_manager/ui/widgets/shared/patch_text_button.dart';
+import 'package:revanced_manager/ui/widgets/installerView/custom_material_button.dart';
+import 'package:revanced_manager/ui/widgets/shared/custom_card.dart';
 import 'package:expandable/expandable.dart';
 import 'package:timeago/timeago.dart';
 
@@ -33,56 +31,35 @@ class ApplicationItem extends StatelessWidget {
         hasIcon: false,
         animationDuration: Duration(milliseconds: 450),
       ),
-      header: Container(
-        height: 60,
-        decoration: BoxDecoration(
-          borderRadius: BorderRadius.circular(12),
-          color: Theme.of(context).colorScheme.primary,
-        ),
-        padding: const EdgeInsets.symmetric(horizontal: 10.0, vertical: 12.0),
+      header: CustomCard(
         child: Row(
           children: <Widget>[
             SizedBox(
               width: 60,
-              child: Image.memory(
-                icon,
-                height: 39,
-                width: 39,
-              ),
+              child: Image.memory(icon, height: 39, width: 39),
             ),
             const SizedBox(width: 4),
-            SizedBox(
-              width: MediaQuery.of(context).size.width - 250,
-              child: Column(
-                crossAxisAlignment: CrossAxisAlignment.start,
-                children: <Widget>[
-                  Text(
-                    name,
-                    style: GoogleFonts.roboto(
-                      color: Theme.of(context).colorScheme.secondary,
-                      fontWeight: FontWeight.w600,
-                    ),
+            Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: <Widget>[
+                Text(
+                  name,
+                  style: const TextStyle(
+                    fontSize: 16,
+                    fontWeight: FontWeight.w500,
                   ),
-                  Text(
-                    format(patchDate, locale: 'en_short'),
-                    style: kRobotoTextStyle.copyWith(
-                      color: Theme.of(context).colorScheme.tertiary,
-                    ),
-                  ),
-                ],
-              ),
+                ),
+                Text(format(patchDate, locale: 'en_short')),
+              ],
             ),
             const Spacer(),
             Padding(
               padding: const EdgeInsets.symmetric(horizontal: 8.0),
-              child: PatchTextButton(
-                text: isUpdatableApp
-                    ? 'applicationItem.patchButton'
-                    : 'applicationItem.openButton',
+              child: CustomMaterialButton(
+                label: isUpdatableApp
+                    ? I18nText('applicationItem.patchButton')
+                    : I18nText('applicationItem.openButton'),
                 onPressed: onPressed,
-                borderColor: isDark
-                    ? const Color(0xff4D5054)
-                    : const Color.fromRGBO(119, 146, 168, 1),
               ),
             ),
           ],
@@ -96,16 +73,13 @@ class ApplicationItem extends StatelessWidget {
           children: <Widget>[
             I18nText(
               'applicationItem.changelogLabel',
-              child: Text(
+              child: const Text(
                 '',
-                style: kRobotoTextStyle.copyWith(fontWeight: FontWeight.w700),
+                style: TextStyle(fontWeight: FontWeight.w700),
               ),
             ),
             const SizedBox(height: 4),
-            Text(
-              '\u2022 ${changelog.join('\n\u2022 ')}',
-              style: kRobotoTextStyle,
-            ),
+            Text('\u2022 ${changelog.join('\n\u2022 ')}'),
           ],
         ),
       ),

lib/ui/widgets/shared/custom_card.dart

@@ -0,0 +1,32 @@
+import 'package:flutter/material.dart';
+
+class CustomCard extends StatelessWidget {
+  final bool isFilled;
+  final Widget child;
+
+  const CustomCard({
+    Key? key,
+    this.isFilled = true,
+    required this.child,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      decoration: BoxDecoration(
+        borderRadius: BorderRadius.circular(16),
+        color: isFilled
+            ? Theme.of(context).colorScheme.secondaryContainer
+            : Colors.transparent,
+        border: isFilled
+            ? null
+            : Border.all(
+                width: 1,
+                color: Theme.of(context).colorScheme.secondary,
+              ),
+      ),
+      padding: const EdgeInsets.all(20),
+      child: child,
+    );
+  }
+}

lib/ui/widgets/shared/custom_sliver_app_bar.dart

@@ -1,5 +1,4 @@
 import 'package:flutter/material.dart';
-import 'package:revanced_manager/theme.dart';
 
 class CustomSliverAppBar extends StatelessWidget {
   final Widget title;
@@ -21,10 +20,8 @@ class CustomSliverAppBar extends StatelessWidget {
       automaticallyImplyLeading: false,
       backgroundColor: MaterialStateColor.resolveWith(
         (states) => states.contains(MaterialState.scrolledUnder)
-            ? isDark
-                ? Theme.of(context).colorScheme.primary
-                : Theme.of(context).navigationBarTheme.backgroundColor!
-            : Theme.of(context).scaffoldBackgroundColor,
+            ? Theme.of(context).colorScheme.surface
+            : Theme.of(context).canvasColor,
       ),
       flexibleSpace: FlexibleSpaceBar(
         titlePadding: const EdgeInsets.symmetric(

lib/ui/widgets/shared/open_container_wrapper.dart

@@ -21,7 +21,7 @@ class OpenContainerWrapper extends StatelessWidget {
       openColor: Theme.of(context).colorScheme.primary,
       closedColor: Colors.transparent,
       closedShape: RoundedRectangleBorder(
-        borderRadius: BorderRadius.circular(12),
+        borderRadius: BorderRadius.circular(16),
       ),
     );
   }

lib/ui/widgets/shared/patch_text_button.dart

@@ -1,51 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:flutter_i18n/flutter_i18n.dart';
-import 'package:revanced_manager/constants.dart';
-import 'package:revanced_manager/theme.dart';
-
-class PatchTextButton extends StatelessWidget {
-  final String text;
-  final Function() onPressed;
-  final Color borderColor;
-  final Color backgroundColor;
-
-  const PatchTextButton({
-    Key? key,
-    required this.text,
-    required this.onPressed,
-    this.borderColor = const Color(0xff7792BA),
-    this.backgroundColor = Colors.transparent,
-  }) : super(key: key);
-
-  @override
-  Widget build(BuildContext context) {
-    return TextButton(
-      onPressed: onPressed,
-      style: Theme.of(context).textButtonTheme.style?.copyWith(
-          backgroundColor: MaterialStateProperty.all<Color?>(backgroundColor),
-          side: MaterialStateProperty.all<BorderSide>(
-            BorderSide(
-              color: borderColor,
-              width: 1,
-            ),
-          ),
-          padding: MaterialStateProperty.all<EdgeInsetsGeometry>(
-            const EdgeInsets.symmetric(
-              horizontal: 16,
-              vertical: 4,
-            ),
-          )),
-      child: I18nText(text,
-          child: Text(
-            '',
-            style: kInterTextStyle.copyWith(
-              color: backgroundColor == Colors.transparent
-                  ? const Color.fromRGBO(119, 146, 186, 1)
-                  : isDark
-                      ? Colors.black
-                      : Colors.white,
-            ),
-          )),
-    );
-  }
-}

lib/ui/widgets/shared/search_bar.dart

@@ -1,23 +1,16 @@
 import 'package:flutter/material.dart';
-import 'package:google_fonts/google_fonts.dart';
 
 class SearchBar extends StatefulWidget {
   final String? hintText;
-  final Color? fillColor;
   final bool showSelectIcon;
   final Function(bool)? onSelectAll;
-  final Color? backgroundColor;
-  final Color? hintTextColor;
 
   const SearchBar({
     Key? key,
     required this.hintText,
-    required this.fillColor,
-    required this.onQueryChanged,
-    this.onSelectAll,
     this.showSelectIcon = false,
-    this.backgroundColor = const Color(0xff1B222B),
-    this.hintTextColor = Colors.white,
+    this.onSelectAll,
+    required this.onQueryChanged,
   }) : super(key: key);
 
   final Function(String) onQueryChanged;
@@ -34,14 +27,8 @@ class _SearchBarState extends State<SearchBar> {
   Widget build(BuildContext context) {
     return Container(
       decoration: BoxDecoration(
-        borderRadius: BorderRadius.circular(12),
-        color: widget.backgroundColor,
-        border: Border.all(
-          color: widget.backgroundColor != null
-              ? widget.backgroundColor!
-              : Colors.white,
-          width: 1,
-        ),
+        borderRadius: BorderRadius.circular(16),
+        color: Theme.of(context).colorScheme.secondaryContainer,
       ),
       child: Row(
         children: <Widget>[
@@ -49,25 +36,18 @@ class _SearchBarState extends State<SearchBar> {
             child: TextFormField(
               onChanged: widget.onQueryChanged,
               controller: _textController,
-              cursorColor: Theme.of(context).textTheme.headline5!.color,
               decoration: InputDecoration(
-                fillColor: widget.fillColor,
                 filled: true,
+                fillColor: Theme.of(context).colorScheme.secondaryContainer,
                 contentPadding: const EdgeInsets.all(12.0),
                 hintText: widget.hintText,
-                hintStyle: GoogleFonts.poppins(
-                  color: widget.hintTextColor,
-                  fontWeight: FontWeight.w400,
-                ),
                 prefixIcon: Icon(
                   Icons.search,
-                  size: 24.0,
                   color: Theme.of(context).iconTheme.color,
                 ),
                 suffixIcon: _textController.text.isNotEmpty
                     ? IconButton(
                         icon: const Icon(Icons.clear),
-                        iconSize: 24.0,
                         onPressed: () {
                           _textController.clear();
                           widget.onQueryChanged('');
@@ -78,7 +58,6 @@ class _SearchBarState extends State<SearchBar> {
                             icon: _toggleSelectAll
                                 ? const Icon(Icons.deselect)
                                 : const Icon(Icons.select_all),
-                            iconSize: 24.0,
                             onPressed: widget.onSelectAll != null
                                 ? () {
                                     setState(() {
@@ -94,11 +73,6 @@ class _SearchBarState extends State<SearchBar> {
                   borderSide: BorderSide.none,
                 ),
               ),
-              style: GoogleFonts.poppins(
-                color: Theme.of(context).textTheme.headline5!.color,
-                fontWeight: FontWeight.w400,
-                fontSize: 16,
-              ),
             ),
           ),
         ],