Skip to content

Commit

Permalink
LinearGradient was added linear and circular percent indicator
Browse files Browse the repository at this point in the history
  • Loading branch information
@diegoveloper
diegoveloper committed May 11, 2019
1 parent 3914dfd commit 3a3afc4
Show file tree
Hide file tree
Showing 5 changed files with 88 additions and 78 deletions.
54 changes: 26 additions & 28 deletions example/lib/main.dart
View file
Expand Up @@ -3,7 +3,7 @@ import 'package:percent_indicator_example/sample_circular_page.dart';
import 'package:percent_indicator_example/sample_linear_page.dart';

void main() {
runApp(new MaterialApp(home: new Scaffold(body: new SamplePage())));
runApp(MaterialApp(home: Scaffold(body: SamplePage())));
}

class SamplePage extends StatefulWidget {
Expand All @@ -12,41 +12,39 @@ class SamplePage extends StatefulWidget {
}

class _SamplePageState extends State<SamplePage> {


_openPage(Widget page){
Navigator.push(
_openPage(Widget page) {
Navigator.push(
context,
new MaterialPageRoute(
MaterialPageRoute(
builder: (BuildContext context) => page,
),
);
}

@override
Widget build(BuildContext context) {
return Container(
child: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
MaterialButton(
color: Colors.blueAccent,
child: new Text("Circular Library"),
onPressed: () => _openPage(SampleCircularPage()),
),
Padding(
padding: EdgeInsets.all(20.0),
),
MaterialButton(
color: Colors.blueAccent,
child: new Text("Linear Library"),
onPressed: () => _openPage(SampleLinearPage()),
),
],
),
return Container(
child: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
MaterialButton(
color: Colors.blueAccent,
child: Text("Circular Library"),
onPressed: () => _openPage(SampleCircularPage()),
),
Padding(
padding: EdgeInsets.all(20.0),
),
MaterialButton(
color: Colors.blueAccent,
child: Text("Linear Library"),
onPressed: () => _openPage(SampleLinearPage()),
),
],
),
);
),
);
}
}
70 changes: 34 additions & 36 deletions example/lib/sample_circular_page.dart
View file
Expand Up @@ -10,123 +10,121 @@ class _SampleCircularPageState extends State<SampleCircularPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: new AppBar(
title: new Text("Circular Percent Indicators"),
appBar: AppBar(
title: Text("Circular Percent Indicators"),
),
body: Center(
child: ListView(children: <Widget>[
new CircularPercentIndicator(
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,
),
percent: 0.5,
center: Text("50%"),
circularStrokeCap: CircularStrokeCap.round,
backgroundColor: Colors.grey,
linearGradient: LinearGradient(
colors: [Colors.red, Colors.blue],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [Colors.orange, Colors.yellow],
),
),
new CircularPercentIndicator(
CircularPercentIndicator(
radius: 100.0,
lineWidth: 10.0,
percent: 0.8,
header: new Text("Icon header"),
center: new Icon(
header: Text("Icon header"),
center: Icon(
Icons.person_pin,
size: 50.0,
color: Colors.blue,
),
backgroundColor: Colors.grey,
progressColor: Colors.blue,
),
new CircularPercentIndicator(
CircularPercentIndicator(
radius: 130.0,
animation: true,
animationDuration: 2000,
lineWidth: 15.0,
startAngle: 45.0,
percent: 0.6,
center: new Text(
center: Text(
"40 hours",
style: new TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0),
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0),
),
circularStrokeCap: CircularStrokeCap.butt,
backgroundColor: Colors.yellow,
progressColor: Colors.red,
),
new CircularPercentIndicator(
CircularPercentIndicator(
radius: 120.0,
lineWidth: 13.0,
animation: true,
percent: 0.7,
animateFromLastPercent: true,
center: new Text(
center: Text(
"70.0%",
style: new TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0),
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0),
),
footer: new Text(
footer: Text(
"Sales this week",
style: new TextStyle(fontWeight: FontWeight.bold, fontSize: 17.0),
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 17.0),
),
circularStrokeCap: CircularStrokeCap.round,
progressColor: Colors.purple,
),
Padding(
padding: EdgeInsets.all(15.0),
child: new CircularPercentIndicator(
child: CircularPercentIndicator(
radius: 60.0,
lineWidth: 5.0,
percent: 1.0,
center: new Text("100%"),
center: Text("100%"),
progressColor: Colors.green,
),
),
Container(
padding: EdgeInsets.all(15.0),
child: new Row(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new CircularPercentIndicator(
CircularPercentIndicator(
radius: 45.0,
lineWidth: 4.0,
percent: 0.10,
center: new Text("10%"),
center: Text("10%"),
progressColor: Colors.red,
),
new Padding(
Padding(
padding: EdgeInsets.symmetric(horizontal: 10.0),
),
new CircularPercentIndicator(
CircularPercentIndicator(
radius: 45.0,
lineWidth: 4.0,
percent: 0.30,
center: new Text("30%"),
center: Text("30%"),
progressColor: Colors.orange,
),
new Padding(
Padding(
padding: EdgeInsets.symmetric(horizontal: 10.0),
),
new CircularPercentIndicator(
CircularPercentIndicator(
radius: 45.0,
lineWidth: 4.0,
animation: true,
animationDuration: 200,
percent: 0.30,
center: new Text("60%"),
center: Text("60%"),
progressColor: Colors.yellow,
),
new Padding(
Padding(
padding: EdgeInsets.symmetric(horizontal: 10.0),
),
new CircularPercentIndicator(
CircularPercentIndicator(
radius: 45.0,
lineWidth: 4.0,
percent: 0.90,
center: new Text("90%"),
center: Text("90%"),
progressColor: Colors.green,
)
],
Expand Down
2 changes: 1 addition & 1 deletion example/lib/sample_linear_page.dart
View file
Expand Up @@ -30,7 +30,7 @@ class _SampleLinearPageState extends State<SampleLinearPage> {
lineHeight: 14.0,
percent: 0.7,
center: Text(
"50.0%",
"70.0%",
style: TextStyle(fontSize: 12.0),
),
trailing: Icon(Icons.mood),
Expand Down
23 changes: 20 additions & 3 deletions lib/circular_percent_indicator.dart
View file
Expand Up @@ -233,12 +233,29 @@ class CirclePainter extends CustomPainter {
canvas.drawCircle(center, radius, _paintBackground);

if (linearGradient != null) {
/*
_paintLine.shader = SweepGradient(
startAngle: 0,
endAngle: 2 * pi - pi / 2,
center: FractionalOffset.center,
startAngle: math.radians(-90.0 + startAngle),
endAngle: math.radians(progress),
//tileMode: TileMode.mirror,
colors: linearGradient.colors)
.createShader(
Rect.fromPoints(Offset.zero, Offset(size.width, size.height)));
Rect.fromCircle(
center: center,
radius: radius,
),
);*/
_paintLine.shader = LinearGradient(
colors: linearGradient.colors,
begin: linearGradient.begin,
end: linearGradient.end,
).createShader(
Rect.fromCircle(
center: center,
radius: radius,
),
);
}

canvas.drawArc(
Expand Down
17 changes: 7 additions & 10 deletions lib/linear_percent_indicator.dart
View file
Expand Up @@ -252,24 +252,21 @@ class LinearPainter extends CustomPainter {
final end = Offset(size.width, size.height / 2);
canvas.drawLine(start, end, _paintBackground);
if (isRTL) {
final xProgress = size.width - size.width * progress;
if (linearGradient != null) {
_paintLine.shader = linearGradient.createShader(Rect.fromPoints(
Offset(size.width, size.height),
Offset(size.width - size.width * progress, size.height)));
Offset(size.width, size.height), Offset(xProgress, size.height)));
}

canvas.drawLine(
end,
Offset(size.width - (size.width * progress), size.height / 2),
_paintLine);
canvas.drawLine(end, Offset(xProgress, size.height / 2), _paintLine);
} else {
final xProgress = size.width * progress;
if (linearGradient != null) {
_paintLine.shader = linearGradient.createShader(Rect.fromPoints(
Offset.zero, Offset(size.width * progress, size.height)));
_paintLine.shader = linearGradient.createShader(
Rect.fromPoints(Offset.zero, Offset(xProgress, size.height)));
}

canvas.drawLine(
start, Offset(size.width * progress, size.height / 2), _paintLine);
canvas.drawLine(start, Offset(xProgress, size.height / 2), _paintLine);
}
}

Expand Down

0 comments on commit 3a3afc4

Please sign in to comment.