Flutter RenderFlex overflowed using appbar back button while keyboard is visible

Question

I am dealing with an issue in Flutter where I have my keyboard for a search bar open and then when I go back to a page using the appbar back button it causes the overflow here. I am using a listview.builder for the list so it's an already expanded scrollable list so I have not been able to use SingleChildScrollView or another listview. I have also tried resizeToAvoidBottomInset in the scaffold.

  Widget _buildList(context) {
if (_searchText.isNotEmpty) {
  List tempList = [];
  for (int i = 0; i < filterCardInformation.length; i++) {
    if ((filterCardInformation[i].title.toString())
        .toLowerCase()
        .contains(_searchText.toLowerCase())) {
      tempList.add(filterCardInformation[i]);
    }
  }
  filterCardInformation = tempList;
}
return ListView.builder(
  itemBuilder: (BuildContext context, int index) {
    return new MyExpandingCard(
        title: filterCardInformation[index].title,
        information: filterCardInformation[index].information,
        phoneList: filterCardInformation[index].phoneList,
        website: filterCardInformation[index].website,
        contactList: filterCardInformation[index].contactList,);
  },
);

Widget build(BuildContext context) {
return Scaffold(
  resizeToAvoidBottomInset: true,
  appBar: AppBar(
    backgroundColor: Color(0xff1c1d4b),
    title: customSearchBar,
    automaticallyImplyLeading: true,
    actions: [
      IconButton(
          onPressed: () {
            setState(() {
              if (customIcon.icon == Icons.search) {
                customIcon = const Icon(Icons.cancel);
                //search bar
                customSearchBar = ListTile(
                  leading: const Icon(
                    Icons.search,
                    color: Colors.white,
                    size: 28,
                  ),
                  title: TextField(
                    controller: _filter,
                    autofocus: true,
                    decoration: const InputDecoration(
                      hintText: 'Type in search...',
                      hintStyle:
                          TextStyle(color: Colors.white, fontSize: 18),
                      border: InputBorder.none,
                    ),
                    style: const TextStyle(color: Colors.white),
                  ),
                );
              } else {
                customIcon = const Icon(Icons.search);
                customSearchBar = const Text('Resources');
              }
            });
          },
          icon: customIcon)
    ],
    centerTitle: true,
  ),
  body: Padding(
    padding: EdgeInsets.all(10.0),
    child: Column(children: [
      Expanded(child: 
      //listview.builder
      _buildList(context),)
    ],)
  ),
);

Answer 1

Wrap your padding with SingleChildScrollView and give physics property to ScrollPhysics.

body: SingleChildScrollView(
physics: ScrollPhysics();
child: Padding(
padding: EdgeInsets.all(10.0),
child: Column(children: [
  Expanded(child: 
  //listview.builder
  _buildList(context),)
],)

And then in ListView.builder give physics property to ClampingScrollPhysics.

return ListView.builder(
physics: ClampingScrollPhysics();
itemBuilder: (BuildContext context, int index) => MyExpandingCard(
    title: filterCardInformation[index].title,
    information: filterCardInformation[index].information,
    phoneList: filterCardInformation[index].phoneList,
    website: filterCardInformation[index].website,
    contactList: filterCardInformation[index].contactList,);

);

Answer 2

Actually found what was causing the issue. The home screen that it was navigating to after the back button was used had resizeToAvoidBottomInset set to true by default. Since the keyboard was on screen for a split second after the back button was pressed it would show this renderflex issue. So setting it to false fixed my problem on the page the back button was navigating to fixed my problem