[Web]AssetImage opacity doesn't work on the web with HTML renderer
#104114
Labels
a: images
Loading, displaying, rendering images
e: web_html
HTML rendering backend for Web
found in release: 3.0
Found to occur in 3.0
found in release: 3.1
Found to occur in 3.1
framework
flutter/packages/flutter repository. See also f: labels.
has reproducible steps
The issue has been confirmed reproducible and is ready to work on
P2
Important issues not at the top of the work list
platform-web
Web applications specifically
team-web
Owned by Web platform team
triaged-web
Triaged by Web platform team
Comments
|
Hi @mklepaczko, Thanks for filing the issue. I am able to reproduce the issue on the stable and master channel. With opacity 0.1 the image is fully visible. This issue is with the HTML renderer and works fine with Canvaskit. flutter doctor -vimport 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.red,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
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> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(
'You have pushed the button this many times:',
),
Test(),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.abc_outlined),
),
);
}
}
class Test extends StatelessWidget {
const Test({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
height: 100,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/flutter_engage.jpeg'), opacity: 0.1),
),
);
}
}Canvaskit ✅
HTML renderer ❌
✅ : No Issue flutter doctor -v (mac) |
maheshmnj
added
framework
maheshmnj
changed the title
maheshmnj
changed the title
AssetImage opacity doesn't work on the web with HTML renderer
|
use like this worked for me |
|
Fwiw: colorFilter does not work on Safari (on iOS) and opacity does not work on Chrome. We solved this issue by detecting the browser type and conditionally switching between the two approaches - which works but is ugly and heavy. Would be great to have this ironed out in the HTML renderer. |
flutter-triage-bot
bot
added
multiteam-retriage-candidate
team-web
|
We're also running into this problem. Thanks for the workaround, but agreed that this is only a workaround and a proper fix would be appreciated
|
|
I am also experiencing this problem now. Still not fixed? |
|
I fixed my problem with this on a more powerpoint-like way. I've set the opacity in Apple's preview app by overlaying a white box with opacity and then uploaded that edited picture as an asset. Not the best way but it worked for my apps background picture :) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Sample code to reproduce
This widget renders correctly on IOS app, Android App, web browser on computer.
This widget renders with opacity 1 on web browser on Android or IOS devices
The text was updated successfully, but these errors were encountered: