Last active
May 10, 2020 07:04
-
-
Save megamegax/145410e1586efd627d7c1bd7caca34ec to your computer and use it in GitHub Desktop.
flutter progressbar
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<h2>Progressbar</h2> | |
<div> | |
<canvas id="canvas" width="300" height="300"></canvas> | |
</div> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import 'package:flutter/material.dart'; | |
final Color primaryColor = Colors.orange; | |
final TargetPlatform platform = TargetPlatform.android; | |
void main() { | |
runApp( | |
MaterialApp( | |
debugShowCheckedModeBanner: false, | |
home: Scaffold( | |
body: Center(child: MyLinearProgressIndicator(currentProgress: 100))), | |
), | |
); | |
} | |
class MyLinearProgressIndicator extends StatefulWidget { | |
final double currentProgress; | |
final double height; | |
final Color foregroundColor; | |
final int duration = 2000; | |
MyLinearProgressIndicator( | |
{this.currentProgress, | |
this.height = 5, | |
this.foregroundColor = const Color(0xFFde8405)}); | |
@override | |
_LinearProgressIndicatorState createState() => | |
_LinearProgressIndicatorState(); | |
} | |
class _LinearProgressIndicatorState extends State<MyLinearProgressIndicator> | |
with SingleTickerProviderStateMixin { | |
AnimationController progressController; | |
Animation<double> animation; | |
Animation<Color> colorAnimation; | |
CurvedAnimation curve; | |
@override | |
void initState() { | |
super.initState(); | |
progressController = AnimationController( | |
vsync: this, duration: Duration(milliseconds: widget.duration)); | |
curve = CurvedAnimation(parent: progressController, curve: Curves.ease); | |
animation = | |
Tween<double>(begin: 0, end: widget.currentProgress).animate(curve) | |
..addListener(() { | |
setState(() {}); | |
}); | |
Color endColor; | |
if (widget.currentProgress <= 30) { | |
endColor = const Color(0xFFFF0000); | |
} else if (widget.currentProgress <= 50) { | |
endColor = const Color(0xFF00FF00); | |
} else { | |
endColor = const Color(0xFF0000FF); | |
} | |
colorAnimation = | |
ColorTween(begin: widget.foregroundColor, end: endColor).animate(curve) | |
..addListener(() { | |
setState(() {}); | |
}); | |
WidgetsBinding.instance.addPostFrameCallback((timeStamp) { | |
progressController.forward(); | |
}); | |
} | |
@override | |
Widget build(BuildContext context) { | |
return Row( | |
mainAxisAlignment: MainAxisAlignment.center, | |
children: <Widget>[ | |
Padding( | |
padding: const EdgeInsets.only(right: 16.0), | |
child: Text("${animation.value.floor()}%", | |
style: TextStyle( | |
fontWeight: FontWeight.bold, | |
fontSize: 12, | |
color: Color(0xFF333333))), | |
), | |
SizedBox( | |
height: widget.height, | |
width: 100, | |
child: Container( | |
color: Color(0xFFEBEBEB), | |
child: Padding( | |
padding: EdgeInsets.all(1.0), | |
child: Padding( | |
padding: EdgeInsets.only(right:100-animation.value), | |
child: Container( | |
color: colorAnimation.value, | |
))))), | |
], | |
); | |
} | |
@override | |
void dispose() { | |
progressController.dispose(); | |
super.dispose(); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment