flutter_fillbars

Description:

flutter fillbars

Fillbars #
flutter_fillbars is a simple flutter package that allows you to create a container which can
fill with or without an animation. Play with the shape of the container to make it more elliptical, or
use the preset to make it fully circular. You can apply a static color to it or use a list of color and
a Gradient will be created and applied to your Fillbar.

Contents #

Installation
Usage
Custom fillbars

Static fillbar
Animated fillbar
Periodic fillbar
Circular fillbar


Rotating a fillbar
Examples
Additional information

Installation #
Get this package by running this line in your local terminal:
$ flutter pub add flutter_fillbars: ^1.3.0
copied to clipboard
Or by adding this to pubspec.yaml:
flutter_fillbars: ^1.3.0
copied to clipboard
Usage #
A Fillbar is highly customizable. However I've create a few presets that will let you pick the Fillbar which suits your needs. Here are some usage examples
// Creates an half full Fillbar
const Fillbar(value: 50, width: 100, height: 20, fillColor: Colors.blue,)

// Creates a full Fillbar. If not given, the fillColor is set to the primary color.
const Fillbar.static(value: 100, width: 100, height: 20)
copied to clipboard
Custom fillbars #
The following code shows a custom fillbar.
const Fillbar(
value: 78,
height: 20,
width: 120,
fillColor: Colors.blue,
backgroundColor: Colors.grey,
externalMargin: EdgeInsets.all(10),
borderPadding: EdgeInsets.all(3),
borderWidth: 1.3,
radius: 12,
text: null
)
copied to clipboard

Static fillbars #
A static Fillbar the simplest type of Fillbar: it doesn't have an animation. This is made so you don't have to esplicitely put curve = null or duration = null if you don't want any animation.
Note that a value is required to be passed.
// Creates a full Fillbar
const Fillbar.static(value: 100, width: 100, height: 20, fillColor: Colors.amber)
copied to clipboard
Animated fillbar #
A fillbar can also be animated: the following code shows how to create a fully animated fillbar which, everytime the value is changed, will react by animating the fill process.
// Creates an animated fillbar
const Fillbar(
value: value,
height: 30,
width: 180,
fillColor: Colors.blue,
backgroundColor: Colors.grey,
radius: 12,
direction: Direction.toRight,
duration: Duration(seconds: 2),
curve: Curves.easeOutCubic,
text: null
)
copied to clipboard
Here is the result:

Periodic fillbar #
Creates an animated fillbar with a specific periodicity.
// Creates a periodic fillbar
Fillbar.periodic(
value: value,
height: 30,
width: 180,
fillColor: Colors.blue,
backgroundColor: Colors.grey,
radius: 12,
direction: Direction.toRight,
text: null
)
copied to clipboard

Circular fillbar #
Creates an circular fillbar with a specific fill direction and a radius.
Note that the value property should be between 0 - 2*PI (0 - 6.28...).
// Creates a simple circular fillbar
Fillbar.circular(
value: math.pi * 13 / 8,
radius: 50,
direction: Direction.antiClockWise
)
copied to clipboard

Rotating a fillbar #
Since version 1.3.0 it's possible to rotate fillbars. Let's go over some of the properties
rotationAngle: Specifies an angle at which the fillbar should be rotated
rotationPivot: Specifies the pivot of the rotation
rotationDuration: Specifies the duration of the rotation's animation.
rotationCurve: If specified animates the fillbar's rotation.
isRotationPeriodic: Specifies weather the animation should keep playing or just play once.
Examples #
See examples for some basic examples.
Additional information #
Please share and star this repository if you liked it.
If you want, you can even contribute, just open a pull-request and I'll be more than happy to review it.
Follow me on twitter

RoadMad #

✔️ Static Fillbar
✔️ Animated Fillbar
✔️ Periodic Fillbar
✔️ Simple Example
✔️ Text over Fillbar
✔️ Package up on Pub.dev
✔️ Added a circular Fillbar
✔️ Add a color gradient in fill area
✔️ Rotate the Fillbar