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.