Flutter - Blinking button
You can do that with this approach also. My logic is a little different I am using alternate for animation. Once animation completed in forward I'm coming backward.
Which is good for eyesight
ie:
forward -> backward
backward -> forward
and so on
import 'package:flutter/material.dart';
import 'package:flutter/animation.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Wordpress App',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new BlinkAnimation(),
);
}
}
class BlinkAnimation extends StatefulWidget {
@override
_BlinkAnimationState createState() => _BlinkAnimationState();
}
class _BlinkAnimationState extends State<BlinkAnimation>
with SingleTickerProviderStateMixin {
Animation<Color> animation;
AnimationController controller;
initState() {
super.initState();
controller = AnimationController(
duration: const Duration(milliseconds: 500), vsync: this);
final CurvedAnimation curve =
CurvedAnimation(parent: controller, curve: Curves.linear);
animation =
ColorTween(begin: Colors.white, end: Colors.blue).animate(curve);
animation.addStatusListener((status) {
if (status == AnimationStatus.completed) {
controller.reverse();
} else if (status == AnimationStatus.dismissed) {
controller.forward();
}
setState(() {});
});
controller.forward();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: new Text('Blink Animation'),
),
body: new Center(
child: AnimatedBuilder(
animation: animation,
builder: (BuildContext context, Widget child) {
return new Container(
child: new RaisedButton(
color: animation.value,
onPressed: () {
controller.forward();
},
child: Text('Blink Animation'),
),
);
},
),
),
);
}
dispose() {
controller.dispose();
super.dispose();
}
}
You can achieve this in an easy way using AnimationController
and FadeTransition
widget, here you have the code:
class MyBlinkingButton extends StatefulWidget {
@override
_MyBlinkingButtonState createState() => _MyBlinkingButtonState();
}
class _MyBlinkingButtonState extends State<MyBlinkingButton>
with SingleTickerProviderStateMixin {
AnimationController _animationController;
@override
void initState() {
_animationController =
new AnimationController(vsync: this, duration: Duration(seconds: 1));
_animationController.repeat(reverse: true);
super.initState();
}
@override
Widget build(BuildContext context) {
return FadeTransition(
opacity: _animationController,
child: MaterialButton(
onPressed: () => null,
child: Text("Text button"),
color: Colors.green,
),
);
}
@override
void dispose() {
_animationController.dispose();
super.dispose();
}
}
Usage:
main() {
runApp(
MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Material(
child: Center(
child: MyBlinkingButton(),
),
),
),
);
}
DartPad example
Result: