Flutter: AlertDialog TextField and Overflowed Problem *Used SingleChildScrollView

Question

return AlertDialog(
    title: Center(
      child: Text(
        'OVERLFOWED',
        style: defaultStyle,
        overflow: TextOverflow.ellipsis,
      ),
    ),
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(40),
    ),
    elevation: 2.0,
    backgroundColor: Colors.grey[900],
    content:  Container(
        height: context.height * 0.45,
        width: context.width * 0.9,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
           Container(
                    height: context.height * 0.390,
                    width: context.width * 0.9,
                    child: SingleChildScrollView(
                      scrollDirection: Axis.vertical,
                      child: Column(
                        children: [
                          Container(
                            color: Colors.blue,
                            height: context.height * 0.030,
                            width: context.width * 0.9,
                            child: TextField(),
                          ),
                          Container(
                            color: Colors.red,
                            height: context.height * 0.360,
                            width: context.width * 0.9,
                            child: Wrap(
                              spacing: 10.0,
                              runSpacing: 10.0,
                              children: <Widget>[],
                            ),
                          )
                        ],
                      ),
                    ),
                  ),
            SizedBox(height: context.height * 0.02),
            Container(
              height: context.height * 0.035,
              width: context.width * 0.9,
              child:  ElevatedButton(
                      onPressed: () async {
                        Navigator.pop(context);
                      },
                      child: Text('Done', style: _textButtonStyle)),
            ),
          ],
        ),
      );
    ));

When I click the Textfield, the app causes the overflow problem. Most solution was like add resizeToAvoidBottomInset to your scaffold. But, I am using an AlertDialog() and have this error. I also added SingleChildScrollView. If it was solving the error but no luck.

I thought the other widgets were affecting the layout. So, I'd removed everything except SingleChildScrollView and TextField but still have the same problem.

How can I deal with this on AlertDialog()?

Answer 1

set scrollbar to true

AlertDialog(
  scrollable: true,
  ...
  ...
)