I have a bunch of Image widgets which when in a disabled state, should look grayed out.
Is there a way to alter an existing image make it look disabled / grayed out?
I want to avoid having both an enabled image asset and a disabled image asset increasing the overall APK size instead of having the single asset.
For runtime grayscale you can use a dart image package with flutter. Load your images with dart image package, apply grayscale function, read the bytes from grayscale image and use it with Image. memory widget of flutter. You can just get bytes without applying grayscale for a coloured image.
From the Insert menu, point to Widgets, then point to Mobile, and select Image Viewer. Click the location on your document where you want to place the widget. The Grid/Graph containing the widget is displayed. Optionally, resize the widget by clicking and then dragging its handles.
In flutter, most widgets already come with an option to disable them for example in a RaisedButton we can set the onClicked function to null to disable, or we can use NeverScrollableScrollPhysics( ) to disable a ListView.
Build the Appbar with the scaffold widget. Now use the Image. Network widget inside the body of the scaffold widget. Finally, set the opacity using colorBlendMode.
Set the widget as the child of a container, and add foregroundDecoration like this:
Container(
foregroundDecoration: BoxDecoration(
color: Colors.grey,
backgroundBlendMode: BlendMode.saturation,
),
child: child,
)
-- Update: Based on this new video from flutter team, there is another widget for this. The code is basically the same, and it is like this:
ColorFiltered(
colorFilter: ColorFilter.mode(
Colors.grey,
BlendMode.saturation,
),
child: child,
)
But I still prefer the method using Container forgroundDecoration, since container gives you more flexibilities in the same place.
According flutter documentation of ColorFiltered you can use ColorFilter.matrix link like this:
const ColorFilter greyscale = ColorFilter.matrix(<double>[
0.2126, 0.7152, 0.0722, 0, 0,
0.2126, 0.7152, 0.0722, 0, 0,
0.2126, 0.7152, 0.0722, 0, 0,
0, 0, 0, 1, 0,
]);
ColorFiltered(
colorFilter: greyscale,
child: child,
);
In this case ColorFilter will ignore transparent areas of your images.
I adapted Mark O'Sullivan post and created a general purpose widget:
To use it:
text = Text("Hellow World");
GrayedOut(text);
or
GrayedOut(text, grayedOut: true);
And the class
class GrayedOut extends StatelessWidget {
final Widget child;
final bool grayedOut;
GrayedOut(this.child, {this.grayedOut = true});
@override
Widget build(BuildContext context) {
return grayedOut ? new Opacity(opacity: 0.3, child: child) : child;
}
}
If your child is a .png image, flutter will render it with a grey background if you put Colors.grey
. Using the same color of your widget background you will have a perfect disabled image
ColorFiltered(
colorFilter: ColorFilter.mode(
Colors.white,
BlendMode.saturation,
),
child: child,
)
If you want to change the color of your image when user clicks it, you can do this:
GestureDetector(
onTap: () => {
setState((){
_active = !_active;
})
},
child: ColorFiltered(
colorFilter: ColorFilter.mode(
_active ? Colors.transparent : Colors.white,
BlendMode.saturation,
),
child: Image(
image: Image.asset("assets/test.png").image
),
),
)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With