preface

Flutter is Google’s mobile UI framework for quickly building high-quality native user interfaces on iOS and Android.

Nicholas Gaulbag, a famous IT expert, once said: The wheel is the ladder of IT progress! Popular frames are the same, with wheels pick one in a million! Flutter, a cross-platform development framework that has been on the rise for the last two years, has a smaller third-party ecosystem than other mature frameworks, but it has a lot of wheels. This series of articles select the wheels commonly used in daily APP development to share, so as to improve the efficiency of brick moving, and hope that the ecology of Flutter will become more and more perfect, with more and more wheels.

This series of articles has been prepared with over 50 wheel recommendations, working for reasons that try to produce an article every 1-2 days.

This series of articles is for those who already have some of the basics of FLUTTER

The body of the

The wheel

  • Wheel name: PERCENT_indicator
  • Overview of wheels: The Flutter is a round and linear progress bar.
  • Wheels by [email protected]
  • ★★★★ ★
  • ★★★
  • Effect preview:

Functions overview

  • Circular percentage progress
  • Linear percentage progress
  • Switch the animation
  • Customize the duration of the animation
  • Progress based on percentage values
  • Progress and background colors
  • Custom size
  • Left, right, or center subitems are used for linear percentage indicators
  • Circular percentage indicator on top, bottom or center widget
  • Use gradient

The installation

dependencies:
  percent_indicator: ^ 2.1.1 + 1
Copy the code
import 'package:percent_indicator/percent_indicator.dart';
Copy the code

use

Circular progress

Based on using

new CircularPercentIndicator(
    radius: 60.0./ / size
    lineWidth: 5.0.// indicate the line size
    percent: 1.0.// Current progress
    center: new Text("100%"),// The center widget can be text or other widgets how icon
    progressColor: Colors.green, // Progress bar color...). Header title + ICON content + background color: dartnew 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,
)
Copy the code

Header title + Animation:

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,
),
Copy the code

Bottom copy + animation + Rounded corner truncation:

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,
)
Copy the code

Linear progress

Basic use:

new LinearPercentIndicator(
    width: 300,
    lineHeight: 14.0,
    percent: 0.5,
    backgroundColor: Colors.grey,
    progressColor: Colors.blue,
),
Copy the code

Linear progress + Progress number:

new LinearPercentIndicator(
    width: 300,
    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,
)
Copy the code

Linear progress + progress number + left and right content + Animation + Rectangular borders:

new LinearPercentIndicator(
    width: 200,
    animation: true,
    animationDuration: 1000,
    lineHeight: 20.0,
    leading: new Text("Left side contents"),
    trailing: new Text("Content on the right"),
    percent: percent,
    center: Text((percent*100).toString()+The '%'),
    linearStrokeCap: LinearStrokeCap.butt,
    progressColor: Colors.red,
)
Copy the code

More usage can be customized by referring to the parameters in the wheel documentation.

At the end

  • Address of wheel warehouse: pub.flutter-io.cn/packages/pe…
  • Series demo source: github.com/826327700/f…