SelectButton

lib/helpers/extension_helper.dart

@@ -15,3 +15,8 @@ extension BetterWhen<T> on AsyncValue<T> {
         skipLoadingOnRefresh: false,
       );
 }
+
+extension Capitalize on String {
+  String toCapitalized() =>
+      length > 0 ? "${this[0].toUpperCase()}${substring(1).toLowerCase()}" : "";
+}

lib/models/search_type.dart

@@ -0,0 +1,8 @@
+enum SearchType {
+  any,
+  songs,
+  videos,
+  artists,
+  albums,
+  playlists,
+}

lib/screens/tabs/search.dart

@@ -1,8 +1,10 @@
+import 'package:canal/models/search_type.dart';
+import 'package:canal/widgets/select_button.dart';
 import 'package:flutter/material.dart';
 import 'package:canal/models/tab.dart';
-import 'package:yaru/yaru.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
 
-class SearchTab extends StatelessWidget implements TabPage {
+class SearchTab extends HookWidget implements TabPage {
   const SearchTab({super.key});
 
   @override
@@ -13,15 +15,11 @@ class SearchTab extends StatelessWidget implements TabPage {
 
   @override
   Widget build(BuildContext context) => ListView(
-        padding: EdgeInsets.symmetric(horizontal: 8, vertical: 4),
+        padding: EdgeInsets.symmetric(horizontal: 16, vertical: 4),
         children: [
-          SegmentedButton(
+          SelectButton(
-            segments: [
+            values: SearchType.values,
-              ButtonSegment(value: 0, label: Text("Foo")),
+            defaultValue: SearchType.any,
-              ButtonSegment(value: 1, label: Text("Bar")),
-              ButtonSegment(value: 2, label: Text("Foobar"))
-            ],
-            selected: {0},
           )
         ],
       );

lib/widgets/select_button.dart

@@ -0,0 +1,32 @@
+import 'package:canal/helpers/extension_helper.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+
+class SelectButton<T extends Enum> extends HookWidget {
+  final T defaultValue;
+  final List<T> values;
+  const SelectButton({
+    required this.defaultValue,
+    required this.values,
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final selected = useState(defaultValue);
+    final oldValue = useState(<T>{});
+    return SegmentedButton(
+      segments: values
+          .map((value) => ButtonSegment(
+                value: value,
+                label: Text(value.name.toCapitalized()),
+              ))
+          .toList(),
+      onSelectionChanged: (newValue) {
+        selected.value = newValue.difference(oldValue.value).first;
+        oldValue.value = newValue;
+      },
+      selected: {selected.value},
+    );
+  }
+}