Flutter 如何设置堆栈小部件的样式

Question

如何在 Flutter 中设置 Stack 小部件的样式以获得这样的布局

Answer 1

1. 您可以使用Stack 小部件将两个视图放在一起。
2. 将boxShadow 应用于较小的容器，使其具有视图中存在的那种效果。

---

我添加了一个演示：

Stack(
      children: [
        Container(
          height: 80,
          width: 80,
          decoration: new BoxDecoration(
            shape: BoxShape.circle,
            color: Colors.purple,
          ),
          child: Center(
            child: Text(
              'b',
              style: TextStyle(
                fontSize: 50,
                color: Colors.white,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        ),
        Positioned(
          bottom: 0, // change the values to preferred values
          right: 5, // change the values to preferred values
          child: Container(
            height: 25,
            width: 25,
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              color: Colors.white,
              boxShadow: [
                BoxShadow(
                  offset: Offset(0.0, 1),
                  spreadRadius: 2,
                  blurRadius: 2,
                  color: Colors.black.withOpacity(
                    0.2,
                  ),
                ),
              ],
            ),
            child: Center(
              child: Icon(
                Icons.camera,
                size: 15,
              ),
            ),
          ),
        ),
      ],
    );

结果：