Take content height or Screen height which ever higher in flutter

Question

I am designing a login and sign up screen. I want to use the entire screen height if the content is less than screen height and use Expandable() inside the column else I want it to be scrollable. to avoid bottom over flow.

I have tried this two methods Flutter - Enable scroll only if content height is greater than screen height and flutter - correct way to create a box that starts at minHeight, grows to maxHeight

this is is what i have tried,

Widget build(BuildContext context) {
return Scaffold(
  resizeToAvoidBottomInset: true,
  appBar: AppBar(
    toolbarHeight: 56,
  ),
  body: Form(
    child: Padding(
      padding: const EdgeInsets.all(8.0),
      child: Column(mainAxisAlignment: MainAxisAlignment.spaceBetween,
          // mainAxisSize: MainAxisSize.min,
          children: [
            Column(
              children: [
                vSpace10,
                const H1('Enter your Mobile Number'),
                vSpace25,
                InputField(
                  hintText: "MobileNumber",
                ),
              ],
            ),

            // const Expanded(child: SizedBox()),
            Column(
              children: [
                MyButton(title: "Sign In", onTap: () {}),
                vSpace25, 
                // const SizedBox(height: 200,)
              ],
            ),
          ]),

      // child: Container(
      //   constraints: BoxConstraints(
      //     minHeight: MediaQuery.of(context).size.height - 120 ,
      //   ),
      //   child: SingleChildScrollView(
      //     child: Container(
      //         constraints: BoxConstraints(
      //     minHeight: MediaQuery.of(context).size.height - 120.0  ,
      //   ),
      //       child: Column(
      //         mainAxisAlignment: MainAxisAlignment.spaceBetween,
      //         // mainAxisSize: MainAxisSize.min,
      //         children: [
      //           Column(
      //             children: [
      //                 vSpace10,
      //         const H1('Enter your Mobile Number'),
      //         vSpace25,
      //         InputField(
      //           hintText: "MobileNumber",
      //         ),
      //             ],
      //           ),

      //         // const Expanded(child: SizedBox()),
      //         MyButton(title: "Sign In", onTap: () {

      //         },),
      //       ]),
      //     ),
      //   ),
      // ),
    ),
  ),
);

}

I have tried many things but it is not working as expected;

score 0 · Answer 1 · answered Dec 16 '22 at 13:37

to make the content scrollable u will have to wrap it in a SingleChildScrollView widget

could do as follow

Scaffold(
    resizeToAvoidBottomInset: true,
    appBar: AppBar(
      toolbarHeight: 56,
    ),
    body: SingleChildScrollView(
      child: Form(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            // mainAxisSize: MainAxisSize.min,
            children: [
              Column(
                children: [
                  vSpace10,
                  const H1('Enter your Mobile Number'),
                  vSpace25,
                  InputField(
                    hintText: "MobileNumber",
                  ),
                ],
              ),
    
              // const Expanded(child: SizedBox()),
              Column(
                children: [
                  MyButton(title: "Sign In", onTap: () {}),
                  vSpace25,
                  // const SizedBox(height: 200,)
                ],
              ),
            ],
          ),
        ),
      ),
    ),
  );

but there is an issue, I want to use the entire screen height to expand the white space to align the button to end of the screen. — Riyas Tp, Dec 16 '22 at 16:11
oh since u have to keep space between the button and your other widgets, u can use `Spacer` in between them — Afzal, Dec 17 '22 at 07:45
but we cant use `Expanded()` or `Spacer()` inside a single child scroll view — Riyas Tp, Dec 20 '22 at 07:44
Oh u will have to use it inside your Flex, in this case within the first column? — Afzal, Dec 20 '22 at 09:16

Take content height or Screen height which ever higher in flutter

1 Answers1