Fillbars #

flutter_fillbars is a simple flutter package that allows you to create a container which fills animatedly.

Contents #

• Installation
• Usage
  • Custom fillbar
  • Static fillbar
  • Animated fillbar
  • Periodic fillbar
• Examples
• Additional information

Installation #

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

$ flutter pub add flutter_fillbars: ^1.0.0

Or by adding this to pubspec.yaml:

flutter_fillbars: ^1.0.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
)

[A custom Fillbar]

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:

[A fully animated fillbar]

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
)

[A periodic fillbar]

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