Form in Dialog not scrolling to focus

400 views

Skip to first unread message

Frank Weißenborn

unread,

Jun 17, 2019, 5:27:40 AM6/17/19

to Flutter Dev

Hi,

I want to have a dialog that has a lot of input fields. I realized this with a SingleScrollView embedded in an AnimatedContainer.
If I use this without the dialog everything works fine. I scroll down to input field 30, the input gets focus and the animation controller scrolls up that the input is not hidden.
If I use this with the dialog it doesn't work. The keyboard pops up and hides the input field.

import 'package:flutter/material.dart';
import 'package:keyboard_visibility/keyboard_visibility.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
// Add variable to top of class
Alignment childAlignment = Alignment.center;

  @override
  void initState() {
    KeyboardVisibilityNotification().addNewListener(
      onChange: (bool visible) {
        setState(() {
        childAlignment = visible ? Alignment.topCenter : Alignment.center;
      });
      },
    );

    super.initState();
  }

  

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      body: FlatButton(
        child: Text("Dialog"), onPressed: () {
          _showDialog();
        },
      ),
    );
  }
  
  void _showDialog() {
    showDialog(
      context: context,
      builder: (context) {
          return Dialog(
            child: AnimatedContainer(
        curve: Curves.easeOut,
        duration: Duration(
          milliseconds: 400,
        ),
        width: double.infinity,
        height: double.infinity,
        padding: const EdgeInsets.all(20),
        alignment: childAlignment,
        child: SingleChildScrollView(
          
          child: Column(
          mainAxisSize: MainAxisSize.min,
          children: _getInputFields(),
          )
        ),
      ),
          );
      }
    );
  }
  
  List<Widget> _getInputFields() {
    int count = 40;
    var retVal = <Widget>[];
    for (var i = 0; i < count; i++) {
      retVal.add(TextField(
              decoration: InputDecoration(
                  hasFloatingPlaceholder: true, hintText: 'Enter things here - ' + i.toString()),
            ));
    }

    return retVal;
  }
}

Any ideas?

Frank

Yasas Sandeepa

unread,

Jun 17, 2019, 9:55:56 PM6/17/19

to Flutter Development (flutter-dev)

You can use a focus node..

Here is a full example..you may refer this-> https://flutter.dev/docs/cookbook/forms/focus

Reply all

Reply to author

Forward

0 new messages