Use flutter to adjust a color filter for the picture of my little sister

Preface

The animation we talked about before needs to be triggered actively or executed repeatedly , Is there a component that triggers the animation itself ？ So that we can  

StatelessWidget

  I used . The answer is yes , That's it  

TweenAnimationBuilder

  Components . In this article, we use

TweenAnimationBuilder

To achieve a transition animation of picture color matching , The effect is as follows , Slide the slider once , The color gradually changes from green to orange , Then slide again to restore the previous tone .

TweenAnimationBuilder

Introduce

TweenAnimationBuilder

Is a component with transition animation effect , The construction method is defined as follows ：

const TweenAnimationBuilder({
 Key? key,
 required this.tween,
 required Duration duration,
 Curve curve = Curves.linear,
 required this.builder,
 VoidCallback? onEnd,
 this.child,
}) 


among  

duration

、

curve

  and  

onEnd

  We introduced the animation component before , No more details here . other 2 The parameters are as follows ：

• tween
  ：
  Twee<T>
  type , During the animation process, the  
  Tween
    The intermediate interpolation of is passed to  
  builder
    To build subcomponents , Thus, the transition animation effect can be realized .

• builder
  ： Component building method , The type is
  ValueWidgetBuilder<T>
  , The specific definitions are as follows , among  
  value
    The parameter is  
  tween
    Intermediate interpolation during animation . That is, during the animation , Will keep calling
  builder
    Redraw sub components .

typedef ValueWidgetBuilder<T> = Widget Function(BuildContext context, T value, Widget? child);


The corresponding source code shows the implementation method , At initialization time , If the start and end values are inconsistent, the animation will start .

class _TweenAnimationBuilderState<T extends Object?> extends AnimatedWidgetBaseState<TweenAnimationBuilder<T>> {
 Tween<T>? _currentTween;

 @override
 void initState() {
 _currentTween = widget.tween;
 _currentTween!.begin ??= _currentTween!.end;
 super.initState();
 if (_currentTween!.begin != _currentTween!.end) {
 controller.forward();
 }
 }

 @override
 void forEachTween(TweenVisitor<dynamic> visitor) {
 assert(
 widget.tween.end != null,
 'Tween provided to TweenAnimationBuilder must have non-null Tween.end value.',
 );
 _currentTween = visitor(_currentTween, widget.tween.end, (dynamic value) {
 assert(false);
 throw StateError('Constructor will never be called because null is never provided as current tween.');
 }) as Tween<T>?;
 }

 @override
 Widget build(BuildContext context) {
 return widget.builder(context, _currentTween!.evaluate(animation), widget.child);
 }
}


With this foundation , You can apply

TweenAnimationBuilder

了 .

application

Back to our previous effect , We want to achieve the effect of color filter , Need to be applied to another component  

ColorFiltered

.

ColorFiltered

Use   designated  

ColorFilter

  Object to filter the color of each pixel of the sub component , It's actually inserting a color layer , So it looks like a filter . For example, we need to add an orange filter , You can do that . Note that there are many filter modes , You can see  

BlendMode

  Description of enumeration .

ColorFiltered(
 colorFilter:
 ColorFilter.mode(Colors.orange, BlendMode.modulate),
 child: ClipOval(
 child: ClipOval(
 child: Image.asset(
 'images/beauty.jpeg',
 width: 300,
 ),
 ),
 ),
);


With this component , That's in  

TweenAnimationBuilder

  Use in  

ColorTween

, And then in  

builder

  In the method , take  

ColorFilter

  Change your color to  

builder

  The received  

Color

  Object can realize the dynamic effect of color transition . Here we use a  

Slider

  Components , When sliding to different positions , Change the red component , You can adjust the color filter by sliding the position of the slider , Little sister's photos can also have different styles . The complete code is as follows ：

class TweenAnimationDemo extends StatefulWidget {
 TweenAnimationDemo({Key? key}) : super(key: key);

 @override
 _TweenAnimationDemoState createState() => _TweenAnimationDemoState();
}

class _TweenAnimationDemoState extends State<TweenAnimationDemo> {
 var _sliderValue = 0.0;
 Color _newColor = Colors.orange;

 @override
 void initState() {
 super.initState();
 }

 @override
 Widget build(BuildContext context) {
 return Scaffold(
 appBar: AppBar(
 title: Text('TweenAnimationBuilder'),
 brightness: Brightness.dark,
 backgroundColor: Colors.black,
 ),
 backgroundColor: Colors.black,
 body: Center(
 child: Column(
 children: [
 TweenAnimationBuilder(
 tween: ColorTween(
 begin: Colors.white,
 end: _newColor,
 ),
 duration: Duration(seconds: 1),
 builder: (_, color, child) {
 return ColorFiltered(
 colorFilter:
 ColorFilter.mode(color as Color, BlendMode.modulate),
 child: ClipOval(
 child: ClipOval(
 child: Image.asset(
 'images/beauty.jpeg',
 width: 300,
 ),
 ),
 ),
 );
 },
 ),
 Slider.adaptive(
 value: _sliderValue,
 onChanged: (value) {
 setState(() {
 _sliderValue = value;
 });
 },
 onChangeEnd: (value) {
 setState(() {
 _newColor = _newColor.withRed((value * 255).toInt());
 });
 },
 )
 ],
 ),
 ),
 );
 }
}


summary

This article introduces  

TweenAnimationBuilder

  Construction method of 、 Implementation mechanism and application , Use at the same time  

ColorFiltered

  The filter component realizes the color effect .

TweenAnimationBuilder

You can also realize some interesting animations , For example, the following ball moving back and forth .