percent_indicator 1.0.16

  • README.md
  • CHANGELOG.md
  • Example
  • Installing
  • Versions
  • 99

Percent Indicator #

Circular and Linear percent indicators

drawing drawing

Features #

  • Circle percent indicator
  • Linear percent indicator
  • Toggle animation
  • Custom duration of the animation
  • Progress based on a percentage value
  • Progress and background color
  • Custom size
  • Left , right or center child for Linear percent indicator
  • Top, bottom or center child for Circular percent indicator

Getting started #

You should ensure that you add the router as a dependency in your flutter project.

dependencies:
 percent_indicator: "^1.0.16"

You should then run flutter packages upgrade or update your packages in IntelliJ.

Example Project #

There is a example project in the example folder. Check it out. Otherwise, keep reading to get up and running.

Usage #

Circular percent indicator

Basic Widget

new CircularPercentIndicator(
                  radius: 60.0,
                  lineWidth: 5.0,
                  percent: 1.0,
                  center: new Text("100%"),
                  progressColor: Colors.green,
                )

Complete example

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(
        title: new Text("Circular Percent Indicators"),
      ),
          body: Center(
        child: ListView(
            children: <Widget>[
              new CircularPercentIndicator(
                radius: 100.0,
                lineWidth: 10.0,
                percent: 0.8,
                header: new Text("Icon header"),
                center: new Icon(
                  Icons.person_pin,
                  size: 50.0,
                  color: Colors.blue,
                ),
                backgroundColor: Colors.grey,
                progressColor: Colors.blue,
              ),
              new CircularPercentIndicator(
                radius: 130.0,
                animation: true,
                animationDuration: 1200,
                lineWidth: 15.0,
                percent: 0.4,
                center: new Text(
                  "40 hours",
                  style:
                      new TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0),
                ),
                circularStrokeCap: CircularStrokeCap.butt,
                backgroundColor: Colors.yellow,
                progressColor: Colors.red,
              ),
              new CircularPercentIndicator(
                radius: 120.0,
                lineWidth: 13.0,
                animation: true,
                percent: 0.7,
                center: new Text(
                  "70.0%",
                  style:
                      new TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0),
                ),
                footer: new Text(
                  "Sales this week",
                  style:
                      new TextStyle(fontWeight: FontWeight.bold, fontSize: 17.0),
                ),
                circularStrokeCap: CircularStrokeCap.round,
                progressColor: Colors.purple,
              ),
              Padding(
                padding: EdgeInsets.all(15.0),
                child: new CircularPercentIndicator(
                  radius: 60.0,
                  lineWidth: 5.0,
                  percent: 1.0,
                  center: new Text("100%"),
                  progressColor: Colors.green,
                ),
              ),
              Container(
                padding: EdgeInsets.all(15.0),
                child: new Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    new CircularPercentIndicator(
                      radius: 45.0,
                      lineWidth: 4.0,
                      percent: 0.10,
                      center: new Text("10%"),
                      progressColor: Colors.red,
                    ),
                    new Padding(
                      padding: EdgeInsets.symmetric(horizontal: 10.0),
                    ),
                    new CircularPercentIndicator(
                      radius: 45.0,
                      lineWidth: 4.0,
                      percent: 0.30,
                      center: new Text("30%"),
                      progressColor: Colors.orange,
                    ),
                    new Padding(
                      padding: EdgeInsets.symmetric(horizontal: 10.0),
                    ),
                    new CircularPercentIndicator(
                      radius: 45.0,
                      lineWidth: 4.0,
                      percent: 0.60,
                      center: new Text("60%"),
                      progressColor: Colors.yellow,
                    ),
                    new Padding(
                      padding: EdgeInsets.symmetric(horizontal: 10.0),
                    ),
                    new CircularPercentIndicator(
                      radius: 45.0,
                      lineWidth: 4.0,
                      percent: 0.90,
                      center: new Text("90%"),
                      progressColor: Colors.green,
                    )
                  ],
                ),
              )
            ]),
      ),
    );
  }

Linear percent indicator

Basic Widget

new LinearPercentIndicator(
                width: 140.0,
                lineHeight: 14.0,
                percent: 0.5,,
                backgroundColor: Colors.grey,
                progressColor: Colors.blue,
              ),

Complete example

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(
        title: new Text("Linear Percent Indicators"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Padding(
              padding: EdgeInsets.all(15.0),
              child: new LinearPercentIndicator(
                width: 140.0,
                lineHeight: 14.0,
                percent: 0.5,
                center: Text(
                  "50.0%",
                  style: new TextStyle(fontSize: 12.0),
                ),
                trailing: Icon(Icons.mood),
                linearStrokeCap: LinearStrokeCap.roundAll,
                backgroundColor: Colors.grey,
                progressColor: Colors.blue,
              ),
            ),
            Padding(
              padding: EdgeInsets.all(15.0),
              child: new LinearPercentIndicator(
                width: 170.0,
                animation: true,
                animationDuration: 1000,
                lineHeight: 20.0,
                leading: new Text("left content"),
                trailing: new Text("right content"),
                percent: 0.2,
                center: Text("20.0%"),
                linearStrokeCap: LinearStrokeCap.butt,
                progressColor: Colors.red,
              ),
            ),
            Padding(
              padding: EdgeInsets.all(15.0),
              child: new LinearPercentIndicator(
                width: MediaQuery.of(context).size.width - 50,
                animation: true,
                lineHeight: 20.0,
                animationDuration: 2000,
                percent: 0.9,
                center: Text("90.0%"),
                linearStrokeCap: LinearStrokeCap.roundAll,
                progressColor: Colors.greenAccent,
              ),
            ),
            Padding(
              padding: EdgeInsets.all(15.0),
              child: new LinearPercentIndicator(
                width: MediaQuery.of(context).size.width - 50,
                animation: true,
                lineHeight: 20.0,
                animationDuration: 2500,
                percent: 0.8,
                center: Text("80.0%"),
                linearStrokeCap: LinearStrokeCap.roundAll,
                progressColor: Colors.green,
              ),
            ),
            Padding(
              padding: EdgeInsets.all(15.0),
              child: Column(
                children: <Widget>[
                  new LinearPercentIndicator(
                    width: 100.0,
                    lineHeight: 8.0,
                    percent: 0.2,
                    progressColor: Colors.red,
                  ),
                  new LinearPercentIndicator(
                    width: 100.0,
                    lineHeight: 8.0,
                    percent: 0.5,
                    progressColor: Colors.orange,
                  ),
                  new LinearPercentIndicator(
                    width: 100.0,
                    lineHeight: 8.0,
                    percent: 0.9,
                    progressColor: Colors.blue,
                  )
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

You can follow me on twitter @diegoveloper

1.0.16 #

  • width is optional for LinearPercentIndicator widget,

1.0.15 #

  • Added addAutomaticKeepAlive property to preserve the state of the widget.
  • Added isRTL for LinearPercentIndicator widget.

1.0.14 #

  • Fixed bug using animateFromLastPercent. Thanks joelbrostrom

1.0.13 #

  • Padding removed from leading and trailing on LinearPercentIndicator, now you can use Expanded or Flexible.
  • Fixed animation when refresh the widget with different duration

1.0.12 #

  • animateFromLastPercent property was added for LinearPercentIndicator and CircularPercentIndicator

1.0.11 #

  • startAngle for CircularPercentIndicator was added

1.0.10 #

  • animation update bug fixed. Thanks @Tiagosito

1.0.9 #

  • padding property was added for LinearPercentIndicator

1.0.7, 1.0.8 #

  • alignment property was added for LinearPercentIndicator

1.0.5, 1.0.6 #

  • fillColor property was added to LinearPercentIndicator

1.0.1 - 1.0.4 #

  • Readme updated

1.0.0 #

  • Initial release

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:percent_indicator_example/sample_circular_page.dart';
import 'package:percent_indicator_example/sample_linear_page.dart';

void main() {
  runApp(new MaterialApp(home: new Scaffold(body: new SamplePage())));
}

class SamplePage extends StatefulWidget {
  @override
  _SamplePageState createState() => _SamplePageState();
}

class _SamplePageState extends State<SamplePage> {


  _openPage(Widget page){
      Navigator.push(
      context,
      new MaterialPageRoute(
        builder: (BuildContext context) => page,
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
      return Container(
              child: Center(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              MaterialButton(
                color: Colors.blueAccent,
                child: new Text("Circular Library"),
                onPressed: () => _openPage(SampleCircularPage()),
              ),
              Padding(
                padding: EdgeInsets.all(20.0),
              ),
              MaterialButton(
                color: Colors.blueAccent,
                child: new Text("Linear Library"),
                onPressed: () => _openPage(SampleLinearPage()),
              ),
            ],
          ),
        ),
      );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  percent_indicator: ^1.0.16

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter packages get

Alternatively, your editor might support flutter packages get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:percent_indicator/percent_indicator.dart';
  
Version Uploaded Documentation Archive
1.0.16 Apr 24, 2019 Go to the documentation of percent_indicator 1.0.16 Download percent_indicator 1.0.16 archive
1.0.15 Apr 13, 2019 Go to the documentation of percent_indicator 1.0.15 Download percent_indicator 1.0.15 archive
1.0.14 Mar 6, 2019 Go to the documentation of percent_indicator 1.0.14 Download percent_indicator 1.0.14 archive
1.0.13 Jan 26, 2019 Go to the documentation of percent_indicator 1.0.13 Download percent_indicator 1.0.13 archive
1.0.12 Jan 3, 2019 Go to the documentation of percent_indicator 1.0.12 Download percent_indicator 1.0.12 archive
1.0.11 Dec 22, 2018 Go to the documentation of percent_indicator 1.0.11 Download percent_indicator 1.0.11 archive
1.0.10 Nov 7, 2018 Go to the documentation of percent_indicator 1.0.10 Download percent_indicator 1.0.10 archive
1.0.9 Jul 31, 2018 Go to the documentation of percent_indicator 1.0.9 Download percent_indicator 1.0.9 archive
1.0.8 Jul 31, 2018 Go to the documentation of percent_indicator 1.0.8 Download percent_indicator 1.0.8 archive
1.0.7 Jul 31, 2018 Go to the documentation of percent_indicator 1.0.7 Download percent_indicator 1.0.7 archive

All 17 versions...

Popularity:
Describes how popular the package is relative to other packages. [more]
98
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
99
Learn more about scoring.

We analyzed this package on Apr 24, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.2.0
  • pana: 0.12.14
  • Flutter: 1.4.7

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Health suggestions

Format lib/linear_percent_indicator.dart.

Run flutter format to format lib/linear_percent_indicator.dart.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=1.19.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11
meta 1.1.6 1.1.7
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test