android - Flutterの別のCircularProgressIndicator内にCircularProgressIndicatorを配置する方法は?

Question

私はこれをやってみましたが、それは次々と終わってしまいました。次のCircularProgressIndicatorコードで試したように、内部にあるのではなく、互いに積み重ねられました。

body: Center(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            SizedBox(
              height: 200,
              width: 200,
              child: Column(
                children: <Widget>[
                  CircularProgressIndicator(
                backgroundColor: Colors.pinkAccent,
                strokeWidth: 30.0,
                value: 0.7,
                valueColor: AlwaysStoppedAnimation<Color>(Colors.black),
              ),
                  SizedBox(
                    height: 150,
                    width: 150,
                    child: CircularProgressIndicator(
                      backgroundColor: Colors.red,
                      strokeWidth: 10.0,
                      value: 0.7,
                      valueColor: AlwaysStoppedAnimation<Color>(Colors.black),
                    ),
                  ),
              ],
            ),
            ),
          ],
        ),
      ),

Answer 1

Stack ウィジェットを使用して、これらのウィジェットを互いに積み重ねる必要があります。

Stack(
    children: <Widget>[
      SizedBox(
        height: 200,
        width: 200,
        child: CircularProgressIndicator(
          backgroundColor: Colors.pinkAccent,
          strokeWidth: 30.0,
          value: 0.7,
          valueColor: AlwaysStoppedAnimation<Color>(Colors.black),
        ),
      ),
      Positioned(
        left: 25,
        top: 25,
        child: SizedBox(
          height: 150,
          width: 150,
          child: CircularProgressIndicator(
            backgroundColor: Colors.red,
            strokeWidth: 10.0,
            value: 0.7,
            valueColor: AlwaysStoppedAnimation<Color>(Colors.black),
          ),
        ),
      )
    ],
  ),

出力