feat: Patches Selector Screen.

lib/ui/widgets/patch_item.dart

@@ -1,11 +1,11 @@
 import 'package:flutter/material.dart';
 import 'package:google_fonts/google_fonts.dart';
 
-class PatchItem extends StatelessWidget {
+class PatchItem extends StatefulWidget {
   final String name;
   final String description;
   final String version;
-  final bool isSelected;
+  bool isSelected;
 
   PatchItem({
     Key? key,
@@ -15,11 +15,16 @@ class PatchItem extends StatelessWidget {
     required this.isSelected,
   }) : super(key: key);
 
+  @override
+  State<PatchItem> createState() => _PatchItemState();
+}
+
+class _PatchItemState extends State<PatchItem> {
   @override
   Widget build(BuildContext context) {
     return Container(
       decoration: BoxDecoration(
-        color: const Color(0xFF1A1A1A),
+        color: const Color(0xff1B222B),
         borderRadius: BorderRadius.circular(10),
       ),
       padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 12),
@@ -37,19 +42,19 @@ class PatchItem extends StatelessWidget {
                       crossAxisAlignment: CrossAxisAlignment.end,
                       children: [
                         Text(
-                          name,
+                          widget.name,
                           style: GoogleFonts.inter(
                             fontSize: 16,
                             fontWeight: FontWeight.w600,
                           ),
                         ),
                         const SizedBox(width: 4),
-                        Text(version)
+                        Text(widget.version)
                       ],
                     ),
                     const SizedBox(height: 4),
                     Text(
-                      description,
+                      widget.description,
                       softWrap: true,
                       maxLines: 3,
                       overflow: TextOverflow.visible,
@@ -63,8 +68,13 @@ class PatchItem extends StatelessWidget {
               Transform.scale(
                 scale: 1.2,
                 child: Checkbox(
-                  value: isSelected,
-                  onChanged: (newValue) {},
+                  value: widget.isSelected,
+                  activeColor: Colors.blueGrey[500],
+                  onChanged: (newValue) {
+                    setState(() {
+                      widget.isSelected = newValue!;
+                    });
+                  },
                 ),
               )
             ],

lib/ui/widgets/search_bar.dart

@@ -2,7 +2,14 @@ import 'package:flutter/material.dart';
 import 'package:google_fonts/google_fonts.dart';
 
 class SearchBar extends StatefulWidget {
-  const SearchBar({
+  String? hintText = "Search";
+  Color? backgroundColor;
+  Color? hintTextColor;
+
+   SearchBar({
+    required this.hintText,
+    this.backgroundColor = const Color(0xff1B222B),
+    this.hintTextColor = Colors.white,
     Key? key,
     required this.onQueryChanged,
   }) : super(key: key);
@@ -19,9 +26,9 @@ class _SearchBarState extends State<SearchBar> {
     return Container(
       decoration: BoxDecoration(
         borderRadius: BorderRadius.circular(12),
-        color: const Color(0xff1B222B),
+        color: widget.backgroundColor,
         border: Border.all(
-          color: const Color(0xff1B222B),
+          color: widget.backgroundColor != null ? widget.backgroundColor! : Colors.white,
           width: 1,
         ),
       ),
@@ -34,9 +41,9 @@ class _SearchBarState extends State<SearchBar> {
                 fillColor: Colors.blueGrey[700],
                 filled: true,
                 contentPadding: const EdgeInsets.all(12.0),
-                hintText: 'Search applications',
+                hintText: widget.hintText,
                 hintStyle: GoogleFonts.poppins(
-                  color: Colors.white,
+                  color: widget.hintTextColor,
                   fontWeight: FontWeight.w400,
                 ),
                 prefixIcon: const Icon(