Merge pull request media-kit#495 from ashilkn/center_align_bottom_con…

…trols feat(material-seekbar): Center the seek bar within its parent container for improved tap area
birros · Sep 26, 2023 · 3c899ca · 3c899ca
2 parents 0147c76 + 6ccba8d
commit 3c899ca
Showing 1 changed file with 45 additions and 43 deletions.
diff --git a/media_kit_video/lib/media_kit_video_controls/src/controls/material.dart b/media_kit_video/lib/media_kit_video_controls/src/controls/material.dart
@@ -1260,54 +1260,56 @@ class MaterialSeekBarState extends State<MaterialSeekBar> {
                 color: Colors.transparent,
                 width: constraints.maxWidth,
                 height: _theme(context).seekBarContainerHeight,
-                child: Stack(
-                  clipBehavior: Clip.none,
-                  alignment: Alignment.bottomLeft,
-                  children: [
-                    Container(
-                      width: constraints.maxWidth,
-                      height: _theme(context).seekBarHeight,
-                      alignment: Alignment.bottomLeft,
-                      color: _theme(context).seekBarColor,
-                      child: Stack(
-                        clipBehavior: Clip.none,
+                child: Center(
+                  child: Stack(
+                    clipBehavior: Clip.none,
+                    alignment: Alignment.bottomLeft,
+                    children: [
+                      Container(
+                        width: constraints.maxWidth,
+                        height: _theme(context).seekBarHeight,
                         alignment: Alignment.bottomLeft,
-                        children: [
-                          Container(
-                            width: constraints.maxWidth * bufferPercent,
-                            color: _theme(context).seekBarBufferColor,
-                          ),
-                          Container(
-                            width: tapped
-                                ? constraints.maxWidth * slider
-                                : constraints.maxWidth * positionPercent,
-                            color: _theme(context).seekBarPositionColor,
-                          ),
-                        ],
+                        color: _theme(context).seekBarColor,
+                        child: Stack(
+                          clipBehavior: Clip.none,
+                          alignment: Alignment.bottomLeft,
+                          children: [
+                            Container(
+                              width: constraints.maxWidth * bufferPercent,
+                              color: _theme(context).seekBarBufferColor,
+                            ),
+                            Container(
+                              width: tapped
+                                  ? constraints.maxWidth * slider
+                                  : constraints.maxWidth * positionPercent,
+                              color: _theme(context).seekBarPositionColor,
+                            ),
+                          ],
+                        ),
                       ),
-                    ),
-                    Positioned(
-                      left: tapped
-                          ? (constraints.maxWidth -
-                                  _theme(context).seekBarThumbSize / 2) *
-                              slider
-                          : (constraints.maxWidth -
-                                  _theme(context).seekBarThumbSize / 2) *
-                              positionPercent,
-                      bottom: -1.0 * _theme(context).seekBarThumbSize / 2 +
-                          _theme(context).seekBarHeight / 2,
-                      child: Container(
-                        width: _theme(context).seekBarThumbSize,
-                        height: _theme(context).seekBarThumbSize,
-                        decoration: BoxDecoration(
-                          color: _theme(context).seekBarThumbColor,
-                          borderRadius: BorderRadius.circular(
-                            _theme(context).seekBarThumbSize / 2,
+                      Positioned(
+                        left: tapped
+                            ? (constraints.maxWidth -
+                                    _theme(context).seekBarThumbSize / 2) *
+                                slider
+                            : (constraints.maxWidth -
+                                    _theme(context).seekBarThumbSize / 2) *
+                                positionPercent,
+                        bottom: -1.0 * _theme(context).seekBarThumbSize / 2 +
+                            _theme(context).seekBarHeight / 2,
+                        child: Container(
+                          width: _theme(context).seekBarThumbSize,
+                          height: _theme(context).seekBarThumbSize,
+                          decoration: BoxDecoration(
+                            color: _theme(context).seekBarThumbColor,
+                            borderRadius: BorderRadius.circular(
+                              _theme(context).seekBarThumbSize / 2,
+                            ),
                           ),
                         ),
                       ),
-                    ),
-                  ],
+                    ],
+                  ),
                 ),
               ),
             ),