Custom Paint Circle Click In Flutter :
main.dart
import 'dart:math';
import 'dart:ui';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: CustomPainterUI());
}
}
class CustomPainterUI extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter custom paint'),
centerTitle: true,
),
body: HomeContent(),
);
}
}
class HomeContent extends StatefulWidget {
@override
_HomeContentState createState() => _HomeContentState();
}
class _HomeContentState extends State<HomeContent>
with TickerProviderStateMixin {
double percentage;
double newPercentage = 0.0;
AnimationController percentageAnimationController;
@override
void initState() {
super.initState();
setState(() {
percentage = 0.0;
});
percentageAnimationController = new AnimationController(
vsync: this, duration: new Duration(milliseconds: 1000))
..addListener(() {
setState(() {
percentage = lerpDouble(
percentage, newPercentage, percentageAnimationController.value);
});
});
}
@override
Widget build(BuildContext context) {
return Container(
width: 200,
height: 200,
child: CustomPaint(
foregroundPainter: MyPainter(
lineColor: Colors.amber,
completeColor: Colors.blueAccent,
completePercent: percentage,
width: 8.0),
child: new Padding(
padding: const EdgeInsets.all(8.0),
child: new RaisedButton(
color: Colors.purple,
splashColor: Colors.blueAccent,
shape: new CircleBorder(),
child: new Text("Click"),
onPressed: () {
setState(() {
percentage = newPercentage;
newPercentage += 10;
if (newPercentage > 100.0) {
percentage = 0.0;
newPercentage = 0.0;
}
percentageAnimationController.forward(from: 0.0);
});
}),
),
),
);
}
}
class MyPainter extends CustomPainter {
Color lineColor;
Color completeColor;
double completePercent;
double width;
MyPainter(
{this.lineColor, this.completeColor, this.completePercent, this.width});
@override
void paint(Canvas canvas, Size size) {
Paint line = Paint()
..color = lineColor
..strokeCap = StrokeCap.round
..style = PaintingStyle.stroke
..strokeWidth = width;
Paint complete = Paint()
..color = completeColor
..style = PaintingStyle.stroke
..strokeWidth = width;
Offset center = new Offset(size.width / 2, size.height / 2);
double radius = min(size.width / 2, size.height / 2);
canvas.drawCircle(center, radius, line);
double arcAngle = 2 * pi * (completePercent / 100);
canvas.drawArc(new Rect.fromCircle(center: center, radius: radius), -pi / 2,
arcAngle, false, complete);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return true;
}
}