Flutter prevent keyboard from hiding TextField on tap in Dialog

Question

I have a Dialog containing TextFields and when I tap on one of the fields lower down the list the keyboard pops up, causes the Dialog to resize and the tapped TextField is no longer visible. I would like the tapped TextField to be scrolled in to view.

So far I've tried the following without luck:

Making sure the android manifest doesn't declare the app as full screen (e.g. https://stackoverflow.com/a/62131025/2086746).
Adding a Scaffold to the Dialog and changing the resizeToAvoidBottomInset value.
Using MediaQuery to add an extra bottom padding when the keyboard is visible.

Example app demonstrating the issue:

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Builder(
            builder: (context) => TextButton(
              child: const Text("Open dialog"),
              onPressed: () {
                showDialog(context: context, builder: (_) => _dialog());
              },
            ),
          ),
        ),
      ),
    );
  }

  Widget _dialog() {
    return Dialog(
      child: SingleChildScrollView(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(height: 200, color: Colors.red),
            const TextField(decoration: InputDecoration(hintText: 'TF 1')),
            const TextField(decoration: InputDecoration(hintText: 'TF 2')),
            const TextField(decoration: InputDecoration(hintText: 'TF 3')),
            const TextField(decoration: InputDecoration(hintText: 'TF 4')),
            const TextField(decoration: InputDecoration(hintText: 'TF 5')),
            const TextField(decoration: InputDecoration(hintText: 'TF 6')),
            const TextField(decoration: InputDecoration(hintText: 'TF 7')),
            Container(height: 200, color: Colors.blue),
          ],
        ),
      ),
    );
  }
}

So you just want that the field you select should scroll up with screen? — Diwyansh, Dec 21 '21 at 10:30

Felix · Answer 1 · 2021-12-21T10:34:48.840

2

For that, you need to remove SingleChildScrollView. Also, you can try to make TextFields slimmer using isDense:true. If it doesn't help you can create dialog as a new screen.

edited Dec 21 '21 at 10:34

answered Dec 21 '21 at 10:10

Felix

96
8

Thanks for the suggestion however I am already using SingleChildScrollView. – Rory Stephenson Dec 21 '21 at 10:22

score 2 · Accepted Answer · answered Dec 21 '21 at 10:25

It looks like I finally find the solution myself. As I mention in my question I had already tried adding a Scaffold to the Dialog without success, however I was placing the Scaffold inside the Dialog. I've now tried placing the Dialog inside the Scaffold and the problem is solved. One side-effect is that the Dialog is no longer dismissible but this can be fixed by wrapping the Scaffold in a GestureDetector and manually dismissing. The full working code is now:

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Builder(
            builder: (context) => TextButton(
              child: const Text("Open dialog"),
              onPressed: () {
                showDialog(
                  context: context,
                  builder: (context) => _dialog(context),
                  barrierDismissible: true,
                );
              },
            ),
          ),
        ),
      ),
    );
  }

  Widget _dialog(BuildContext context) {
    return GestureDetector(
      onTap: () {
        Navigator.of(context).pop();
      },
      child: Scaffold(
        backgroundColor: Colors.transparent,
        body: Dialog(
          child: SingleChildScrollView(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Container(height: 200, color: Colors.red),
                const TextField(decoration: InputDecoration(hintText: 'TF 1')),
                const TextField(decoration: InputDecoration(hintText: 'TF 2')),
                const TextField(decoration: InputDecoration(hintText: 'TF 3')),
                const TextField(decoration: InputDecoration(hintText: 'TF 4')),
                const TextField(decoration: InputDecoration(hintText: 'TF 5')),
                const TextField(decoration: InputDecoration(hintText: 'TF 6')),
                const TextField(decoration: InputDecoration(hintText: 'TF 7')),
                Container(height: 200, color: Colors.blue),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Flutter prevent keyboard from hiding TextField on tap in Dialog

2 Answers2