Shulou(Shulou.com)06/02 Report--

This article mainly introduces "what is the method that Flutter turns the whole App into gray". In the daily operation, I believe that many people have doubts about the method that Flutter turns the whole App into gray. The editor consulted all kinds of materials and sorted out a simple and easy-to-use method of operation. I hope it will be helpful to answer the doubt that "what is the way that Flutter turns the whole App into gray?" Next, please follow the editor to study!

Preface

In order to make more people remember December 13 forever, all the major factories will turn gray on this day.

So let's take a look at how Flutter is implemented.

The whole App turns gray in Flutter

It is very simple to make the whole App gray in Flutter.

You only need to wrap the ColorFiltered on the outermost control, as follows:

ColorFiltered (Color filter)

If you look at the name, you can see that it adds the effect of color filter.

ColorFiltered (colorFilter:ColorFilter.mode (Colors.grey, BlendMode.color), child: child,)

Put the above code under the global root widget, and you can set all page colors to gray.

Through colorFilter, you can set a certain color filter, such as changing gray to gray, and color mixing mode.

The ColorFiltered widget inherits SingleChildRenderObjectWidget, so it provides a child layout where you can place the page you want to filter the color.

Finally, we synthesize a picture with a filter like this.

Trace the source code

We continue to trace the source code into the RenderImage class, and we can see that we finally created a ColorFilter.

Class ColorFiltered extends SingleChildRenderObjectWidget {/ Creates a widget that applies a [ColorFilter] to its child. / The [colorFilter] must not be null. Const ColorFiltered ({required this.colorFilter, Widget? Child, Key? Key}): assert (colorFilter! = null), super (key: key, child: child); / / The color filter to apply to the child of this widget. Final ColorFilter colorFilter; @ override RenderObject createRenderObject (BuildContext context) = > _ ColorFilterRenderObject (colorFilter); @ override void updateRenderObject (BuildContext context, RenderObject renderObject) {(renderObject as _ ColorFilterRenderObject). ColorFilter = colorFilter;} @ override void debugFillProperties (DiagnosticPropertiesBuilder properties) {super.debugFillProperties (properties); properties.add (DiagnosticsProperty ('colorFilter', colorFilter));}}

Before settin

After settin

The function is realized in this way, the function is simple and the meaning is extraordinary.

Attachment: ColorFiltered can also achieve a similar "filter" effect, allowing an image to be fused with color:

Row (children: [Expanded (child: Image.asset ('images/1.png'),), Expanded (child: ColorFiltered (colorFilter: ColorFilter.mode (Colors.pink, BlendMode.modulate), child: Image.asset (' images/1.png'),)],) The study on "what is the method that Flutter turns the whole App into gray" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.