Skip to content

Commit

Permalink
Merge pull request #11 from Frezyx/dev
Browse files Browse the repository at this point in the history
Release version 1.0.1
  • Loading branch information
Frezyx authored Jun 5, 2021
2 parents 8daed63 + b0a32b8 commit 2b9b8f3
Show file tree
Hide file tree
Showing 14 changed files with 408 additions and 227 deletions.
4 changes: 4 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
## 0.4.1 - 2021-06-06

* Update examples && README.md

## 1.0.0 - 2021-03-10

* **Breaking change:** icons passed as List
Expand Down
26 changes: 16 additions & 10 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,16 +1,22 @@
# animated_icon_button

[![Build Status](https://travis-ci.com/Frezyx/animated_icon_button.svg?branch=master)](https://travis-ci.com/Frezyx/animated_icon_button) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) ![Pub](https://img.shields.io/pub/v/animated_icon_button.svg)
![Stars](https://img.shields.io/github/stars/Frezyx/animated_icon_button?style=social)

😊 Flutter package to create custom <strong>animated</strong> IconButton.</br>
<h1 align="center">animated_icon_button </h1>
<h2 align="center"> 😊 Flutter package to create custom <strong>animated</strong> IconButton.</br></h2>
<p align="center">
😵 <strong>Includes all available icons.</strong> Based on native IconButton.
</p>
<br>

## Breaking Change
After `1.0.0` version you can use multiple icons.
<p align="center">
<img src='https://travis-ci.com/Frezyx/animated_icon_button.svg?branch=master'>
<img src='https://img.shields.io/badge/License-MIT-yellow.svg'>
<img src='https://img.shields.io/pub/v/animated_icon_button.svg'>
<img src='https://img.shields.io/github/stars/Frezyx/animated_icon_button?style=social'>
</p>

<p align="center">
<img src="https://github.com/Frezyx/animated_icon_button/blob/master/example/rep_files/preview.gif?raw=true" width="270"></p>

<img src="https://github.com/Frezyx/animated_icon_button/blob/master/example/rep_files/preview.gif?raw=true" width="270">
## Breaking Change
After `1.0.1` version you can use multiple icons.

## Getting Started
Follow these steps to use this library
Expand All @@ -19,7 +25,7 @@ Follow these steps to use this library

```yaml
dependencies:
animated_icon_button: ^1.0.0 #latest version
animated_icon_button: ^1.0.1 #latest version
```
### Add import package
Expand Down

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

148 changes: 148 additions & 0 deletions example/lib/big_button_example.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,148 @@
import 'package:animated_icon_button/animated_icon_button.dart';
import 'package:flutter/material.dart';
import 'package:simple_icons/simple_icons.dart';

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
brightness: Brightness.dark,
primaryColor: Colors.greenAccent,
),
home: MyHomePage(),
);
}
}

class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>
with SingleTickerProviderStateMixin {
late AnimationController _progressBorderAc;
late Animation<double> animation;
var _selectedIndex = 0;
var _reverse = false;

@override
void initState() {
_progressBorderAc = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 300),
);
final tween = Tween<double>(
begin: 25.0,
end: 50.0,
);
animation = tween.animate(_progressBorderAc)
..addStatusListener((state) => print('$state'));

super.initState();
}

@override
Widget build(BuildContext context) {
final Size size = MediaQuery.of(context).size;
return Material(
color: const Color(0xFF212121),
child: Center(
child: AnimatedBuilder(
builder: (BuildContext context, Widget? child) {
return Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(100),
boxShadow: [
BoxShadow(
color: color.withOpacity(
animation.value / 100 * 2,
),
blurRadius: animation.value,
)
],
),
child: AnimatedIconButton(
size: size.width * 0.25,
onPressed: () async {
setIndex();
await _progressBorderAc.forward();
await _progressBorderAc.reverse();
},
duration: const Duration(milliseconds: 300),
icons: <AnimatedIconItem>[
AnimatedIconItem(
icon: Icon(SimpleIcons.amd, color: color),
backgroundColor: Colors.white,
),
AnimatedIconItem(
icon: Icon(SimpleIcons.nasa, color: color),
backgroundColor: Colors.white,
),
AnimatedIconItem(
icon: Icon(SimpleIcons.intel, color: color),
backgroundColor: Colors.white,
),
AnimatedIconItem(
icon: Icon(SimpleIcons.man, color: color),
backgroundColor: Colors.white,
),
AnimatedIconItem(
icon: Icon(SimpleIcons.acer, color: color),
backgroundColor: Colors.white,
),
AnimatedIconItem(
icon: Icon(SimpleIcons.travisci, color: color),
backgroundColor: Colors.white,
),
AnimatedIconItem(
icon: Icon(SimpleIcons.ea, color: color),
backgroundColor: Colors.white,
),
AnimatedIconItem(
icon: Icon(SimpleIcons.dior, color: color),
backgroundColor: Colors.white,
),
],
),
);
},
animation: animation,
),
),
);
}

void setIndex() {
if (_selectedIndex < 7) {
setState(() => _selectedIndex += 1);
}
}

Color get color {
switch (_selectedIndex) {
case 0:
return Colors.red;
case 1:
return Colors.orange;
case 2:
return Colors.yellow;
case 3:
return Colors.green;
case 4:
return Colors.indigo;
case 5:
return Colors.blue;
case 6:
return Colors.purple;
default:
return Colors.pink;
}
}
}
Loading

0 comments on commit 2b9b8f3

Please sign in to comment.