flutter
flutter copied to clipboard
flutter
Wrong behavior when ClipRRect's child has variable size
Steps to Reproduce
You can see the code demonstrating the issue on https://codepen.io/leonvr/pen/WNrQVBo
Expected results: I expect my image to fade in with rounded corners. In other words: I expect the clipping to take place before the image fades in.
Actual results: First the image fades in as a rectangle (no rounded corners). After a second you can see the clipping happening. In other words: first you see the image, and after that you see the corners 'popping of'.
/cc @liyuqian Any idea why the clip does not take affect while the fade-in animation is running?
I was trying to help op in google groups, couldn't find a simple way of doing it. All the "right" ways to do it lead to a streched placeholder or the image without round corner. For me its something with the placeholder aspect ration inside FadeInImage, looks like if you don't set a width for Container it uses the placeholder width enlarged by it aspect ratio.
Managed to make it work getting the image aspect ratio and setting Container width as Container height * image aspect.
Code: https://gist.github.com/edufpin/eac415fa9f0005e439737d868c18c734
@goderbauer : as https://github.com/flutter/flutter/issues/59155#issuecomment-642372917 suggested, the problem seems to be that the framework calculates the FadeInImage's size wrong, and therefore the clip is not applied correctly. The blue rrect in this sample code https://codepen.io/liyuqian/pen/OJMXLjV should make it more obvious to see the problem.
@liyuqian I check and I think so the fade image placeholder is of different size (smaller than the original image). If I use both images of the same size then it works fine. @goderbauer Any idea on this? @AyushBherwani1998 what do you think about this issue?
I was able to reproduce the issue on latest mater and stable channel.
code sample
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(home: MyWidget()),);
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(crossAxisAlignment: CrossAxisAlignment.center, children: <
Widget>[
Text(
'Problem to be solved: If you watch closely you will see: for a second the image is visible as a rectangle (no rounded corners), before the rounded corners are cut off. I want the corners to be rounded before it is shown.'),
Container(
//color: Colors.red,
height: MediaQuery.of(context).size.height * 0.3,
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(20)),
child: FadeInImage(
placeholder:
NetworkImage('https://source.unsplash.com/random/50x50'),
image: NetworkImage('https://source.unsplash.com/random/400x600'),
),
),
),
]),
);
}
}
flutter doctor -v
[✓] Flutter (Channel master, 1.26.0-2.0.pre.334, on Mac OS X 10.15.7 19H2 darwin-x64, locale en)
• Flutter version 1.26.0-2.0.pre.334 at /Users/pedromassango/Code/flutter_master
• Framework revision 333dc5d88a (8 hours ago), 2021-01-14 06:56:54 +0100
• Engine revision 1b5e16cda2
• Dart version 2.12.0 (build 2.12.0-223.0.dev)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
• Android SDK at /Users/pedromassango/Library/Android/sdk
• Platform android-30, build-tools 30.0.2
• Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)
• All Android licenses accepted.
[!] Xcode - develop for iOS and macOS
• Xcode at /Applications/Xcode.app/Contents/Developer
• Xcode 12.1, Build version 12A7403
! CocoaPods 1.9.3 out of date (1.10.0 is recommended).
CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on the Dart side.
Without CocoaPods, plugins will not work on iOS or macOS.
For more info, see https://flutter.dev/platform-plugins
To upgrade see https://guides.cocoapods.org/using/getting-started.html#installation for instructions.
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 4.1)
• Android Studio at /Applications/Android Studio.app/Contents
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)
[✓] IntelliJ IDEA Community Edition (version 2020.3.1)
• IntelliJ at /Applications/IntelliJ IDEA CE.app
• Flutter plugin version 52.2.5
• Dart plugin version 203.6912
[✓] VS Code (version 1.52.1)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.18.1
[✓] Connected device (3 available)
• sdk gphone x86 64 (mobile) • emulator-5554 • android-x64 • Android 11 (API 30) (emulator)
• macOS (desktop) • macos • darwin-x64 • Mac OS X 10.15.7 19H2 darwin-x64
• Chrome (web) • chrome • web-javascript • Google Chrome 87.0.4280.141
! Doctor found issues in 1 category.
This is happening to me too when I am using images in carousel...
CarouselSlider(
items: imageSliders(),
carouselController: _carouselController,
options: CarouselOptions(
scrollPhysics: BouncingScrollPhysics(),
autoPlay: true,
height: 200,
enlargeCenterPage: true,
aspectRatio: 16 / 9,
viewportFraction: 1,
onPageChanged: (index, reason) {
setState(() {
_current = index;
});
}),
),
List<Widget> imageSliders() {
return adv
.map((item) => InkWell(
borderRadius: BorderRadius.circular(25),
onTap: () async {
if (!await launch(
item.advUrl,
)) {}
},
child: ClipRRect(
borderRadius: BorderRadius.circular(25),
child: CachedNetworkImage(
imageUrl: item.advImage,
fit: BoxFit.cover,
),
)))
.toList();
}
Reproduces on the latest version of stable
https://user-images.githubusercontent.com/88313112/206432518-a844dd25-20de-455a-b0e4-989707b286ef.mov
updated sample
import 'package:flutter/material.dart';
void main() => runApp(
const MaterialApp(home: MyWidget()),
);
class MyWidget extends StatelessWidget {
const MyWidget({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
const Text(
'Problem to be solved: If you watch closely you will see: for a second the image is visible as a rectangle (no rounded corners), before the rounded corners are cut off. I want the corners to be rounded before it is shown.'),
SizedBox(
//color: Colors.red,
height: MediaQuery.of(context).size.height * 0.3,
child: const ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(20)),
child: FadeInImage(
placeholder: NetworkImage('https://source.unsplash.com/random/50x50'),
image: NetworkImage('https://source.unsplash.com/random/400x600'),
),
),
),
],
),
);
}
}
flutter doctor -v
[✓] Flutter (Channel stable, 3.3.9, on macOS 13.0.1 22A400 darwin-arm, locale en-GB)
• Flutter version 3.3.9 on channel stable at /Users/nexus/dev/sdks/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision b8f7f1f986 (2 weeks ago), 2022-11-23 06:43:51 +0900
• Engine revision 8f2221fbef
• Dart version 2.18.5
• DevTools version 2.15.0
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
• Android SDK at /Users/nexus/Library/Android/sdk
• Platform android-33, build-tools 33.0.0
• Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 14.1)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 14B47b
• CocoaPods version 1.11.3
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 2021.3)
• Android Studio at /Applications/Android Studio.app/Contents
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)
[✓] VS Code (version 1.74.0)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.54.0
[✓] Connected device (5 available)
• M2007J20CG (mobile) • 5dd3be00 • android-arm64 • Android 12 (API 31)
• Nexus (mobile) • 00008020-001875E83A38002E • ios • iOS 16.1.2 20B110
• iPhone 14 Pro (mobile) • 4F72110C-F38B-4CF9-93C4-4D6042148D28 • ios • com.apple.CoreSimulator.SimRuntime.iOS-16-1 (simulator)
• macOS (desktop) • macos • darwin-arm64 • macOS 13.0.1 22A400 darwin-arm
• Chrome (web) • chrome • web-javascript • Google Chrome 108.0.5359.94
[✓] HTTP Host Availability
• All required HTTP hosts are available
• No issues found!
[!] Flutter (Channel master, 3.7.0-4.0.pre.38, on macOS 13.0.1 22A400 darwin-arm64, locale en-GB)
• Flutter version 3.7.0-4.0.pre.38 on channel master at /Users/nexus/dev/sdks/flutters
! Warning: `flutter` on your path resolves to /Users/nexus/dev/sdks/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/nexus/dev/sdks/flutters. Consider adding /Users/nexus/dev/sdks/flutters/bin to the front of your path.
! Warning: `dart` on your path resolves to /Users/nexus/dev/sdks/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/nexus/dev/sdks/flutters. Consider adding /Users/nexus/dev/sdks/flutters/bin to the front of your path.
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 521028c808 (13 hours ago), 2022-12-07 13:46:17 -0800
• Engine revision 67254d6e4b
• Dart version 2.19.0 (build 2.19.0-467.0.dev)
• DevTools version 2.20.0
• If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
• Android SDK at /Users/nexus/Library/Android/sdk
• Platform android-33, build-tools 33.0.0
• Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 14.1)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 14B47b
• CocoaPods version 1.11.3
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 2021.3)
• Android Studio at /Applications/Android Studio.app/Contents
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)
[✓] VS Code (version 1.74.0)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.54.0
[✓] Connected device (5 available)
• M2007J20CG (mobile) • 5dd3be00 • android-arm64 • Android 12 (API 31)
• Nexus (mobile) • 00008020-001875E83A38002E • ios • iOS 16.1.2 20B110
• iPhone 14 Pro (mobile) • 4F72110C-F38B-4CF9-93C4-4D6042148D28 • ios • com.apple.CoreSimulator.SimRuntime.iOS-16-1 (simulator)
• macOS (desktop) • macos • darwin-arm64 • macOS 13.0.1 22A400 darwin-arm64
• Chrome (web) • chrome • web-javascript • Google Chrome 108.0.5359.94
[✓] HTTP Host Availability
• All required HTTP hosts are available
! Doctor found issues in 1 category.
One workaround to the problem is to use a container and then set the FadeInDuration and FadeOutDuration to very short (but non-zero) durations on the CachedNetworkImage. This will allow the rounded corners to render without a noticeable delay to users.
