progress_bars

Circular progress bars with interesting animation movements.

Getting Started

To use this plugin, add progress_bars as a dependency in your pubspec.yaml file.

Circle Progress Bar

Circle Progress Bar has 5 properties :

  1. progressColor : Represents the Color of the arc progressing .
  2. backgroundColor : Represents the background of arc progressing .
  3. child : Represents the widget appearing in the center of progress bar .
  4. size : Represents the radius of the progress bar .
  5. arcWidth : Represents the sectorLength of arc .

Example :

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Page(),
      ),
    );
  }
}

class Page extends StatefulWidget {
  @override
  _PageState createState() => _PageState();
}

class _PageState extends State<Page> {
  String text = 'Press To Load';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Align(
      alignment: Alignment(0, 0.6),
      child: FlatButton(
        child: Text(
          text,
          style: TextStyle(
            color: Colors.white,
            fontSize: 15.0,
            fontWeight: FontWeight.bold,
          ),
        ),
        color: Colors.orange,
        onPressed: () {
          showDialog(
              context: context,
              barrierDismissible: false,
              builder: (context) {
                return Center(
                  child: CircleProgressBar(
                    backgroundColor: Colors.black54,
                    progressColor: Colors.orange,
                    size: 40,
                    child: SizedBox(
                      child: FlutterLogo(),
                    ),
                  ),
                );
              });
          Future.delayed(Duration(seconds: 10)).then(
            (value) {
              Navigator.pop(context);
              setState(
                () {
                  text = "LOADED";
                },
              );
            },
          );
        },
      ),
    ));
  }
}

Libraries

circle_progress_bar
circle_progress_painter
progress_bars