Flutter : Alert Dialog hide by keyboard

Question

I have form inside AlertDialog.I have problem about Keyboard hide my AlertDialog.

I'm already follow another question include This and This issue Form Github , But it's not solved my problem.

I also try using wrap my AlertDialog with SingleChildScrollView ,But Position AlertDialog on Top Screen.

I'm doing wrong ?

Edit Source Code

import 'package:flutter/material.dart';

class TestingPage extends StatelessWidget {
  static const routeNamed = "/testing-page";
  @override
  Widget build(BuildContext context) {
    return Center(
      child: RaisedButton(
        onPressed: () => showDialog(
          child: CustomAlertDialog(
            //  controller: _txtUserController,
            title: "Description About You",
            labelText: "Fill Your Name",
            errorTextEmpty: "Provided Name",
            //  boxName: "user_box",
            //  userModelHive: UserModelHive()
            //    ..id = DateTime.now()
            //    ..giverName = _txtUserController.text
            //    ..pinCodeNumber = "",
            //  routeName: HomeScreen.routeNamed,
          ),
          context: context,
          barrierDismissible: false,
        ),
        child: Text('Open Dialog'),
      ),
    );
  }
}

class CustomAlertDialog extends StatefulWidget {
  final TextEditingController controller;
  final String title;
  final String labelText;
  final String errorTextEmpty;
  final String boxName;

//  final UserModelHive userModelHive;
  final String routeName;

  CustomAlertDialog({
    this.controller,
    this.title,
    this.labelText,
    this.errorTextEmpty,
    this.boxName,
    //  this.userModelHive,
    this.routeName,
  });

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

class _CustomAlertDialogState extends State<CustomAlertDialog> {
//  final Repository _repository = Repository();
  final formKeys = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Form(
      key: formKeys,
      child: _SystemPadding(
        child: AlertDialog(
          title: Text(widget.title),
          content: TextFormField(
            controller: widget.controller,
            decoration: InputDecoration(
              labelText: widget.labelText,
              border:
                  OutlineInputBorder(borderRadius: BorderRadius.circular(30)),
            ),
            validator: (value) {
              if (value.isEmpty) {
                return widget.errorTextEmpty;
              }
              return null;
            },
          ),
          actions: <Widget>[
            FlatButton.icon(
                icon: Icon(Icons.verified_user),
                label: const Text("Let's go"),
                color: Theme.of(context).primaryColor,
                textTheme: ButtonTextTheme.primary,
                onPressed: () {})
          ],
        ),
      ),
    );
  }
}

class _SystemPadding extends StatelessWidget {
  final Widget child;

  _SystemPadding({this.child});

  @override
  Widget build(BuildContext context) {
    var mediaQuery = MediaQuery.of(context);
    print(mediaQuery.viewInsets.bottom);
    return AnimatedContainer(
      padding: mediaQuery.padding,
      color: Colors.black.withOpacity(.5),
      duration: const Duration(milliseconds: 300),
      child: child,
    );
  }
}

Answer 1

Inside _SystemPadding class, while returning AnimatedContainer , use padding as mediaQuery.padding that'll adjust the height of the alertDialog and no need to wrap alertDialog content with SingleChildScrollView . Working code below:

class _SystemPadding extends StatelessWidget {
  final Widget child;
  _SystemPadding({this.child});
  @override
  Widget build(BuildContext context) {
    var mediaQuery = MediaQuery.of(context);
    return new AnimatedContainer(
        padding: mediaQuery.padding,
        duration: const Duration(milliseconds: 300),
        child: child);
  }
}

void _showDialog(BuildContext context) {
    showDialog(
      context: context,
      child: _SystemPadding(
        child: CustomAlertDialog(
          // controller: _txtUserController,
          title: "Description About You",
          labelText: "Fill Your Name",
          errorTextEmpty: "Provided Name",
          context: context,
          barrierDismissible: false,
        ),
      )
    );
  }

Output: It scrolls up the dialog appropriately when keyboard opens:

This way the alertDialog doesn't move at the top, but adjusts itself to be considerably above the keyboard.

Hope this answers your question.

Answer 2

Please just wrap your alert dialog with SingleChildScrollView

example

 showDialog(
  context: context,
  builder: (BuildContext context) {
    return SingleChildScrollView(child: alert);
  },
);