cupertino_progress_bar 0.1.0

  • Readme
  • Changelog
  • Example
  • Installing
  • new68

Cupertino Progress Bar for Flutter #

pub license: BSD build codecov

A progress bar includes a track that fills from left to right to show the progression of a task with a known duration. Progress bars are non-interactive, although they are often accompanied by a button for canceling the corresponding operation.

Screenshots #

LightDark
Light CupertinoProgressBarDark CupertinoProgressBar

Example #

CupertinoProgressBar(
  value: 0.77,
)

Guidelines #

Always report progress accurately. Don’t display inaccurate progress information just to make your app appear busy. Only use progress bars for tasks that are quantifiable. Otherwise, use an activity indicator.

Use progress bars for tasks with a well-defined duration. Progress bars are great for showing the status of a task, especially when it helps convey how much longer the task needs to complete.

Hide the unfilled portion of track in navigation bars and toolbars. By default, a progress bar’s track includes both filled and unfilled portions. When used in a navigation bar or toolbar, such as to denote a page loading, a progress bar should be configured to hide the unfilled portion of the track.

Consider customizing a progress bar’s appearance to match your app. A progress bar’s appearance can be adjusted to match your app’s design. You can specify, for example, a custom color for both the track and fill.

See also:

Usage #

To use this package, add cupertino_progress_bar as a dependency in your pubspec.yaml file.

[0.1.0] - 2020-06-13 #

  • Initial release.

example/lib/main.dart

import 'package:flutter/cupertino.dart';
import 'package:cupertino_progress_bar/cupertino_progress_bar.dart';

void main() => runApp(Container(child: ExampleApp()));

class ExampleApp extends StatefulWidget {
  @override
  _ExampleAppState createState() => _ExampleAppState();
}

class _ExampleAppState extends State<ExampleApp> {
  bool _dark = false;
  double _value = 0.77;

  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      debugShowCheckedModeBanner: false,
      theme: CupertinoThemeData(
        brightness: _dark ? Brightness.dark : Brightness.light,
      ),
      home: CupertinoPageScaffold(
        navigationBar: CupertinoNavigationBar(
          padding: EdgeInsetsDirectional.zero,
          middle: Stack(
            overflow: Overflow.visible,
            children: [
              Center(child: Text('CupertinoProgressBar')),
              Positioned(
                left: -8,
                right: -8,
                bottom: 0,
                child: CupertinoProgressBar(
                  value: _value,
                  trackColor: null,
                ),
              ),
              Positioned(
                top: 0,
                right: 0,
                bottom: 0,
                child: CupertinoSwitch(
                  value: _dark,
                  onChanged: (value) => setState(() => _dark = value),
                ),
              )
            ],
          ),
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Expanded(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text('${(_value * 100).round()}%'),
                  SizedBox(height: 48),
                  CupertinoProgressBar(
                    value: _value,
                  ),
                ],
              ),
            ),
            CupertinoSlider(
              value: _value,
              onChanged: (value) => setState(() => _value = value),
            ),
          ],
        ),
      ),
    );
  }
}

Use this package as a library

1. Depend on it

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


dependencies:
  cupertino_progress_bar: ^0.1.0

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

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

3. Import it

Now in your Dart code, you can use:


import 'package:cupertino_progress_bar/cupertino_progress_bar.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
35
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]
68
Learn more about scoring.

We analyzed this package on Jul 9, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.4
  • pana: 0.13.14
  • Flutter: 1.17.5

Analysis suggestions

Package not compatible with SDK dart

Because:

  • cupertino_progress_bar that is a package requiring null.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.7.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.12 1.14.13
meta 1.1.8 1.2.1
sky_engine 0.0.99
typed_data 1.1.6 1.2.0
vector_math 2.0.8 2.1.0-nullsafety
Dev dependencies
flutter_test