Last updated:
0 purchases
animated button bar
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
copied to clipboard
Usage #
Then you have to import the package with:
import 'package:animated_button_bar/animated_button_bar.dart';
copied to clipboard
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)),
],
),
],
),
copied to clipboard
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
For personal and professional use. You cannot resell or redistribute these repositories in their original state.
There are no reviews.