Variable size of container in flutter? Either width or height

Question

I am currently developing my first flutter-application and I need some help with my onboarding screen.

The top part has a Lottiefile asset in a container. The bottom part has some Buttons.

Is it possible to set the size of the container with the Lottiefile asset in it depending of the size of the bottom part? I do not want to have a scroll view, so everything should fit it one screen. The Lottiefile asset should fill the space between the top and the beginning of the bottom part. Is there any possibility to set the size depending of the width and height of the free space?

I tried to set height & width to double.infinity but that crashed my app.

Here's the code:

  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,
                  ),
                ],
              ),
            ),
          ],
        ));
  }
}

I hope somebody is can help me with that problem. Thank you very much.

Answer 1

Did you try wrapping your Column or Container in an Expanded widget?