Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/frezyx/animated_icon_button
:rainbow: Flutter package to create custom animated IconButton. Includes all available Icons.
https://github.com/frezyx/animated_icon_button
animatedbutton animatedicons animation button buttons dart flutter flutter-android flutter-animation flutter-ios flutter-material flutter-package flutter-ui flutter-widget iconbutton widget widget-library
Last synced: 18 days ago
JSON representation
:rainbow: Flutter package to create custom animated IconButton. Includes all available Icons.
- Host: GitHub
- URL: https://github.com/frezyx/animated_icon_button
- Owner: Frezyx
- License: mit
- Created: 2020-07-17T09:10:06.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2021-06-05T14:50:37.000Z (over 3 years ago)
- Last Synced: 2024-10-02T09:41:27.536Z (about 1 month ago)
- Topics: animatedbutton, animatedicons, animation, button, buttons, dart, flutter, flutter-android, flutter-animation, flutter-ios, flutter-material, flutter-package, flutter-ui, flutter-widget, iconbutton, widget, widget-library
- Language: Dart
- Homepage: https://pub.dev/packages/animated_icon_button
- Size: 4.72 MB
- Stars: 23
- Watchers: 2
- Forks: 6
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
animated_icon_button
😊 Flutter package to create custom animated IconButton.
😵 Includes all available icons. Based on native IconButton.
## Breaking Change
After `1.0.2` version you can use multiple icons.
## Getting Started
Follow these steps to use this library
### Add dependency
```yaml
dependencies:
animated_icon_button: ^1.0.2 #latest version
```
### Add import package
```dart
import 'package:animated_icon_button/animated_icon_button.dart';
```
### Easy to use
Simple example of use AnimatedIconButton
Put this code in your project at an screen and wait for magic 😊
```dart
AnimatedIconButton(
onPressed: () => print('all icons pressed'),
icons: [
AnimatedIconButtonEntry(
icon: Icon(Icons.add),
onPressed: () => print('add pressed'),
),
AnimatedIconButtonEntry(
icon: Icon(Icons.close),
),
],
),
```
### More icons
Now you can use more than 2 icons
Add new icons to your list and they will change one by one
```dart
AnimatedIconButton(
size: 35,
onPressed: () {
print('all icons pressed');
},
duration: const Duration(milliseconds: 200),
icons: [
AnimatedIconButtonEntry(
icon: Icon(
Icons.mic,
color: Colors.purple,
),
onPressed: () => print('mic pressed'),
backgroundColor: Colors.white,
),
AnimatedIconButtonEntry(
icon: Icon(
Icons.g_translate,
color: Colors.purple,
),
backgroundColor: Colors.white,
),
AnimatedIconButtonEntry(
icon: Icon(
Icons.collections_sharp,
color: Colors.purple,
),
backgroundColor: Colors.white,
),
],
),
```
### Custom animation controller
In order to animate your icons in a custom way, like on text changed or when pressing a button, just use the ```animationController``` property as follows.
```dart
var animationController = AnimationController(
vsync: this,
duration: Duration(milliseconds: 200),
reverseDuration: Duration(milliseconds: 200),
);
AnimatedIconButton(
animationController: animationController,
size: 35,
onPressed: () {
print('all icons pressed');
},
duration: const Duration(milliseconds: 200),
icons: [
AnimatedIconButtonEntry(
icon: Icon(
Icons.mic,
color: Colors.purple,
),
onPressed: () => print('mic pressed'),
backgroundColor: Colors.white,
),
AnimatedIconButtonEntry(
icon: Icon(
Icons.g_translate,
color: Colors.purple,
),
backgroundColor: Colors.white,
),
AnimatedIconButtonEntry(
icon: Icon(
Icons.collections_sharp,
color: Colors.purple,
),
backgroundColor: Colors.white,
),
],
),
```
Then, whenever you want, execute your ```animationController.forward()``` and ```animationController.reverse()``` methods to get your icons animated.
Don't forget when you use this property ```duration``` is not used, so it can be emitted.