Make selector handle more generic and improve semantic support.

amugofjava · Jul 9, 2024 · 7af21fa · 7af21fa
1 parent e068e59
commit 7af21fa
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 36 deletions.
diff --git a/lib/ui/podcast/now_playing_options.dart b/lib/ui/podcast/now_playing_options.dart
@@ -86,34 +86,28 @@ class _NowPlayingOptionsSelectorState extends State<NowPlayingOptionsSelector> {
                     mainAxisAlignment: MainAxisAlignment.start,
                     crossAxisAlignment: CrossAxisAlignment.center,
                     children: <Widget>[
-                      if (mediaQueryData.accessibleNavigation)
-                        Semantics(
-                          liveRegion: true,
-                          label: optionsSliderOpen()
-                              ? L.of(context)!.semantic_playing_options_collapse_label
-                              : L.of(context)!.semantic_playing_options_expand_label,
-                          child: GestureDetector(
-                            onTap: () {
-                              if (draggableController != null) {
-                                if (draggableController!.size < 1.0) {
-                                  draggableController!.animateTo(
-                                    1.0,
-                                    duration: const Duration(milliseconds: 150),
-                                    curve: Curves.easeInOut,
-                                  );
-                                } else {
-                                  draggableController!.animateTo(
-                                    0.0,
-                                    duration: const Duration(milliseconds: 150),
-                                    curve: Curves.easeInOut,
-                                  );
-                                }
-                              }
-                            },
-                            child: const SliderHandle(),
-                          ),
-                        ),
-                      if (!mediaQueryData.accessibleNavigation) const SliderHandle(),
+                      SliderHandle(
+                        label: optionsSliderOpen()
+                            ? L.of(context)!.semantic_playing_options_collapse_label
+                            : L.of(context)!.semantic_playing_options_expand_label,
+                        onTap: () {
+                          if (draggableController != null) {
+                            if (draggableController!.size < 1.0) {
+                              draggableController!.animateTo(
+                                1.0,
+                                duration: const Duration(milliseconds: 150),
+                                curve: Curves.easeInOut,
+                              );
+                            } else {
+                              draggableController!.animateTo(
+                                0.0,
+                                duration: const Duration(milliseconds: 150),
+                                curve: Curves.easeInOut,
+                              );
+                            }
+                          }
+                        },
+                      ),
                       DecoratedBox(
                         decoration: BoxDecoration(
                           color: Colors.white.withOpacity(0.0),

diff --git a/lib/ui/widgets/slider_handle.dart b/lib/ui/widgets/slider_handle.dart
@@ -4,21 +4,38 @@
 
 import 'package:flutter/material.dart';
 
+/// This class generates a simple 'handle' icon that can be added on widgets such as
+/// scrollable sheets and bottom dialogs.
+///
+/// When running with a screen reader, the handle icon becomes selectable with an
+/// optional label and tap callback. This makes it easier to open/close.
 class SliderHandle extends StatelessWidget {
+  final GestureTapCallback? onTap;
+  final String label;
+
   const SliderHandle({
     super.key,
+    this.onTap,
+    this.label = '',
   });
 
   @override
   Widget build(BuildContext context) {
-    return Padding(
-      padding: const EdgeInsets.all(8.0),
-      child: Container(
-        width: 36,
-        height: 4,
-        decoration: BoxDecoration(
-          color: Theme.of(context).hintColor,
-          borderRadius: const BorderRadius.all(Radius.circular(4.0)),
+    return Semantics(
+      liveRegion: true,
+      label: label,
+      child: GestureDetector(
+        onTap: onTap,
+        child: Padding(
+          padding: const EdgeInsets.all(8.0),
+          child: Container(
+            width: 36,
+            height: 4,
+            decoration: BoxDecoration(
+              color: Theme.of(context).hintColor,
+              borderRadius: const BorderRadius.all(Radius.circular(4.0)),
+            ),
+          ),
         ),
       ),
     );