gradient_arc_painter.dart

import 'dart:math';
import 'dart:ui' as ui;

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

const darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  var progress = 0.8;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Container(
              decoration: BoxDecoration(
                border: Border.all(color: Colors.black12),
              ),
              child: CustomPaint(
                painter: ProgressIndicator(progress),
                child: SizedBox.square(
                  dimension: 200,
                  child: Center(
                    child: Text(
                      '${(progress * 100).floor()}%',
                      style: const TextStyle(
                        color: Color(0xff8b0075),
                        fontSize: 40.0,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                ),
              ),
            ),
            SizedBox(
              width: 250,
              child: Slider(
                value: progress,
                onChanged: (value) {
                  setState(() {
                    progress = value;
                  });
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class ProgressIndicator extends CustomPainter {
  ProgressIndicator(this.progress);

  final double progress;

  @override
  void paint(Canvas canvas, Size size) {
    const thickness = 24.0;
    const sweepAngle = 13 * pi / 8;
    const startAngle = -pi / 2 - sweepAngle / 2;
    final rect = Offset.zero & size;

    final paint = Paint()
      ..strokeWidth = thickness
      ..strokeCap = StrokeCap.round
      ..style = PaintingStyle.stroke
      ..shader = ui.Gradient.linear(
        rect.topLeft,
        rect.topRight,
        [
          const Color(0xff8b0075),
          const Color(0xffff563c),
        ],
      );

    canvas.drawArc(
      rect.deflate(thickness / 2),
      startAngle,
      max(sweepAngle * progress, precisionErrorTolerance),
      false,
      paint,
    );

    canvas.saveLayer(rect, Paint()..color = Colors.white54);

    canvas.drawArc(
      rect.deflate(thickness / 2),
      startAngle,
      sweepAngle,
      false,
      paint,
    );

    canvas.restore();
  }

  @override
  bool shouldRepaint(ProgressIndicator oldDelegate) =>
      progress != oldDelegate.progress;
}