RenderFlex overflowed due to Navigator and Keyboard

Question

I have a Screen with the Following code:

Column(
                                children: [
                                  SvgPicture.asset(
                                    'images/startChat.svg',
                                    height: screenHeight / 4,
                                  ),
                                  SizedBox(
                                    height: 30.0,
                                  ),
                                  Text(
                                    'No Conversation Yet!',
                                    style: TextStyle(
                                        color: Color(0xff454F63),
                                        fontWeight: FontWeight.w600,
                                        fontSize: 20.0),
                                  ),
                                  
                                  FlatButton(
                                    child: Text(
                                      'Start a Chat',
                                      style: TextStyle(color: mainColor),
                                    ),
                                    onPressed: () => Navigator.push(
                                        context,
                                        MaterialPageRoute(
                                            builder: (context) => SearchPage(
                                                  isFromChat: true,
                                                ))),
                                  )
                                ],)
                    

When the flat button is clicked we Navigate to search page, where Textfield is auto enabled hence keyboard pops up. In this process , there is little lagging ,and I get an error :

I/flutter (25675): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY
╞═════════════════════════════════════════════════════════

I/flutter (25675): The following assertion was thrown during layout:
I/flutter (25675): A RenderFlex overflowed by 120 pixels on the bottom.
I/flutter (25675):
I/flutter (25675): The relevant error-causing widget was:
I/flutter (25675): Column file:.dart:64:31
I/flutter (25675):
I/flutter (25675): The overflowing RenderFlex has an orientation of Axis.vertical.
I have Tried putting the Column widget in Stack and even made the resizeToAvoidBottomInset: false,
but nothing worked ,How can this issue be resolved?

Answer 1

Wrap your Column in a SingleChildScrollView so the column can scroll when there is not enough space to display all the rows due to the keyboard.

https://api.flutter.dev/flutter/widgets/SingleChildScrollView-class.html