卡片内的左侧形状答案

【问题标题】：Left shape inside a card卡片内的左侧形状
【发布时间】：2020-12-07 11:24:44
【问题描述】：

我正在尝试制作这张卡片。但我不知道如何塑造绿色部分。有什么建议么？

【问题讨论】：

【解决方案1】：

在一行中创建一个容器，并给它装饰框和左上角和左下角的一些半径以及第二个子元素作为文本。您可以根据需要修改以下示例代码。

 Container(
          child: Row(
        children: [
          Container(
            decoration: BoxDecoration(
                color: Colors.green,
                borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(5),
                    bottomLeft: Radius.circular(5))),
            height: 20,
            width: 20,
          ),
          Text('data'),
        ],
      )),

【讨论】：

【解决方案2】：

正是我想要的。

class NotificationBanner extends StatelessWidget {
  final Radius radius = Radius.circular(10.0);
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Row(
        children: [
          Container(
            height: 100,
            width: 8,
            decoration: BoxDecoration(
              color: Colors.green,
              borderRadius: BorderRadius.only(
                topLeft: radius,
                bottomLeft: radius,
              ),
            ),
          ),
          Expanded(
            child: Container(
                height: 100,
                decoration: BoxDecoration(
                  color: kLightBlack,
                  borderRadius: BorderRadius.only(
                    topRight: radius,
                    bottomRight: radius,
                  ),
                ),
                child: Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 20.0),
                  child: Align(
                    alignment: Alignment.centerLeft,
                    child: Text(
                      'Some pretty message',
                      overflow: TextOverflow.ellipsis,
                      style: TextStyle(fontSize: 20.0),
                    ),
                  ),
                )),
          ),
        ],
      ),
    );
  }
}

【讨论】：