Skip to content

Add animation duration parameter #63

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
AryanAhadinia wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Add animation duration parameter #63

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 8 additions & 5 deletions lib/fancy_bottom_navigation.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,8 @@ class FancyBottomNavigation extends StatefulWidget {
this.activeIconColor,
this.inactiveIconColor,
this.textColor,
this.barBackgroundColor})
this.barBackgroundColor,
this.animationDuration = 300})
: assert(onTabChangedListener != null),
assert(tabs != null),
assert(tabs.length > 1 && tabs.length < 5);
Expand All @@ -35,6 +36,7 @@ class FancyBottomNavigation extends StatefulWidget {
final Color? barBackgroundColor;
final List<TabData> tabs;
final int initialSelection;
final int animationDuration;

final Key? key;

Expand Down Expand Up @@ -128,6 +130,7 @@ class FancyBottomNavigationState extends State<FancyBottomNavigation>
title: t.title,
iconColor: inactiveIconColor,
textColor: textColor,
animationDuration: widget.animationDuration,
callbackFunction: (uniqueKey) {
int selected = widget.tabs
.indexWhere((tabData) => tabData.key == uniqueKey);
Expand All @@ -142,7 +145,7 @@ class FancyBottomNavigationState extends State<FancyBottomNavigation>
top: -(CIRCLE_SIZE + CIRCLE_OUTLINE + SHADOW_ALLOWANCE) / 2,
child: Container(
child: AnimatedAlign(
duration: Duration(milliseconds: ANIM_DURATION),
duration: Duration(milliseconds: widget.animationDuration),
curve: Curves.easeOut,
alignment: Alignment(_circleAlignX, 1),
child: Padding(
Expand Down Expand Up @@ -194,7 +197,7 @@ class FancyBottomNavigationState extends State<FancyBottomNavigation>
padding: const EdgeInsets.all(0.0),
child: AnimatedOpacity(
duration:
Duration(milliseconds: ANIM_DURATION ~/ 5),
Duration(milliseconds: widget.animationDuration ~/ 5),
opacity: _circleIconAlpha,
child: Icon(
activeIcon,
Expand All @@ -219,12 +222,12 @@ class FancyBottomNavigationState extends State<FancyBottomNavigation>
_initAnimationAndStart(double from, double to) {
_circleIconAlpha = 0;

Future.delayed(Duration(milliseconds: ANIM_DURATION ~/ 5), () {
Future.delayed(Duration(milliseconds: widget.animationDuration ~/ 5), () {
setState(() {
activeIcon = nextIcon;
});
}).then((_) {
Future.delayed(Duration(milliseconds: (ANIM_DURATION ~/ 5 * 3)), () {
Future.delayed(Duration(milliseconds: (widget.animationDuration ~/ 5 * 3)), () {
setState(() {
_circleIconAlpha = 1;
});
Expand Down
11 changes: 6 additions & 5 deletions lib/internal/tab_item.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ const double TEXT_OFF = 3;
const double TEXT_ON = 1;
const double ALPHA_OFF = 0;
const double ALPHA_ON = 1;
const int ANIM_DURATION = 300;

class TabItem extends StatelessWidget {
TabItem(
Expand All @@ -16,7 +15,8 @@ class TabItem extends StatelessWidget {
required this.title,
required this.callbackFunction,
required this.textColor,
required this.iconColor});
required this.iconColor,
this.animationDuration = 300});

final UniqueKey uniqueKey;
final String title;
Expand All @@ -25,6 +25,7 @@ class TabItem extends StatelessWidget {
final Function(UniqueKey uniqueKey) callbackFunction;
final Color textColor;
final Color iconColor;
final int animationDuration;

final double iconYAlign = ICON_ON;
final double textYAlign = TEXT_OFF;
Expand All @@ -40,7 +41,7 @@ class TabItem extends StatelessWidget {
height: double.infinity,
width: double.infinity,
child: AnimatedAlign(
duration: Duration(milliseconds: ANIM_DURATION),
duration: Duration(milliseconds: animationDuration),
alignment: Alignment(0, (selected) ? TEXT_ON : TEXT_OFF),
child: Padding(
padding: const EdgeInsets.all(8.0),
Expand All @@ -57,11 +58,11 @@ class TabItem extends StatelessWidget {
height: double.infinity,
width: double.infinity,
child: AnimatedAlign(
duration: Duration(milliseconds: ANIM_DURATION),
duration: Duration(milliseconds: animationDuration),
curve: Curves.easeIn,
alignment: Alignment(0, (selected) ? ICON_OFF : ICON_ON),
child: AnimatedOpacity(
duration: Duration(milliseconds: ANIM_DURATION),
duration: Duration(milliseconds: animationDuration),
opacity: (selected) ? ALPHA_OFF : ALPHA_ON,
child: IconButton(
highlightColor: Colors.transparent,
Expand Down