具有多種填充顏色的顫振半圓

Question

我想在 Flutter 中創建這個：

我知道你可以像這樣創建一個半圓。

但是我怎樣才能得到這些多種填充顏色呢？

我知道有辦法用LinearGradient完成這項工作。 （ 像這樣的東西）

但這可能有效，但我需要將每個顏色部分作為單獨的部分/小部件，因為我想在下一步中為它們設置動畫。

我被困在這里，不知道如何完成這項工作。 在這方面找不到任何東西。 任何幫助表示贊賞！

Answer 1

請嘗試以下代碼：

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Center(
            child: ClipRRect(
              borderRadius: BorderRadius.only(
                bottomLeft: Radius.circular(300),
                bottomRight: Radius.circular(300),
              ),
              child: Container(
                alignment: Alignment.center,
                height: 100,
                width: 200,
                child: Column(
                  children: [
                    Container(
                      height: 10,
                      color: Colors.red,
                    ),
                    Container(
                      height: 10,
                      color: Colors.yellow,
                    ),
                    Container(
                      height: 10,
                      color: Colors.green,
                    ),
                    Container(
                      height: 10,
                      color: Colors.red,
                    ),
                    Container(
                      height: 10,
                      color: Colors.yellow,
                    ),
                    Container(
                      height: 10,
                      color: Colors.green,
                    ),
                    Container(
                      height: 10,
                      color: Colors.red,
                    ),
                    Container(
                      height: 10,
                      color: Colors.yellow,
                    ),
                    Container(
                      height: 10,
                      color: Colors.green,
                    ),
                    Container(
                      height: 10,
                      color: Colors.red,
                    ),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

您將獲得如下輸出：

Answer 2

您可以使用 Custom Painter 來執行此操作，但我知道為每個顏色條設置動畫會很有挑戰性。 我已經能夠創造出你需要的東西

我使用 ClipRRect 小部件切出正方形 -> SemiCircle 的 bottomLeft 和 bottomRight 部分。

每個顏色條都是一個容器，由於您希望為每個條設置動畫，您可以輕松地將容器替換為 AnimatedContainer 並從那里開始。 您可能還需要使小部件對動畫有狀態。

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Assuming constraints here. 
    // Play with width and height values 
    const double widgetWidth = 100;
    const double widgetHeight = 60;
    // To get a semicircle
     const double bottomRadius = widgetWidth / 2;
    //Since we have 5 colors . Each color bars height is 60/5 = 12
    const double colorBarHeight = widgetHeight / 5;

return ClipRRect(
    borderRadius: const BorderRadius.only(
        bottomLeft: Radius.circular(bottomRadius),
        bottomRight: Radius.circular(bottomRadius)),
    child: SizedBox(
        width: widgetWidth,
        height: widgetHeight,
        child: Column(
          children: [
          Container(
              width: widgetWidth,height: colorBarHeight,color: Colors.green),
          Container(
              width: widgetWidth,height: colorBarHeight,color: Colors.orange),
          Container(
              width: widgetWidth,height: colorBarHeight,color: Colors.yellow),
          Container(
              width: widgetWidth, height: colorBarHeight, color: Colors.red),
          Container(
              width: widgetWidth, height: colorBarHeight, color: Colors.blue),
        ])));

} }