animated_button_bar 0.0.2+1
animated_button_bar: ^0.0.2+1 copied to clipboard

A highly customizable button bar with animation on selected item.

animated_button_bar #

AnimatedButtonBar is a flutter library that allows you to create a row of buttons with an animation on selection.

Getting started #

Add this to your app's pubspec.yaml file:

dependencies:  
  animated_button_bar: ^0.0.2

Usage #

Then you have to import the package with:

import 'package:animated_button_bar/animated_button_bar.dart';  

And use an AnimatedBarButton like this:

  Column(  
          mainAxisAlignment: MainAxisAlignment.center,  
          children: [  
            //inverted selection button bar  
            AnimatedButtonBar(  
              radius: 8.0,  
              padding: const EdgeInsets.all(16.0),  
              invertedSelection: true,  
              children: [  
                ButtonBarEntry(onTap: () => print('First item tapped'), child: Text('Day')),  
                ButtonBarEntry(onTap: () => print('Second item tapped'), child: Text('Week')),  
                ButtonBarEntry(onTap: () => print('Third item tapped'), child: Text('Month')),  
                ButtonBarEntry(onTap: () => print('Fourth item tapped'), child: Text('Year'))  
              ],  
            ),  
            //You can populate it with different types of widgets like Icon  
            AnimatedButtonBar(  
              radius: 32.0,  
              padding: const EdgeInsets.all(16.0),  
              backgroundColor: Colors.blueGrey.shade800,  
              foregroundColor: Colors.blueGrey.shade300,  
              elevation: 24,  
              borderColor: Colors.white,  
              borderWidth: 2,  
              innerVerticalPadding: 16,  
              children: [  
                ButtonBarEntry(onTap: () => print('First item tapped'), child: Icon(Icons.person)),  
                ButtonBarEntry(onTap: () => print('Second item tapped'), child: Icon(Icons.people)),  
              ],  
            ),  
          ],  
        ),  

Result #

parameters #

| parameter | description | default |
| -------------------------- | ------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| animationDuration | animation duration when tap | const Duration(milliseconds: 200) |
| backgroundColor | main color of the widget | Theme.of(context).backgroundColor |
| borderColor | color of the border | null |
| borderWidth | width of the border | borderColor != null ? 1.0 : 0.0; |
| children | A list of ButtonBarEntry to display | required |
| curve | the curve for the animation | Curves.fastOutSlowIn |
| elevation | double | 0 |
| foregroundColor | color for the selection | Theme.of(context).accentColor
| invertedSelection | bool | false | |
| radius | double | 0.0 |
| verticalPadding | double | 8.0 |

2
likes
130
pub points
18%
popularity

A highly customizable button bar with animation on selected item.

Repository (GitHub)
View/report issues

Documentation

API reference

Uploader

klyridol01@gmail.com

License

MIT (LICENSE)

Dependencies

flutter

More

Packages that depend on animated_button_bar