New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Consider changing the Color.lerp implementation to more naturally handle transparency #48534
Comments
The relevant code affecting this is This makes me think we should be special casing when |
It seems like this is by deisgn, see: You should either use HSVColor or you should avoid lerping to/from transparent black. Going to close this for now, please feel free to ping it if you think I've missed something. |
(e.g. if you set the second color to null instead of Colors.transparent, you'll get the scaleAlpha lerping) |
@dnfield Hi, please reopen the issue, AnimatedContainer can't work with null Color & HSV color |
Ahh. |
I think |
Color.lerp
on HSVColor
s
|
You're right, I missed it because of lightness of color. |
/cc @goderbauer This does work out the way you want if you use Talked offline with @goderbauer about this - it migh tbe worth adding a method to I'm not sure how to decide who wins if you tried to lerp from |
I don’t think I believe this is how color interpolation should work in Flutter by default. |
A similar problem with gradients: |
I'm going to file a separate bug for the HSVColor lerp thing. I'm going to edit this one to be for the engine's Color.lerp. |
Color.lerp
on HSVColor
s
I'm unassigning this since it will take a fair amount of work to migrate internal customers for it. I think it'd be good to do, but would like more evidence about the number of customers impacted before moving forward with it. |
issue code sampleimport 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Transparent Issue',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Colors.transparent issue'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
bool isColorSwap = true;
void _incrementCounter() {
setState(() {
isColorSwap = !isColorSwap;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
title: Text(widget.title),
),
body: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
child: AnimatedContainer(
child: Center(child: Text('fade between white color')),
width: double.infinity,
duration: Duration(milliseconds: 500),
color: isColorSwap ? Colors.lightBlue[100] : Colors.white)),
Expanded(
child: AnimatedContainer(
child:
Center(child: Text('fade between transparent color')),
width: double.infinity,
duration: Duration(milliseconds: 500),
color: isColorSwap
? Colors.lightBlue[100]
: Colors.transparent))
]),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'ClickMe',
child: Icon(Icons.add),
),
);
}
} flutter doctor -v[✓] Flutter (Channel master, 1.25.0-5.0.pre.64, on macOS 11.0.1 20B29
darwin-x64, locale en-GB)
• Flutter version 1.25.0-5.0.pre.64 at /Users/tahatesser/Code/flutter_master
• Framework revision 4d4d017aa5 (6 hours ago), 2020-12-03 21:38:10 -0800
• Engine revision 20caf54969
• Dart version 2.12.0 (build 2.12.0-76.0.dev)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
• Android SDK at /Users/tahatesser/Code/sdk
• Platform android-30, build-tools 30.0.2
• ANDROID_HOME = /Users/tahatesser/Code/sdk
• 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 12.2)
• Xcode at /Volumes/Extreme/Xcode.app/Contents/Developer
• Xcode 12.2, Build version 12B45b
• CocoaPods version 1.10.0
[✓] 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)
[✓] VS Code (version 1.51.1)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.16.0
[✓] Connected device (4 available)
• RMX2001 (mobile) • EUYTFEUSQSRGDA6D • android-arm64 •
Android 10 (API 29)
• Taha’s iPad (mobile) • 00008020-000255113EE8402E • ios • iOS
14.2
• macOS (desktop) • macos • darwin-x64 • macOS
11.0.1 20B29 darwin-x64
• Chrome (web) • chrome • web-javascript • Google
Chrome 87.0.4280.88
• No issues found! |
Still reproducible on the latest versions of flutter. recordingSimulator.Screen.Recording.-.iPhone.14.Pro.-.2022-11-29.at.10.56.56.mp4code sampleimport 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Transparent Issue',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Colors.transparent issue'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
bool isColorSwap = true;
void _incrementCounter() {
setState(() {
isColorSwap = !isColorSwap;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
title: Text(widget.title),
),
body: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
child: AnimatedContainer(
width: double.infinity,
duration: const Duration(milliseconds: 500),
color: isColorSwap ? Colors.lightBlue[100] : Colors.white,
child: const Center(child: Text('fade between white color')))),
Expanded(
child: AnimatedContainer(
width: double.infinity,
duration: const Duration(milliseconds: 500),
color: isColorSwap ? Colors.lightBlue[100] : Colors.transparent,
child: const Center(child: Text('fade between transparent color'))))
],
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'ClickMe',
child: const Icon(Icons.add),
),
);
}
}
flutter doctor -v
|
This was on my old computer it should be rolling around soon flutter/flutter#55092 some more animations and stuff can be added as well after flutter/flutter#48534
This was on my old computer it should be rolling around soon flutter/flutter#55092 some more animations and stuff can be added as well after flutter/flutter#48534
also you shoudl check HSVColor.lerp() a lerp at 0.5 from a dark blue to white returns a yellow green color ??? would be also nice that AnimatedContainer widget uses HSVColor.lerp() for color transitions when fixed, it will be a lot more natural and elegant.. |
Simply run with dart pad and press the FAB button. I'm not show is AnimatedContainer problem or SKIA colour rendering problem.
The text was updated successfully, but these errors were encountered: