Flutter Overlay and TextFields

Question

I am using Flutter. In the scaffold body I use

Overlay.of(context).insert(...) 

to insert a login dialog.

However, when I try to select the username/password fields, no keyboard shows up.

When I use the login widget in the 'normal' tree, it works. Moving it in the overlay makes it so the keyboard does not show.

Am I missing something here? Shouldn't this just work?

Answer 1

You need wrap your widgets in a FocusScope like the following:

      overlayEntry = OverlayEntry(builder: (context) {
        FocusScope.of(context).setFirstFocus(focusScopeNode);
        return Material(
          child: FocusScope(
            node: focusScopeNode,
            child: Padding(
              padding: const EdgeInsets.all(20.0),
              child: Column(
                children: <Widget>[
                  TextField(),
                ],
              ),
            ),
          ),
        );
      });
      Overlay.of(context).insert(overlayEntry);

In fact, for a login page, I would just use the Navigator to push it in.