Flutter – FillBars

Flutter, Google’s UI toolkit for building natively compiled applications for mobile, web, and desktop from a single codebase, offers a plethora of widgets and tools to create visually appealing and interactive user interfaces. One such versatile widget is the FillBar, a fundamental component for visualizing data, progress, or any value within a defined range. In this article, we’ll explore FillBars in Flutter, their functionality, and how to implement them effectively in applications.

FillBars, as the name suggests, are widgets that visually represent a value’s proportion within a specified range. They are widely used to display progress bars, completion percentages, or any data that can be quantified. FillBars provide a clear visual cue to users about the completion status of a task or the relative magnitude of a value.  A sample video is given below to get an idea about what we are going to do in this article.

Step-by-Step Implementation

Step 1: Add the required package

To use the package first we need to install it, to do so add the package under the dependencies section in the pubspec.yaml file.

Dart

dependencies:
  flutter_fillbars: ^1.0.1

Then, run pub get in the terminal to install it.

Step 2: Import the Library

Import the library in main.dart to use fillbar library:

Dart

import 'package:flutter_fillbars/flutter_fillbars.dart';

Step 3: Use Fillbar() widget to create different types of fillbars

Currently, flutter_fillbars support – Static fillbar, Animated fillbar, Periodic fillbar, Simple Example, and Text over fillbar. Within the Column widget, create multiple Fillbar widgets where each Fillbar has specific properties such as value (completion percentage), height, width, fillColor, backgroundColor, radius, direction, duration, curve, and optional text. These properties define the appearance and behavior of the Fillbars.

Dart

import 'package:flutter/material.dart';
import 'package:flutter_fillbars/flutter_fillbars.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'Flutter Demo',
        theme: ThemeData(
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.green),
          useMaterial3: true,
        ),
        home: Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.green,
            title: const Text(
              "Flutter Fillbars",
              style: TextStyle(color: Colors.white),
            ),
          ),
          body: const Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Fillbar(
                    value: 50,
                    height: 30,
                    width: 180,
                    fillColor: Colors.green,
                    backgroundColor: Colors.greenAccent,
                    radius: 12,
                    direction: Direction.toRight,
                    duration: Duration(seconds: 20),
                    curve: Curves.easeIn,
                    text: null),

                Fillbar(
                    value: 180,
                    height: 30,
                    width: 180,
                    fillColor: Colors.green,
                    backgroundColor: Colors.greenAccent,
                    radius: 12,
                    direction: Direction.toRight,
                    duration: Duration(seconds: 20),
                    curve: Curves.easeOutCirc,
                    text: null),

                Fillbar.periodic(
                    value: 70,
                    height: 30,
                    width: 180,
                    fillColor: Colors.green,
                    backgroundColor: Colors.greenAccent,
                    radius: 12,
                    direction: Direction.toLeft,
                    text: null),

                Fillbar.periodic(
                    value: 70,
                    height: 30,
                    width: 180,
                    fillColor: Colors.green,
                    backgroundColor: Colors.greenAccent,
                    radius: 12,
                    direction: Direction.toRight,
                    text: null),
                    Fillbar(
                    value: 90,
                    height: 30,
                    width: 180,
                    fillColor: Colors.green,
                    backgroundColor: Colors.greenAccent,
                    radius: 12,
                    direction: Direction.toRight,
                    duration: Duration(seconds: 10),
                    curve: Curves.easeIn,
                    text: Text("Filled",style: TextStyle(color: Colors.white),)),
              ],
            ),
          ),
        ));
  }
}

Output: