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 fillbar
  • Static fillbar
  • Animated fillbar
  • Periodic fillbar
  • Circular fillbar
• Examples
• Additional information

Installation #

Get this package by running this line in your local terminal:

$ flutter pub add flutter_fillbars: ^1.2.0

Or by adding this to pubspec.yaml:

flutter_fillbars: ^1.2.0

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)

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
)

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)

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
)

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
)

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
)

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