The whole App of Flutter becomes gray

preface

On December 13, 1937, Japanese invading troops invaded Nanjing and carried out a 40-day inhumane massacre against Chinese compatriots, killing 300,000 people and leaving one of the darkest pages in the history of human civilization. After 81 years, the bullet holes left by the war on the Wall of Zhonghua Gate are still clearly visible, and the bones of the “mass grave” tell the painful history of that year.

Enlighten the former, teach the later generations.

In order for more people to remember forever, the major factories on this day will be gray applications.

So let’s look at how Flutter is implemented.

The whole App becomes gray in Flutter

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

Just wrap ColorFiltered on the outermost control as follows:

ColorFiltered (color filter)

You can tell by the name that it’s a color filter,

ColorFiltered(
      colorFilter:ColorFilter.mode(Colors.grey, BlendMode.color),
      child: child,
    );
Copy the code

Place the code above under the global root widget to set the color of all pages to gray

Through colorFilter some color filter can be set up, such as grey set, grey and color blending mode ColorFiltered widgets inherit SingleChildRenderObjectWidget, therefore provides a child child layout, This is where pages that you want to filter colors can be placed;

And we end up with a composite that looks like this with a filter

Tracing the source code

I continue to trace the source code into the RenderImage class and see that we end up creating a ColorFilter as well.

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', colorFilter));
  }
}
Copy the code

Set before

After setting

There it is, simple and meaningful, but history will not be forgotten.

The last

Ten o ‘clock this morning

When air raid sirens filled the sky of Nanjing

Wherever you are

In what to do

Please stay for a minute

A moment of silence for the victims

Legal channels ebo

Not just national pathos

And the admonition that the backward must perish

Ming heart inner parts

Remember the history of suffering

Gather strength to move forward

Don’t forget the war

Revitalize The Chinese nation