I am running the app with Chewie in Android Emulator. And the chewie video player has an overflowing progress bar like below.
It looks fine on iOS Simulator. After some try with AI (installing the chewie package source code in my project with dev-dependency overriding) , I was able to fix. But does not look good.
1. [material_controls.dart](vscode-webview://00ua0hqbsc716k31bb7536f1plk1ocka94ot8qr18c81u3ua5tl6/packages/chewie/lib/src/material/material_controls.dart)
// Before
Expanded(
child: Container(
padding: ...,
child: Row(children: [_buildProgressBar()]), // Row 안에 Expanded
),
),
// After
Expanded(
child: ClipRect( // ClipRect로 overflow 방지
child: Padding(
padding: ...,
child: _buildProgressBar(), // Row 제거
),
),
),
2. [progress_bar.dart](vscode-webview://00ua0hqbsc716k31bb7536f1plk1ocka94ot8qr18c81u3ua5tl6/packages/chewie/lib/src/progress_bar.dart)
// VideoProgressBar.build - Remove Center
final child = StaticProgressBar(...);
// StaticProgressBar.build - Use SizedBox.expand
return SizedBox.expand( // instead of, MediaQuery/LayoutBuilder
child: CustomPaint(...),
);This is the flutter doctor.
% flutter doctor -v
[✓] Flutter (Channel stable, 3.38.4, on macOS 26.1 25B78 darwin-arm64,
locale en-PH) [767ms]
• Flutter version 3.38.4 on channel stable at
/Users/thruthesky/bin/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 66dd93f9a2 (12 days ago), 2025-12-03 14:56:10 -0800
• Engine revision a5cb96369e
• Dart version 3.10.3
• DevTools version 2.51.1
• Feature flags: enable-web, enable-linux-desktop, enable-macos-desktop,
enable-windows-desktop, enable-android, enable-ios, cli-animations,
enable-native-assets, omit-legacy-version-file, enable-lldb-debugging
[✓] Android toolchain - develop for Android devices (Android SDK version
35.0.0) [2.8s]
• Android SDK at /Users/thruthesky/Library/Android/sdk
• Emulator version 31.3.13.0 (build_id 9189900) (CL:N/A)
• Platform android-36, build-tools 35.0.0
• ANDROID_HOME = /Users/thruthesky/Library/Android/sdk
• ANDROID_SDK_ROOT = /Users/thruthesky/Library/Android/sdk
• Java binary at: /Applications/Android
Studio.app/Contents/jbr/Contents/Home/bin/java
This is the JDK bundled with the latest Android Studio installation on
this machine.
To manually set the JDK path, use: `flutter config
--jdk-dir="path/to/jdk"`.
• Java version OpenJDK Runtime Environment (build
17.0.6+0-17.0.6b829.9-10027231)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 26.2) [2.5s]
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 17C52
• CocoaPods version 1.16.2
[✓] Chrome - develop for the web [10ms]
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Connected device (5 available) [11.1s]
• sdk gphone64 arm64 (mobile) • emulator-5554 • android-arm64 •
Android 12 (API 32) (emulator)
• JaeHo16 (mobile) • 00008140-001C24C93E93001C • ios • iOS
26.1 23B85
• JAEHO’s iPad (wireless) (mobile) • 00008103-000E41882631001E • ios • iOS
26.2 23C52
• macOS (desktop) • macos • darwin-arm64 • macOS
26.1 25B78 darwin-arm64
• Chrome (web) • chrome • web-javascript • Google
Chrome 143.0.7499.110
! Error: Browsing on the local area network for iPhone11ProMax. Ensure the device is
unlocked and attached with a cable or associated with the same local area network as
this Mac.
The device must be opted into Developer Mode to connect wirelessly. (code -27)
[✓] Network resources [497ms]
• All expected network resources are available.
• No issues found!
I am running the app with Chewie in Android Emulator. And the chewie video player has an overflowing progress bar like below.
It looks fine on iOS Simulator. After some try with AI (installing the chewie package source code in my project with dev-dependency overriding) , I was able to fix. But does not look good.
1. [material_controls.dart](vscode-webview://00ua0hqbsc716k31bb7536f1plk1ocka94ot8qr18c81u3ua5tl6/packages/chewie/lib/src/material/material_controls.dart) // Before Expanded( child: Container( padding: ..., child: Row(children: [_buildProgressBar()]), // Row 안에 Expanded ), ), // After Expanded( child: ClipRect( // ClipRect로 overflow 방지 child: Padding( padding: ..., child: _buildProgressBar(), // Row 제거 ), ), ), 2. [progress_bar.dart](vscode-webview://00ua0hqbsc716k31bb7536f1plk1ocka94ot8qr18c81u3ua5tl6/packages/chewie/lib/src/progress_bar.dart) // VideoProgressBar.build - Remove Center final child = StaticProgressBar(...); // StaticProgressBar.build - Use SizedBox.expand return SizedBox.expand( // instead of, MediaQuery/LayoutBuilder child: CustomPaint(...), );This is the flutter doctor.
% flutter doctor -v [✓] Flutter (Channel stable, 3.38.4, on macOS 26.1 25B78 darwin-arm64, locale en-PH) [767ms] • Flutter version 3.38.4 on channel stable at /Users/thruthesky/bin/flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision 66dd93f9a2 (12 days ago), 2025-12-03 14:56:10 -0800 • Engine revision a5cb96369e • Dart version 3.10.3 • DevTools version 2.51.1 • Feature flags: enable-web, enable-linux-desktop, enable-macos-desktop, enable-windows-desktop, enable-android, enable-ios, cli-animations, enable-native-assets, omit-legacy-version-file, enable-lldb-debugging [✓] Android toolchain - develop for Android devices (Android SDK version 35.0.0) [2.8s] • Android SDK at /Users/thruthesky/Library/Android/sdk • Emulator version 31.3.13.0 (build_id 9189900) (CL:N/A) • Platform android-36, build-tools 35.0.0 • ANDROID_HOME = /Users/thruthesky/Library/Android/sdk • ANDROID_SDK_ROOT = /Users/thruthesky/Library/Android/sdk • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java This is the JDK bundled with the latest Android Studio installation on this machine. To manually set the JDK path, use: `flutter config --jdk-dir="path/to/jdk"`. • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b829.9-10027231) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS (Xcode 26.2) [2.5s] • Xcode at /Applications/Xcode.app/Contents/Developer • Build 17C52 • CocoaPods version 1.16.2 [✓] Chrome - develop for the web [10ms] • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] Connected device (5 available) [11.1s] • sdk gphone64 arm64 (mobile) • emulator-5554 • android-arm64 • Android 12 (API 32) (emulator) • JaeHo16 (mobile) • 00008140-001C24C93E93001C • ios • iOS 26.1 23B85 • JAEHO’s iPad (wireless) (mobile) • 00008103-000E41882631001E • ios • iOS 26.2 23C52 • macOS (desktop) • macos • darwin-arm64 • macOS 26.1 25B78 darwin-arm64 • Chrome (web) • chrome • web-javascript • Google Chrome 143.0.7499.110 ! Error: Browsing on the local area network for iPhone11ProMax. Ensure the device is unlocked and attached with a cable or associated with the same local area network as this Mac. The device must be opted into Developer Mode to connect wirelessly. (code -27) [✓] Network resources [497ms] • All expected network resources are available. • No issues found!