Custom gauge chart in Flutter - flutter

Question

I want to create something like this:
How can I do that in flutter? I can't find any similar lib for that.

Answer 1

You can create a custom CircularProgressIndicator using CustomPainter.
class CustomCircularProgress extends CustomPainter {
final double value;
CustomCircularProgress({required this.value});
#override
void paint(Canvas canvas, Size size) {
final center = Offset(size.width / 2, size.height / 2);
canvas.drawArc(
Rect.fromCenter(center: center, width: 170, height: 170),
vmath.radians(140),
vmath.radians(260),
false,
Paint()
..style = PaintingStyle.stroke
..color = Colors.black12
..strokeCap = StrokeCap.round
..strokeWidth = 20,
);
canvas.saveLayer(
Rect.fromCenter(center: center, width: 200, height: 200),
Paint(),
);
const Gradient gradient = SweepGradient(
startAngle: 1.25 * math.pi / 2,
endAngle: 5.5 * math.pi / 2,
tileMode: TileMode.repeated,
colors: <Color>[
Colors.blueAccent,
Colors.lightBlueAccent,
],
);
canvas.drawArc(
Rect.fromCenter(center: center, width: 170, height: 170),
vmath.radians(140),
vmath.radians(260 * value),
false,
Paint()
..style = PaintingStyle.stroke
..strokeCap = StrokeCap.round
..shader = gradient
.createShader(Rect.fromLTWH(0.0, 0.0, size.width, size.height))
..strokeWidth = 20,
);
canvas.restore();
}
#override
bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
}
Then use CustomPaint to render the CustomPainter on the Screen.
CustomPaint(painter: CustomCircularProgress(value: 0.75))
Complete Sample
import 'package:flutter/material.dart';
import 'package:vector_math/vector_math.dart' as vmath;
import 'dart:math' as math;
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
#override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
late AnimationController controller;
#override
void initState() {
controller = AnimationController(
vsync: this,
duration: const Duration(seconds: 5),
)..addListener(() {
setState(() {});
});
controller.repeat(reverse: true);
super.initState();
}
#override
void dispose() {
controller.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: CustomPaint(painter: CustomCircularProgress(value: controller.value)),
),
);
}
}
class CustomCircularProgress extends CustomPainter {
final double value;
CustomCircularProgress({required this.value});
#override
void paint(Canvas canvas, Size size) {
final center = Offset(size.width / 2, size.height / 2);
canvas.drawArc(
Rect.fromCenter(center: center, width: 170, height: 170),
vmath.radians(140),
vmath.radians(260),
false,
Paint()
..style = PaintingStyle.stroke
..color = Colors.black12
..strokeCap = StrokeCap.round
..strokeWidth = 20,
);
canvas.saveLayer(
Rect.fromCenter(center: center, width: 200, height: 200),
Paint(),
);
const Gradient gradient = SweepGradient(
startAngle: 1.25 * math.pi / 2,
endAngle: 5.5 * math.pi / 2,
tileMode: TileMode.repeated,
colors: <Color>[
Colors.blueAccent,
Colors.lightBlueAccent,
],
);
canvas.drawArc(
Rect.fromCenter(center: center, width: 170, height: 170),
vmath.radians(140),
vmath.radians(260 * value),
false,
Paint()
..style = PaintingStyle.stroke
..strokeCap = StrokeCap.round
..shader = gradient
.createShader(Rect.fromLTWH(0.0, 0.0, size.width, size.height))
..strokeWidth = 20,
);
canvas.restore();
}
#override
bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
}