Open source Flutter package, simple circular progress bar.

Overview

Simple circular progress bar

Open source Flutter package, simple circular progress bar.

Getting Started

Installing

Add in pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  simple_circular_progress_bar: ^1.0.1

Now in your code, you can import:

import 'package:simple_circular_progress_bar/simple_circular_progress_bar.dart';

Basic examples

See the full example here. Most of the examples are in the rows_in_progress_bar_example folder.

Example numbers correspond to their numbers in the code. To quickly find examples in the repository, look in the code: 'EXAMPLE CODE'.

Colors

Example 01, 02, 03

Dart code
// Example 1
SimpleCircularProgressBar(
    progressColors: const [Colors.cyan],
)

// Example 2
SimpleCircularProgressBar(
    progressColors: const [Colors.cyan, Colors.purple],
),

// Example 3
SimpleCircularProgressBar(
    progressColors: const [
        Colors.cyan,
        Colors.green,
        Colors.amberAccent,
        Colors.redAccent,
        Colors.purpleAccent
    ],
    backColor: Colors.blueGrey,
),

Start angle

Example 04, 05, 06

Dart code
// Example 4
SimpleCircularProgressBar(
    startAngle: 45,
),

// Example 5
SimpleCircularProgressBar(
    startAngle: 90,
),

// Example 6
SimpleCircularProgressBar(
    startAngle: -180,
),
 

Thickness of the lines

Example 07, 08, 09

Dart code
// Example 7
SimpleCircularProgressBar(
    size: 80,
    progressStrokeWidth: 25,
    backStrokeWidth: 25,
),

// Example 8
SimpleCircularProgressBar(
    progressStrokeWidth: 20,
    backStrokeWidth: 10,
),

// Example 9
SimpleCircularProgressBar(
    backStrokeWidth: 0,
),

Merge mode

Example 10, 11, 12

Dart code
// Example 10
SimpleCircularProgressBar(
    progressColors: const [Colors.cyan],
    mergeMode: true,
),

// Example 11
SimpleCircularProgressBar(
    progressColors: const [Colors.cyan],
    fullProgressColor: Colors.deepOrangeAccent,
    mergeMode: true,
),

// Example 12
SimpleCircularProgressBar(
    progressColors: const [Colors.cyan, Colors.purpleAccent],
    mergeMode: true,
),

Animation time

Example 13, 14, 15

If you don't need animation, set animationDuration = 0.

Dart code
// Example 13
SimpleCircularProgressBar(
    mergeMode: true,
    animationDuration: 1,
),

// Example 14
SimpleCircularProgressBar(
    mergeMode: true,
    animationDuration: 3,
),

// Example 15
SimpleCircularProgressBar(
    mergeMode: true,
    animationDuration: 6,
),

Text

Example 16, 17, 18

Dart code
// Example 16
SimpleCircularProgressBar(
    mergeMode: true,
    onGetText: (double value) {
        return Text('${value.toInt()}%');
    },
),

// Example 17
SimpleCircularProgressBar(
    valueNotifier: valueNotifier,
    mergeMode: true,
    onGetText: (double value) {
        return Text(
            '${value.toInt()}',
            style: const TextStyle(
                fontSize: 30,
                fontWeight: FontWeight.bold,
                color: Colors.white,
            ),
        );
    },
),

// Example 18
SimpleCircularProgressBar(
    valueNotifier: valueNotifier,
    mergeMode: true,
    onGetText: (double value) {
        TextStyle centerTextStyle = TextStyle(
            fontSize: 30,
            fontWeight: FontWeight.bold,
            color: Colors.greenAccent.withOpacity(value * 0.01),
        );
        
        return Text(
            '${value.toInt()}',
            style: centerTextStyle,
        );
    },
),

Value Notifier Example

Example value notifier

You can read about how ValueNotifier works here.

The source code of the example can be found here.

Parameters description

Parameter Default Description
size
double
100 Widget size.
maxValue
double
100 The maximum value of the progress bar. The values will vary from 0 to [maxValue].
startAngle
double
0 The angle from which the countdown of progress begins.
progressStrokeWidth
double
15 Thickness of the progress line.
backStrokeWidth
double
15 Line thickness of the background circle. If you don't need a background circle, set this parameter to 0.
progressColors
List
Progress bar can be either with or without a gradient. For a gradient, specify more than one color in the [progressColors] field and if a gradient is not needed specify only one color.
fullProgressColor
Color
The color of the circle at 100% value. It only works when [mergeMode] equal to true.
backColor
Color
The color of the background circle.
animationDuration
int
6 Animation duration in seconds. If you don't need animation, set this parameter to 0.
mergeMode
bool
false When this mode is enabled the progress bar with a 100% value forms a full circle.
valueNotifier
ValueNotifier
The object designed to update the value of the progress bar. By default, creates a ValueNotifier with the maximum value.
onGetText
Text Function(double)
Callback to generate a new Text widget located in the center of the progress bar. The callback input is the current value of the progress bar.

YouTube video

You can see how the application works from the example in this video.

You might also like...

Custom bottom bar - A bottom tool bar that can be swiped left or right to expose more tools.

Custom bottom bar - A bottom tool bar that can be swiped left or right to expose more tools.

custom_bottom_bar A bottom tool bar that can be swiped left or right to expose more tools. usage Create your custom bottom bars with up to four custom

Jan 26, 2020

This is a JazzCash UI clone ( Modern Wallet App in Pakistan), implementing modern app bar animmation. One can take a concept of making app bar with animation.

jazzcash_ui This is a JazzCash UI clone ( Modern Wallet App in Pakistan), implementing modern app bar animmation. One can take a concept of making app

Nov 27, 2022

A customizable Flutter library that provides a circular context menu

A customizable Flutter library that provides a circular context menu

Flutter Pie Menu šŸ„§ A customizable Flutter library that provides a circular context menu similar to Pinterest's. Usage Wrap the widget that will react

Jan 4, 2023

Flutter circular text widget

Flutter circular text widget

Circular Text Widget Installation Add dependency in pubspec.yaml: dependencies: flutter_circular_text: "^0.3.1" Import in your project: import 'pack

Dec 28, 2022

A customizable circular slider for Flutter.

A customizable circular slider for Flutter.

flutter_circular_slider A customizable circular slider for Flutter. Getting Started Installation Basic Usage Constructor Use Cases Installation Add fl

Nov 14, 2022

This is an open source Tips & Tricks for Flutter, that helps flutter Developers write simple but powerful dart codes.

Showcasing-flutter - This is an open source Tips & Tricks for Flutter, that helps flutter Developers write simple but powerful dart codes.

Jan 4, 2022

A beautiful, secure and simple authenticator app that supports multiple protocols and services. Free and open source. Written in Flutter and Dart.

A beautiful, secure and simple authenticator app that supports multiple protocols and services. Free and open source. Written in Flutter and Dart.

OpenAuth A beautiful, secure and simple authenticator app that supports multiple protocols and services. Free and open source. Written in Flutter and

Oct 5, 2022

This is a simple open source project where you can easily contribute by uploading algorithms that are not specified in the list.

This is a simple open source project where you can easily contribute by uploading algorithms that are not specified in the list.

Support this project by giving it a thumbs up! AlgoBook A new Flutter application for algorithms. This app is mainly to refer to the algorithms that a

Jul 23, 2022

A simple flutter app that downloads a file from the internet, shows a custom-made download progress dialog and saves the file to device's internal storage

http_downloader A simple flutter app that downloads a file from the internet using the http plugin. It has a custom-designed progress dialog which dis

Apr 6, 2021
Comments
  • Roadmap

    Roadmap

    • [x] Add tests.
    • [x] Go to Flutter 3.0.
    • [x] Add an indication of the animation time to the millisecond accuracy (only on git).
    • [ ] Add styles for line endings.
    • [ ] Add sweep angle (for arc).
    • [ ] Add error messages in debug mode.

    Tasks are sorted in order of priority. The first is the highest priority.

    opened by Nulllix 0
Releases(v1.0.2)
Owner
null
Flutter package to diplay progress through a milestone progress widget

milestone_progress Flutter package for IOS and Android to display progress through milestone progress widget. Screenshots ## Usage [Example]https://gi

Harpreet Singh 16 Aug 4, 2020
A simple modal progress HUD (heads-up display, or progress indicator) for flutter

modal_progress_hud A simple widget wrapper to enable modal progress HUD (a modal progress indicator, HUD = Heads Up Display) Inspired by this article.

Maurice McCabe 157 Nov 22, 2022
Open source Flutter package, bar indicator made of a series of selected and unselected steps

Step Progress Indicator Open source Flutter package, bar indicator made of a series of selected and unselected steps. Made by Sandro Maglione, check o

Sandro Maglione 138 Dec 15, 2022
Wave progress - A custom wave progress widget

wave_progress_widget A customable wave progress widget Preview How to use Add this to your package's pubspec.yaml file: dependencies: wave_progress_

idan ben shimon 41 Jul 18, 2022
CircularProfileAvatar is a Flutter package which allows developers to implement circular profile avatar

CircularProfileAvatar is a Flutter package which allows developers to implement circular profile avatar with border, overlay, initialsText and many other awesome features, which simplifies developers job. It is an alternative to Flutter's CircleAvatar Widget.

Muhammad Adil 85 Oct 5, 2022
A Flutter package to create a nice circular menu using a Floating Action Button.

FAB Circular Menu A Flutter package to create a nice circular menu using a Floating Action Button. Inspired by Mayur Kshirsagar's great FAB Microinter

Mariano Cordoba 198 Jan 5, 2023
Flutter-nav-bottom-bar-tutorial - A flutter bottom navigation bar tutorial

Flutter Bottom Navigation Bar Tutorial A tutorial with various Flutter bottom na

Aleyna Eser 2 Oct 25, 2022
A flutter plugin about qr code or bar code scan , it can scan from file态url态memory and camera qr code or bar code .Welcome to feedback your issue.

r_scan A flutter plugin about qr code or bar code scan , it can scan from file态url态memory and camera qr code or bar code .Welcome to feedback your iss

PengHui Li 112 Nov 11, 2022
Starlight search bar - Starlight search bar with flutter

starlight_search_bar If you find the easiest way to search your item, this is fo

Ye Myo Aung 1 Apr 20, 2022
Animation nav bar - Flutter Animated Navigation Bar

Flutter Animated Navigation Bar Getting Started This project is a starting point

Sudesh Nishshanka Bandara 23 Dec 30, 2022