Created
May 31, 2018 03:02
-
-
Save agungsb/577e45a223ea5a6e148ee746f4f09427 to your computer and use it in GitHub Desktop.
Create A Simple Animated FloatingActionButton in Flutter
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import 'package:flutter/material.dart'; | |
class FancyFab extends StatefulWidget { | |
final Function() onPressed; | |
final String tooltip; | |
final IconData icon; | |
FancyFab({this.onPressed, this.tooltip, this.icon}); | |
@override | |
_FancyFabState createState() => _FancyFabState(); | |
} | |
class _FancyFabState extends State<FancyFab> | |
with SingleTickerProviderStateMixin { | |
bool isOpened = false; | |
AnimationController _animationController; | |
Animation<Color> _buttonColor; | |
Animation<double> _animateIcon; | |
Curve _curve = Curves.easeOut; | |
@override | |
initState() { | |
_animationController = | |
AnimationController(vsync: this, duration: Duration(milliseconds: 500)) | |
..addListener(() { | |
setState(() {}); | |
}); | |
_animateIcon = | |
Tween<double>(begin: 0.0, end: 1.0).animate(_animationController); | |
_buttonColor = ColorTween( | |
begin: Colors.blue, | |
end: Colors.red, | |
).animate(CurvedAnimation( | |
parent: _animationController, | |
curve: Interval( | |
0.00, | |
1.00, | |
curve: Curves.linear, | |
), | |
)); | |
super.initState(); | |
} | |
@override | |
dispose() { | |
_animationController.dispose(); | |
super.dispose(); | |
} | |
animate() { | |
if (!isOpened) { | |
_animationController.forward(); | |
} else { | |
_animationController.reverse(); | |
} | |
isOpened = !isOpened; | |
} | |
Widget add() { | |
return new Container( | |
child: FloatingActionButton( | |
onPressed: null, | |
tooltip: 'Add', | |
child: Icon(Icons.add), | |
), | |
); | |
} | |
Widget image() { | |
return new Container( | |
child: FloatingActionButton( | |
onPressed: null, | |
tooltip: 'Image', | |
child: Icon(Icons.image), | |
), | |
); | |
} | |
Widget inbox() { | |
return new Container( | |
child: FloatingActionButton( | |
onPressed: null, | |
tooltip: 'Inbox', | |
child: Icon(Icons.inbox), | |
), | |
); | |
} | |
Widget toggle() { | |
return new Container( | |
child: FloatingActionButton( | |
backgroundColor: _buttonColor.value, | |
onPressed: animate, | |
tooltip: 'Toggle', | |
child: AnimatedIcon( | |
icon: AnimatedIcons.menu_close, | |
progress: _animateIcon, | |
), | |
), | |
); | |
} | |
@override | |
Widget build(BuildContext context) { | |
return Column( | |
mainAxisAlignment: MainAxisAlignment.end, | |
children: <Widget>[ | |
add(), | |
image(), | |
inbox(), | |
toggle(), | |
], | |
); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment