容器的变化大小在颤动中？宽度或高度

Question

我目前正在开发我的第一个幻影应用程序，并且在入职屏幕上需要一些帮助。

顶部在容器中具有lottiefile资产。底部有一些按钮。

是否可以根据底部的大小将容器的大小设置为具有Lottiefile资产的大小？我不想拥有滚动视图，所以一切都应该适合一个屏幕。 Lottiefile资产应填补底部顶部和开始之间的空间。是否有可能根据自由空间的宽度和高度设置大小？

我试图设置高度＆amp;宽度到双重。

这是代码：

  class OnBoardingPage extends StatelessWidget {
  const OnBoardingPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    var size = MediaQuery.of(context).size;
    return Scaffold(
        appBar: AppBar(
          toolbarHeight: 0,
          elevation: 0,
          backgroundColor: AppColor.statusbarColor,
        ),
        backgroundColor: AppColor.statusbarColor,
        body: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween, // <-- spaceBetween
          children: [
            Container(
              padding: EdgeInsets.symmetric(horizontal: size.width * 0.08),
              child: Column(
                children: [
                  SizedBox(
                    height: size.height * 0.03,
                  ),
                  Container(
                    width: double.infinity,
                    child: Lottie.asset('assets/images/files.json',
                        fit: BoxFit.cover, repeat: false),
                  ),
                ],
              ),
            ),
            Container(
              padding: EdgeInsets.symmetric(horizontal: size.width * 0.08),
              child: Column(
                children: [
                  SizedBox(
                    height: size.height * 0.05,
                  ),
                  Container(
                    height: size.height * 0.012,
                    width: size.width * 0.14,
                    decoration: BoxDecoration(
                        color: AppColor.textColor,
                        borderRadius: BorderRadius.circular(15)),
                  ),
                  SizedBox(
                    height: size.height * 0.03,
                  ),
                  AppText(
                    title: "...",
                    color: AppColor.textColor,
                    size: size.height * 0.024,
                  ),
                  SizedBox(
                    height: size.height * 0.015,
                  ),
                  AppText(
                    title:
                        "...",
                    textAlign: TextAlign.center,
                    color: AppColor.textColor,
                    size: size.height * 0.018,
                  ),
                  SizedBox(
                    height: size.height * 0.05,
                  ),
                  AppButton(
                    buttonName: "Register",
                    buttonColor: AppColor.buttonColor,
                    textColor: AppColor.buttonTextColor,
                    onTap: () {
                      Get.to(const SignUp());
                    },
                    buttonRadius: BorderRadius.circular(15),
                    buttonWidth: size.width,
                    fontWeight: FontWeight.w500,
                    buttonHeight: size.height * 0.065,
                  ),
                  SizedBox(
                    height: size.height * 0.02,
                  ),
                  AppButton(
                    buttonName: "Login",
                    buttonColor: AppColor.buttonColor,
                    textColor: AppColor.buttonTextColor,
                    onTap: () {
                      Get.to(const LoginScreen());
                    },
                    buttonRadius: BorderRadius.circular(15),
                    buttonWidth: size.width,
                    fontWeight: FontWeight.w500,
                    buttonHeight: size.height * 0.065,
                  ),
                  SizedBox(
                    height: size.height * 0.02,
                  ),
                  InkWell(
                    onTap: () {
                      Get.to(const Guest());
                    },
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        AppText(
                          title: "Continue as a Guest (...)",
                          color: AppColor.primaryColor,
                          size: size.height * 0.02,
                        ),
                        SizedBox(
                          height: size.height * 0.014,
                        ),
                      ],
                    ),
                  ),
                  SizedBox(
                    height: size.height * 0.05,
                  ),
                ],
              ),
            ),
          ],
        ));
  }
}

我希望有人可以帮助我解决这个问题。非常感谢。

Answer 1

您是否尝试将列或容器包裹在扩展的小部件中？