在小部件中使用圆形创建颜色 - Flutter答案

【问题标题】：Create color with round in a widget - Flutter在小部件中使用圆形创建颜色 - Flutter
【发布时间】：2020-11-29 06:42:54
【问题描述】：

我无法实现香蕉图像下方的这种圆形设计。

当我尝试添加渐变时，它不会产生明显的差异。

我如何在 Flutter 中实现这一点。

【问题讨论】：

尝试堆栈和定位小部件

标签： flutter flutter-layout

【解决方案1】：

您只需要一个Stack 小部件并放置一个圆形的Container。

要创建一个圈子，您可以使用Container 的shape 属性并将其设置为BoxShape.circle。然后，将剩余的小部件放在一起。

以下代码的结果输出如下：

您的代码应如下所示：

return Stack(
  children: [
    // Green Background
    Container(
      height: 400,
      decoration: BoxDecoration(
        color: Colors.green,
      ),
    ),

    // Circle
    Positioned(
      right: -50,
      top: -50,
      child: Container(
        height: 300,
        width: 300,
        decoration: BoxDecoration(
          shape: BoxShape.circle,
          color: Colors.black12,
        ),
      ),
    ),

    Positioned(
      top: 20,
      right: 20,
      left: 20,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            children: [
              Expanded(
                  child: TextFormField(
                decoration: InputDecoration(
                  filled: true,
                  hintText: 'Search for products',
                ),
              )),
              IconButton(icon: Icon(Icons.search), onPressed: () {}),
            ],
          ),
          Container(
            margin: const EdgeInsets.only(top: 40),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Expanded(
                  child: Text('BANANA 5% OFF',
                      style: const TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 30,
                      ),),
                ),
                Expanded(
                  child: Container(
                    height: 150,
                    width: 150,
                    color: Colors.white10,
                    alignment: Alignment.center,
                    child: Text('Image'),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    ),
  ],
);

【讨论】：