当前位置：网站首页>Use flutter to adjust a color filter for the picture of my little sister

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

2022-07-26 05:13:00 【InfoQ】

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

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());
 });
 },
 )
 ],
 ),
 ),
 );
 }
}