💄 Optimize category selector

lib/screens/explore.dart

@@ -39,6 +39,8 @@ class ExploreScreen extends StatefulWidget {
   State<ExploreScreen> createState() => _ExploreScreenState();
 }
 
+// You know what? I'm not going to make this a global variable.
+// Cuz the global key make the selected category not update to child widget when the category is changed.
 SnPostCategory? _selectedCategory;
 
 class _ExploreScreenState extends State<ExploreScreen> with SingleTickerProviderStateMixin {
@@ -516,28 +518,41 @@ class _PostCategoryPickerPopup extends StatelessWidget {
           },
         ),
         const Divider(height: 1),
-        Wrap(
+        GridView.count(
-          spacing: 4,
+          crossAxisCount: 4,
-          runSpacing: 4,
+          shrinkWrap: true,
+          physics: const NeverScrollableScrollPhysics(),
+          childAspectRatio: 1,
           children: categories
               .map(
-                (ele) => ChoiceChip(
+                (ele) => InkWell(
-                  avatar: Icon(kCategoryIcons[ele.alias] ?? Symbols.question_mark),
+                  onTap: () {
-                  label: Text(
+                    _selectedCategory = ele;
+                    Navigator.pop(context, ele);
+                  },
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.center,
+                    mainAxisAlignment: MainAxisAlignment.center,
+                    mainAxisSize: MainAxisSize.min,
+                    children: [
+                      Icon(
+                        kCategoryIcons[ele.alias] ?? Symbols.question_mark,
+                        color: selected == ele ? Theme.of(context).colorScheme.primary : null,
+                      ),
+                      const Gap(4),
+                      Text(
                         'postCategory${ele.alias.capitalize()}'.trExists()
                             ? 'postCategory${ele.alias.capitalize()}'.tr()
                             : ele.name,
+                      )
+                          .textStyle(Theme.of(context).textTheme.titleMedium!)
+                          .textColor(selected == ele ? Theme.of(context).colorScheme.primary : null),
+                    ],
                   ),
-                  selected: ele == selected,
-                  onSelected: (value) {
-                    if (value) {
-                      Navigator.pop(context, ele);
-                    }
-                  },
                 ),
               )
               .toList(),
-        ).padding(horizontal: 12),
+        ),
       ],
     );
   }