ai_progress:
circular progress
arc progress
linear progress
step progress
Dashboard progress
iOS-ai_progress
Android-ai_progress
:-
:-
macOS-ai_progress
Web-ai_progress
:-
:-
Use this package as a library
Add this to your package's pubspec.yaml file:
dependencies:
ai_progress: ^version
Or depending on
dependencies:
# ai_progress plugin.
ai_progress:
git:
url: https://github.com/pdliuw/ai_progress.git
You can install packages from the command line:
with Flutter:
Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.
Now in your Dart code, you can use:
import 'package:ai_progress/ai_progress.dart';
1. circular progress-square cap
ai_progress: circular-square
:-
Stack(
alignment: Alignment.center,
children: <Widget>[
Container(
width: 150,
height: 150,
padding: EdgeInsets.all(5),
child: CircularProgressIndicator(
value: _segmentValue / 10,
strokeWidth: 10.0,
valueColor: _colorTween,
),
),
Text("${_segmentValue / 10 * 100}%"),
],
),
2. circular progress-round cap
ai_progress: circular-round
:-
Stack(
alignment: Alignment.center,
children: <Widget>[
Container(
width: 150,
height: 150,
padding: EdgeInsets.all(5),
child: AirCircularStateProgressIndicator(
size: Size(150, 150),
value: _segmentValue / 10 * 100, //1~100
pathColor: Colors.white,
valueColor:
ColorTween(begin: Colors.grey, end: Colors.blue)
.transform(_segmentValue / 10),
pathStrokeWidth: 10.0,
valueStrokeWidth: 10.0,
useCenter: false,
filled: false,
),
),
Text("${_segmentValue / 10 * 100}%"),
],
),
ai_progress: circular-arc
:-
Stack(
alignment: Alignment.center,
children: <Widget>[
Container(
width: 150,
height: 150,
padding: EdgeInsets.all(5),
child: AirCircularStateProgressIndicator(
size: Size(150, 150),
value: _segmentValue / 10 * 100, //1~100
pathColor: Colors.white,
valueColor:
ColorTween(begin: Colors.grey, end: Colors.blue)
.transform(_segmentValue / 10),
pathStrokeWidth: 10.0,
valueStrokeWidth: 10.0,
useCenter: true,
filled: true,
),
),
Text("${_segmentValue / 10 * 100}%"),
],
),
4. linear progress-square
ai_progress: linear-square
:-
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
width: 150,
padding: EdgeInsets.all(5),
child: LinearProgressIndicator(
value: _segmentValue / 10,
valueColor: _colorTween,
),
),
Text("${_segmentValue / 10 * 100}%"),
],
),
ai_progress: linear-round
:-
Stack(
alignment: Alignment.center,
children: <Widget>[
Container(
width: 150,
height: 50,
padding: EdgeInsets.all(5),
child: AirLinearStateProgressIndicator(
size: Size(150, 150),
value: _segmentValue / 10 * 100, //1~100
valueColor:
ColorTween(begin: Colors.grey, end: Colors.blue)
.transform(_segmentValue / 10),
pathStrokeWidth: 10.0,
valueStrokeWidth: 10.0,
roundCap: true,
),
),
Text("${_segmentValue / 10 * 100}%"),
],
),
ai_progress: step-normal
:-
Row(
children: [
Container(
width: 90,
height: 50,
padding: EdgeInsets.all(0),
child: AirStepStateProgressIndicator(
size: Size(150, 150),
stepCount: _segmentChildren.length,
stepValue: _segmentValue,
valueColor:
ColorTween(begin: Colors.grey, end: Colors.blue)
.transform(_segmentValue / 10),
pathStrokeWidth: 10.0,
valueStrokeWidth: 10.0,
),
),
Text("${_segmentValue / 10 * 100}%"),
],
),
ai_progress: step-larger
:-
Row(
children: [
Container(
width: 250,
height: 50,
padding: EdgeInsets.all(0),
child: AirStepStateProgressIndicator(
size: Size(150, 150),
stepCount: _segmentChildren.length,
stepValue: _segmentValue,
valueColor:
ColorTween(begin: Colors.grey, end: Colors.blue)
.transform(_segmentValue / 10),
pathStrokeWidth: 30.0,
valueStrokeWidth: 30.0,
),
),
Text("${_segmentValue / 10 * 100}%"),
],
),
ai_progress: step-round
:-
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
clipBehavior: Clip.antiAlias,
decoration: ShapeDecoration(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(45),
bottomLeft: Radius.circular(45),
topRight: Radius.circular(45),
bottomRight: Radius.circular(45),
)),
),
width: 220,
height: 30.0,
child: AirStepStateProgressIndicator(
size: Size(150, 220),
stepCount: _segmentChildren.length,
stepValue: _segmentValue,
valueColor:
ColorTween(begin: Colors.grey, end: Colors.blue)
.transform(_segmentValue / 10),
pathStrokeWidth: 30.0,
valueStrokeWidth: 30.0,
),
),
Text("${_segmentValue / 10 * 100}%"),
],
),
ai_progress: dashboard-square
:-
Stack(
alignment: Alignment.center,
children: <Widget>[
Container(
width: 150,
height: 150,
padding: EdgeInsets.all(5),
child: AirDashboardStateProgressIndicator(
size: Size(150, 150),
value: _segmentValue / 10 * 100, //1~100
valueColor:
ColorTween(begin: Colors.grey, end: Colors.blue)
.transform(_segmentValue / 10),
pathStrokeWidth: 10,
valueStrokeWidth: 10,
gapDegree: 60,
roundCap: false,
),
),
Text("${_segmentValue / 10 * 100}%"),
],
),
ai_progress: dashboard-round
:-
Stack(
alignment: Alignment.center,
children: <Widget>[
Container(
width: 150,
height: 150,
padding: EdgeInsets.all(5),
child: AirDashboardStateProgressIndicator(
size: Size(150, 150),
value: _segmentValue / 10 * 100, //1~100
valueColor:
ColorTween(begin: Colors.grey, end: Colors.blue)
.transform(_segmentValue / 10),
pathStrokeWidth: 10,
valueStrokeWidth: 10,
gapDegree: 60,
roundCap: true,
),
),
Text("${_segmentValue / 10 * 100}%"),
],
),
want to look more?Click me,Look more
BSD 3-Clause License
Copyright (c) 2020, pdliuw
All rights reserved.