Flutter - resizeToAvoidBottomInset property makes my ListView covered by keyboard

Question

I will describe my problem from the very first time. I have a page with BottomNavigationBar, ListView, and a Custom Search Widget (using TextField inside it). Whenever I use the Search Widget the keyboard appears and bringing unnecessary white box on it (I have browsed this problem a lot and found this fix by using resizeToAvoidBottomInset: false as my Scaffold property. Using that property fixes the white box problem, but it gives a new problem: bottom-half of my ListView is now blocked by the keyboard because the ListView height is not getting resized when the keyboard appears.

Here is my view code:

@override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        FocusManager.instance.primaryFocus?.unfocus();
      },
      child: SafeArea(
          child: Scaffold(
            resizeToAvoidBottomInset: false,
              body: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    Container(
                      width: double.infinity,
                      margin: EdgeInsets.all(16),
                      child: const Text("Inventory",
                          textAlign: TextAlign.center,
                          style: TextStyle(
                              fontFamily: "Quicksand",
                              fontSize: 20,
                              fontWeight: FontWeight.w700)),
                    ),
                    Container(
                      child: _buildSearch(),
                    ),
                    Flexible(
                        child: Container(
                          child: FutureBuilder(
                              future: _fetchData(),
                              builder: (context, AsyncSnapshot snapshot) {
                                if (isFiltered) {
                                  isFiltered = false;
                                  return ListView.builder(
                                    // itemCount: snapshot.data.length,
                                    physics: BouncingScrollPhysics(),
                                    itemCount: arrFilteredStock.length,
                                    itemBuilder: (context, index) {
                                      var id = arrFilteredStock[index].id;
                                      var code = arrFilteredStock[index].itemCode;
                                      var comname = arrFilteredStock[index].itemComname;
                                      var unit = arrFilteredStock[index].itemUnit;
                                      var qty =
                                          arrFilteredStock[index].itemStockBalanceQty;
                                      return StockCard(
                                          stock: Stock(id, code, comname, unit, qty));
                                    },
                                  );
                                } else {
                                  if (snapshot.data == null) {
                                    return Container(
                                        child: const Center(
                                          child: Text("Loading..."),
                                        ));
                                  } else {
                                    return ListView.builder(
                                      physics: BouncingScrollPhysics(),
                                      itemCount: snapshot.data.length,
                                      itemBuilder: (context, index) {
                                        var id = snapshot.data[index].id;
                                        var code = snapshot.data[index].itemCode;
                                        var comname = snapshot.data[index].itemComname;
                                        var unit = snapshot.data[index].itemUnit;
                                        var qty =
                                            snapshot.data[index].itemStockBalanceQty;
                                        return StockCard(
                                            stock: Stock(id, code, comname, unit, qty));
                                      },
                                    );
                                  }
                                }
                              }),
                        )
                    )
                  ]))),
    );
  }

https://stackoverflow.com/a/70645000/16083654 – Sumit_VE Nov 21 '22 at 10:51 — Sumit_VE, Nov 21 '22 at 10:51

willypede · Accepted Answer · 2021-10-11T08:04:30.600

I have found a temporary solution: White necessary white box is gone, ListView can be scrolled until the last data in it. Only problem is after scrolled until the final data of ListView, the white box appears again. I think this is better comparing to other solutions.

Here's the revisioned code:

@override
  Widget build(BuildContext context) {
    final bottom = MediaQuery.of(context).viewInsets.bottom;
    return GestureDetector(
      onTap: () {
        FocusManager.instance.primaryFocus?.unfocus();
      },
      child: SafeArea(
          child: Scaffold(
              resizeToAvoidBottomInset: false,
              body: Column(mainAxisSize: MainAxisSize.max, children: <Widget>[
                Container(
                  width: double.infinity,
                  margin: EdgeInsets.all(16),
                  child: const Text("Inventory",
                      textAlign: TextAlign.center,
                      style: TextStyle(
                          fontFamily: "Quicksand",
                          fontSize: 20,
                          fontWeight: FontWeight.w700)),
                ),
                Container(
                  child: _buildSearch(),
                ),
                Flexible(
                    child: Container(
                  child: FutureBuilder(
                      future: _fetchData(),
                      builder: (context, AsyncSnapshot snapshot) {
                        if (isFiltered) {
                          isFiltered = false;
                          return ListView.builder(
                            // itemCount: snapshot.data.length,
                            padding: EdgeInsets.only(bottom: bottom),
                            physics: BouncingScrollPhysics(),
                            itemCount: arrFilteredStock.length,
                            itemBuilder: (context, index) {
                              var id = arrFilteredStock[index].id;
                              var code = arrFilteredStock[index].itemCode;
                              var comname = arrFilteredStock[index].itemComname;
                              var unit = arrFilteredStock[index].itemUnit;
                              var qty =
                                  arrFilteredStock[index].itemStockBalanceQty;
                              return StockCard(
                                  stock: Stock(id, code, comname, unit, qty));
                            },
                          );
                        } else {
                          if (snapshot.data == null) {
                            return Container(
                                child: const Center(
                              child: Text("Loading..."),
                            ));
                          } else {
                            return ListView.builder(
                              padding: EdgeInsets.only(bottom: bottom),
                              physics: BouncingScrollPhysics(),
                              itemCount: snapshot.data.length,
                              itemBuilder: (context, index) {
                                var id = snapshot.data[index].id;
                                var code = snapshot.data[index].itemCode;
                                var comname = snapshot.data[index].itemComname;
                                var unit = snapshot.data[index].itemUnit;
                                var qty =
                                    snapshot.data[index].itemStockBalanceQty;
                                return StockCard(
                                    stock: Stock(id, code, comname, unit, qty));
                              },
                            );
                          }
                        }
                      }),
                )),
              ]))),
    );
  }

This is just a temporary solution. Any solution will be appreciated.

score 0 · Answer 2 · answered Oct 11 '21 at 06:58

0

Add this padding in your code at the top of your fields when you add data keyboard appears first wrape in container then check other area I resolved same issue adding this

   Padding(
         padding: EdgeInsets.only(
         bottom: MediaQuery.of(context).viewInsets.bottom));

answered Oct 11 '21 at 06:58

Awais Rehman

574
3
10

1

Adding only this code as the last child of ```Column``` property makes the unnecessary white box appears again. Adding this code AND removing ```resizeToAvoidBottomInset``` property makes the view overflow. – willypede Oct 11 '21 at 07:04
i wil share all code wait and its mean you are adding in wrong place – Awais Rehman Oct 11 '21 at 07:05
https://gist.github.com/awaisdev5765/76d98268324426bcb334c09c28878949 check this for idea – Awais Rehman Oct 11 '21 at 07:09
same working i have done in my code you have just set this padding in your code you are adding in wrong place whats why its overflow I – Awais Rehman Oct 11 '21 at 07:22

Flutter - resizeToAvoidBottomInset property makes my ListView covered by keyboard

2 Answers2