First, load the image to extract color to achieve gradient animation

Extract image color

Speaking of extracting image colors, the Paltte palette is most familiar to Android developers, as follows:

 Palette.from(bitmap).generate()
Copy the code

What similar framework do we have for Flutter? Palette_generator

PaletteGenerator.fromImage(ui.Image image,Rect region,.....)

Copy the code

To import, we simply import palette_generator: ^0.3.0 in pubspec.yaml

Ii. Effect Drawing (Gif)

Sampling logic

Var rectWidth = image.width / 3.0; Var rectHeight = image.height / 3.0; var color = await PaletteGenerator.fromImage(image, region: Rect.fromCenter( center: Offset(image.width / 2.0, image.height / 2.0), width: rectWidth, height: rectHeight), maximumColorCount: 5)Copy the code

By getting the size of the loaded image, the clipping area is taken from the middle, and the length and width are one third of the length and width of the image. Through the Stack control for two layers of alternating gradient animation effect.

Stack(children: [AnimatedOpacity(opacity: _placeVisible? 1.0:0.15, curve: Curves. EaseOut, duration: Duration(milliseconds: widget.duration), child: Container( width: widget.imageWidth, height: widget.imageHeight, color: _placeColor, ), ), FadeTransition( opacity: _curvedAnimation, child: SizedBox( width: widget.imageWidth, height: widget.imageHeight, child: Image( width: widget.imageWidth, height: widget.imageHeight, image: _imageProvider, fit: widget.fit, )), ) ], )Copy the code

Github address

The code of the project has been submitted to Github: warehouse address welcome everyone to leave a message, if you think there are many good people, you can consider making a library, submit to the Pub