How to shrink and grow icon animation in flutter? - flutter

Question

I am using the below code to perform animation-grow and shrink animation of the icon but for it, I have to click on the icon, I want the animation repetitive once we on the screen.
return new Container(
child: new Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
new IconButton(
onPressed: () {
setState(() {
if (_resized) {
_resized = false;
_height = 20.0;
} else {
_resized = true;
_height = 40.0;
}
});
},
icon: Icon(Icons.calendar_today, size: _height),
color: _color,
),
],
),
);
I want the output like below where the outer portion continuously grows and shrink.

Answer 1

You can use several approaches to this problem. My preferable would be to use AnimationController that repeats itself.
animationController = AnimationController(
vsync: this,
duration: Duration(seconds: 1),
)
..forward()
..repeat(reverse: true);
You can for instance animate the size of the padding around the button. I would use circular containers around the IconButton.
In order to do that you need to initialize AnimationController in your state. Remember about disposing it when the lifecycle of widget ends.
Here is a sample on codepen and dartpad:
https://codepen.io/orestesgaolin/pen/MWajRGV
https://dartpad.dartlang.org/ca4838f17ea6061cf0212a4b689eaf2a
And full source code can be found in this gist
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Animated Icon',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
AnimationController animationController;
#override
void initState() {
super.initState();
animationController = AnimationController(
vsync: this,
duration: Duration(seconds: 1),
)
..forward()
..repeat(reverse: true);
}
#override
void dispose() {
animationController.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
color: Colors.blue,
child: Center(
child: AnimatedBuilder(
animation: animationController,
builder: (context, child) {
return Container(
decoration: ShapeDecoration(
color: Colors.white.withOpacity(0.5),
shape: CircleBorder(),
),
child: Padding(
padding: EdgeInsets.all(8.0 * animationController.value),
child: child,
),
);
},
child: Container(
decoration: ShapeDecoration(
color: Colors.white,
shape: CircleBorder(),
),
child: IconButton(
onPressed: () {},
color: Colors.blue,
icon: Icon(Icons.calendar_today, size: 24),
),
),
),
),
),
);
}
}