如何在Flutter中制作4级进度圈？

Question

如何获得类似的东西？我想我可以使用 Stack，但我不知道如何开始

Answer 1

一个简单的例子：

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,
            )
          ],
        ),
      ),
    );
  }
}

输出：