当前位置:网站首页>Fluent round or linear progress bar

Fluent round or linear progress bar

2020-12-16 08:47:22 osc_ 0atwpkmx

Preface

Flutter It's Google's mobile UI frame , You can quickly iOS and Android Build a high quality native user interface on .

IT Nicholas, who is famous in the world · Galbag once said : The wheel is IT The ladder of progress ! Hot frames are the same , It's easy to choose one out of ten thousand wheels !Flutter As a cross platform development framework that started to rise in the past two years , Compared with other mature frameworks, the third-party ecosystem is still slightly inadequate , But there are already a lot of wheels . This series selects daily app Develop common wheels to share , To improve the efficiency of brick handling , At the same time, I hope flutter Our ecology is becoming more and more perfect , More and more wheels .

This series of articles prepares more than 50 Wheel recommendation , Work reason , Try to do everything possible 1-2 An article came out of the sky .

tip: This series of articles is suitable for the existing parts flutter Basic developers , To get started, please poke :flutter Official website

Text

wheel

  • Name of wheel :percent_indicator
  • Wheel overview :flutter A circular and linear progress bar .
  • The wheel author :diego.velasquez.lopez@gmail.com
  • Recommend index :****
  • Commonly used index :***
  • Results the preview : design sketch

    design sketch

Function Overview

  • Circle percentage progress
  • Linear percentage progress
  • Switch animation
  • Custom animation duration
  • Percentage based progress
  • Progress and background color
  • Custom size
  • Left , The right or center child is used for the linear percentage indicator
  • The top of the circular percentage indicator , Bottom or center widget
  • Use gradient colors

install

yaml

1
2
dependencies:
  percent_indicator: ^2.1.1+1

dart

1
import 'package:percent_indicator/percent_indicator.dart';

Use

Circular progress

Based on using

dart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
new CircularPercentIndicator(
    radius: 60.0, // size 
    lineWidth: 5.0,// Indicates the line size 
    percent: 1.0,// Current progress 
    center: new Text("100%"),// center widget  It can be words   Or others widget  how icon
    progressColor: Colors.green, // Progress bar color 
    ....
)
 Head title +icon Content + Background color :
```dart
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,
)

Head title + Animation :

dart

1
2
3
4
5
6
7
8
9
10
11
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,
),

Bottom copy + Animation + The rounded corners are truncated :

dart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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,
)

Linear progress

Based on using :

dart

1
2
3
4
5
6
7
new LinearPercentIndicator(
    width: 300,
    lineHeight: 14.0,
    percent: 0.5,
    backgroundColor: Colors.grey,
    progressColor: Colors.blue,
),

Linear progress + Progress figures :

dart

1
2
3
4
5
6
7
8
9
10
11
12
13
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,
)

Linear progress + Progress figures + Left and right content + Animation + Rectangular border :

dart

1
2
3
4
5
6
7
8
9
10
11
12
new LinearPercentIndicator(
    width: 200,
    animation: true,
    animationDuration: 1000,
    lineHeight: 20.0,
    leading: new Text(" Left side content "),
    trailing: new Text(" Right side content "),
    percent: percent,
    center: Text((percent*100).toString()+'%'),
    linearStrokeCap: LinearStrokeCap.butt,
    progressColor: Colors.red,
)

For more usage, please refer to the parameter customization in the wheel document .

ending

版权声明
本文为[osc_ 0atwpkmx]所创,转载请带上原文链接,感谢
https://chowdera.com/2020/12/20201216084633654m.html

随机推荐