如何使用Flutter创建以下UI

baubqpgj  于 2023-02-16  发布在  Flutter
关注(0)|答案(2)|浏览(107)

我尝试使用堆栈和其他容器创建,但得到的是正常行。

xdnvmnnf

xdnvmnnf1#

您可以尝试将Container的颜色设置为透明,而将Scaffold的背景色设置为透明。
这样容器的线条就会消失。

agyaoht7

agyaoht72#

此代码仅用于演示,您需要根据您的要求进行更新:

Scaffold(
      body: Center(
        child: Column(
          children: [
            SizedBox(height: 50),
            Container(
              height: 50,
              width: 250,
              decoration: BoxDecoration(
                color: Colors.blueGrey,
                borderRadius: BorderRadius.circular(30),
              ),
            ),
            Container(
              height: 100,
              width: double.infinity,
              color: Colors.blueGrey,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Container(
                    height: 100,
                    width: Get.width * 0.43,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.only(
                        bottomRight: Radius.circular(20),
                        topRight: Radius.circular(20),
                      ),
                      color: Colors.white,
                    ),
                  ),
                  Icon(Icons.calendar_month),
                  Container(
                    height: 100,
                    width: Get.width * 0.43,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.only(
                        bottomLeft: Radius.circular(20),
                        topLeft: Radius.circular(20),
                      ),
                      color: Colors.white,
                    ),
                  ),
                ],
              ),
            ),
            Container(
              height: 50,
              width: 350,
              decoration: BoxDecoration(
                color: Colors.blueGrey,
                borderRadius: BorderRadius.circular(30),
              ),
            ),
          ],
        ),
      ),
    );

相关问题