颤振中容器的可变大小？宽度或高度

Question

我目前正在开发我的第一个 flutter 应用程序，我需要一些关于入职屏幕的帮助。

顶部在容器中有一个 Lottiefile 资产。底部有一些按钮。

是否可以根据底部的大小来设置包含Lottiefile资源的容器的大小？我不想有一个滚动视图，所以一切都应该适合一个屏幕。 Lottiefile 资产应填充顶部和底部开头之间的 space。是否有可能根据免费 space?

的宽度和高度来设置大小

我尝试将高度和宽度设置为 double.infinity，但这导致我的应用程序崩溃。

代码如下：

  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

您是否尝试过将 Column 或 Container 包装在 Expanded 小部件中？

颤振中容器的可变大小？宽度或高度

Variable size of container in flutter? Either width or height

flutter

flutter-layout

flutter-container

flutter-responsive-layout