CODEWITHSUNDEEP
flutter
Denise
Denise

Reputation: 1098

How to bring textField into view when keyboard obstructs it?

I know this is a common issue, but I couldn't find an exact solution to my problem. I have created a Column view of widgets containing a TextField at the bottom, and when the keyboard pops up the textField is hidden.

Initially, the view was overflowing, So, I set resizeToAvoidBottomPadding: false, to fix that issue. However, now the text field is being hidden completely.

I have used Spacer and flex in my code and hence don't want to shift to ListView.

How can I fix this problem?

Upvotes: 0

Views: 388

Answers (2)

Ovidiu
Ovidiu

Reputation: 8714

Your main problem boils down to wanting to use Flex within a Column that needs to sit within a ScrollView. You want your column to fill the whole page when the keyboard is not showing, to remove as much empty space as needed when the keyboard is shown, and to become scrollable if it still doesn't fit the remaining screen after removing all the empty space.

For this, you need to use the last example from this page: https://api.flutter.dev/flutter/widgets/SingleChildScrollView-class.html

Widget build(BuildContext context) {
  return LayoutBuilder(
    builder: (BuildContext context, BoxConstraints viewportConstraints) {
      return SingleChildScrollView(
        child: ConstrainedBox(
          constraints: BoxConstraints(
            minHeight: viewportConstraints.maxHeight,
          ),
          child: IntrinsicHeight(
            child: Column(
              children: <Widget>[
                Container(
                  // A fixed-height child.
                  color: const Color(0xff808000), // Yellow
                  height: 120.0,
                ),
                Expanded(
                  // A flexible child that will grow to fit the viewport but
                  // still be at least as big as necessary to fit its contents.
                  child: Container(
                    color: const Color(0xff800000), // Red
                    height: 120.0,
                  ),
                ),
              ],
            ),
          ),
        ),
      );
    },
  );
}

You need the LayoutBuilder because it provides the viewportConstraints which give you the maximum height the child can use without overflowing. It also automatically rebuilds when the keyboard is shown/hidden as this value will change.

You need the SingleChildScrollView to be able to scroll once the Column no longer fits the screen.

You need IntrinsicHeight so that the Column takes exactly as much height as needed for its contents. Without this, the Column would take up infinite height because of the ScrollView, and the Spacers would throw exceptions.

You need the ConstrainedBox to set the minimum height that the Column must use - this is the value mentioned above, from the LayoutBuilder. This forces the Column to be at least as big as the screen allows - your Spacers would have no effect without this as the Column would be shrunk to its minimum height because of the InstrinsicHeight widget.

This can be a bit difficult to understand because of the amount of widgets serving different purposes required to achieve this layout, but the good news is you only need to copy paste it and change the contents of the Column.

Upvotes: 3

Sukhi
Sukhi

Reputation: 14195

You can use SingleChildScrollView to wrap your widgets. For example :

                SingleChildScrollView(
                    child: new Column(
                      children: <Widget>[
                        drawerIcon(),
                        buttonForSomething,
                        fillerRow(5),
                        checkBoxForSomething(),
                        checkBoxForSomeOtherThing(),
                        ...

                      ],
                  ),
                )

Also : See if this link helps.

Upvotes: 0

Related Questions