How to make a 4 level progress circle in Flutter?

Question

How to obtain something similar to this ? I was thinking I could use Stack, but I don't know how to get started

Answer 1

A simple example:

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyWidget(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Stack(
          children: const [
            CircularProgressIndicator(
              color: Colors.blue,
              value: 0.8,
            ),
            CircularProgressIndicator(
              color: Colors.red,
              value: 0.7,
            ),
            CircularProgressIndicator(
              color: Colors.green,
              value: 0.6,
            ),
            CircularProgressIndicator(
              color: Colors.yellow,
              value: 0.5,
            )
          ],
        ),
      ),
    );
  }
}

Output: