Переменный размер контейнера в флаттере? Либо ширина, либо высота

Question

В настоящее время я разрабатываю свое первое флаттер-приложение, и мне нужна помощь с моим бортовым экраном.

В верхней части находится актив Lottiefile в контейнере. В нижней части есть несколько кнопок.

Можно ли задать размер контейнера с ассетом Lottiefile в зависимости от размера нижней части? Я не хочу иметь прокрутку, поэтому все должно умещаться на одном экране. Ресурс Lottiefile должен заполнить пространство между верхней и нижней частями. Есть ли возможность задать размер в зависимости от ширины и высоты свободного места?

Я попытался установить высоту и ширину на 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

Вы пытались обернуть свой столбец или контейнер расширенным виджетом?