Home > Mobile >  Flutter - resizeToAvoidBottomInset property makes my ListView covered by keyboard
Flutter - resizeToAvoidBottomInset property makes my ListView covered by keyboard

Time:10-12

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));
                                      },
                                    );
                                  }
                                }
                              }),
                        )
                    )
                  ]))),
    );
  }

CodePudding user response:

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));

CodePudding user response:

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.

  • Related