flutter 我希望实现此入职屏幕

wj8zmpe1  于 2023-02-05  发布在  Flutter
关注(0)|答案(1)|浏览(111)

onboarding screen
我试过这种方法,但不能有正确的方式。

Scaffold(
      backgroundColor: AppStyles.bgColor,
      body: SizedBox(
        width: Get.width,
        height: Get.height,
        child: Column(
          children: [
            const Gap(100),
            Container(
              width: 100,
              height: 200,
              padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 20),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10),
                image: const DecorationImage(
                  fit: BoxFit.cover,
                  image: AssetImage("lib/assets/images/one.png"),
                ),
              ),
            ),
            Container(
              // width: Get.width,
              height: Get.height * 0.45,
              decoration: const BoxDecoration(
                image: DecorationImage(
                  fit: BoxFit.cover,
                  image: AssetImage("lib/assets/images/blue.png"),
                ),
              ),
            )
          ],
        ),
      ),
    );

我的屏幕将有点不同,因为我想显示图像的顶部(而不是作为背景),然后堆叠在底部的形状。

tct7dpnv

tct7dpnv1#

1.对背景图像和前景斑点图像使用堆栈(或使用画图/自定义画图创建形状)。
1.使用堆叠作为背景(图像+斑点作为单一设计)和文本。
我会推荐2,因为它更清洁,以获得设计文件,但它的用例特定。
如果不清楚,请注解以获取更多信息。

必须使用Stack才能获得所需的UI。

相关问题