0

In Flutter I have a CustomScrollView with a SliverAppBar and a SliverToBoxAdapter which contains several widgets including some TextFormFields and a ElevatedButton.

How can I prevent the keyboard from overlaying the content of the SliverToBoxAdapter? Basically, I want the scroll position to always be at max extent by default.

Expected behaviour:

enter image description here

enter image description here

Current behaviour:

enter image description here

enter image description here

Code:

class MyHomePage extends HookWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          const SliverAppBar(
            pinned: true,
            expandedHeight: 400,
            flexibleSpace: FlexibleSpaceBar(
              centerTitle: true,
              title: Text(
                'Lorem ipsum',
                textAlign: TextAlign.center,
                style: TextStyle(fontSize: 24, color: Colors.white),
              ),
              background: Image(
                fit: BoxFit.cover,
                image: NetworkImage(
                    'https://images.pexels.com/photos/16288133/pexels-photo-16288133.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'
                ),
              ),
            )
          ),
          SliverToBoxAdapter(
            child: Column(
              children: [
                const Text('My form'),
                TextFormField(
                  decoration: const InputDecoration(
                    prefixIcon: Icon(Icons.email_outlined),
                    labelText: 'Form field',
                    border: OutlineInputBorder(),
                  ),
                ),
                Container(
                  // Space to enforce scrolling
                  height: 300,
                  width: 100,
                  color: Colors.red,
                ),
                ElevatedButton(
                   onPressed: () {},
                   child: const Text('Submit'),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}
paswes
  • 51
  • 2
  • 10
  • Does this answer your question? [How to push content up when focus is on TextField and keyboard opens in Flutter?](https://stackoverflow.com/questions/70364604/how-to-push-content-up-when-focus-is-on-textfield-and-keyboard-opens-in-flutter) – Vikas Apr 12 '23 at 12:55
  • Thanks for your answer. Using a `ScrollController` enables the expected behaviour regarding the scroll position to be at max extent. But the keyboard still overlays the content (below) the form field, which still needs to be fixed. – paswes Apr 12 '23 at 13:30

1 Answers1

0

You have to disable the scaffold resize on keyboard appear.

Add resizeToAvoidBottomInset: false, in scaffold.

Example:

Scaffold(
    resizeToAvoidBottomInset: false,
    body: ...
),
Sujan Gainju
  • 4,273
  • 2
  • 14
  • 34
  • Thanks for your answer. I have already tried adding `resizeToAvoidBottomInset: false` to the `Scaffold`. This does not change the behaviour. At least for my provided example. – paswes Apr 12 '23 at 13:07