1

I want to achieve a layout that looks like this.

expected result

It works fine until I do focus on the input.

unexpected result

I wonder how to do this in a proper way... Here is what I already tried so far:

  1. Wrapping form inside SingleChildScrollView (Spacer widget causing error).
  2. Using CustomScrollView, (Spacer widget causing error).
  3. Wrapping CustomScrollView or SingleChildScrollView inside SizedBox limited by device's height (causing some element only partially visible on smaller devices).
  4. Following the answer from this question (doesn't work).

Any clue? Here is my code:

class CreateFieldReportPage extends GetView<CreateFieldReportController> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        onTap: controller.focusScope.unfocus,
        child: SafeArea(
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 30),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                PageHeader(
                  helper: 'fieldReport.create.helper'.tr,
                  title: 'fieldReport.create'.tr,
                ),
                Spacer(),
                FieldReportForm(),
                PageNavigator(
                  onPressedPrimaryButton: () {
                    Get.toNamed(Routes.EVENT_CREATE_ADD_USER);
                  },
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}
Yura
  • 1,937
  • 2
  • 19
  • 47
  • SingleChildScrollView should be at the top, have you added at the top, if not works try it by removing SafeArea – Jitesh Mohite Sep 22 '20 at 06:18
  • I did, still can't give a spacer between the title and the form – Yura Sep 22 '20 at 06:19
  • Try by removing the ```spacer``` and instead of this add the ```mainAxisAlignment``` in your ```Column``` and try to give spacing using ```spaceBetween```. – Ronak Patel Sep 22 '20 at 06:27

1 Answers1

1

Spacer() behaves like a Flexible widget which will occupy only available space on the screen, if other widgets occupied the remaining space then it will not going to work.

For you, SizedBox(height: 30), would work and add the required height. SingleChildScrollView() will provide additional space then and perform scrolling.

Jitesh Mohite
  • 31,138
  • 12
  • 157
  • 147
  • Agreed, it somehow works but in smaller devices, the form is cut off and user needs to scroll down the rest. I was thinking about more flexible way to do it without having to worry about it. How do you think? – Yura Sep 22 '20 at 06:33
  • 1
    use MediaQuery and add respective size. It will take care of device dimensions. – Jitesh Mohite Sep 22 '20 at 07:01