Issue
After hours of trial and error, I gave up.
Can somebody tell me why my app is expanding behind the virtual navigation buttons?
I tried swiching and inserting SafeArea, Flex, Expanded and so on but have not found which Widget is creating this behaviour.
My Code:
Widget build(BuildContext context) {
return Scaffold(
body: Column(
// direction: Axis.vertical,
children: [
Expanded(
flex: 1,
// child:Text("test text", style: TextStyle(backgroundColor: Colors.blue),)
child: Container(
// color: Colors.red,
alignment: Alignment.centerRight,
// padding: EdgeInsets.all(0),
child: TextField(
controller: _input_controller,
decoration: const InputDecoration(
focusedBorder: InputBorder.none,
border: InputBorder.none,
),
style: TextStyle(fontSize: _font_size),
textAlign: TextAlign.right,
showCursor: false,
readOnly: true,
// decoration: InputDecoration(labelText: "Enter your number"),
// keyboardType: TextInputType.number,
// inputFormatters: [
// // FilteringTextInputFormatter.allow(RegExp(r'[0-9]')),
// // FilteringTextInputFormatter.allow(RegExp(r"[.,']")),
// CardFormatter
// ], // Only numbers can be entered
)),
),
Expanded(
flex: 1,
// child:Text("test text", style: TextStyle(backgroundColor: Colors.blue),)
child: Container(
// color: Colors.red,
alignment: Alignment.centerRight,
// padding: EdgeInsets.all(0),
child: TextField(
controller: _answer_controller,
decoration: const InputDecoration(
focusedBorder: InputBorder.none,
border: InputBorder.none,
),
style: TextStyle(fontSize: _font_size),
textAlign: TextAlign.right,
showCursor: false,
readOnly: true,
// decoration: InputDecoration(labelText: "Enter your number"),
// keyboardType: TextInputType.number,
// inputFormatters: [
// // FilteringTextInputFormatter.allow(RegExp(r'[0-9]')),
// // FilteringTextInputFormatter.allow(RegExp(r"[.,']")),
// CardFormatter
// ], // Only numbers can be entered
)),
),
Expanded(
flex: 4,
// child:Text("test text", style: TextStyle(backgroundColor: Colors.green),)
child: GridView.count(
crossAxisCount: 4,
// padding: const EdgeInsets.all(0.2),
mainAxisSpacing: 0,
crossAxisSpacing: 0,
children: List.generate(
20,
(i) => Container(
child: TextButton(
onPressed: () {
print(i);
},
child: Text(i.toString()),
),
))),
)
],
),
);
} crossAxisSpacing: 0,
children: List.generate(
20,
(i) => Container(
child: TextButton(
onPressed: () {
print(i);
},
child: Text(i.toString()),
),
)),
),
)
],
),
),
),
),
);
}Solution
As always, when you ask, you get the answer shortly after by yourself (with a hint from Chance)
Putting GridView inside Expanded causes this behaviour, if you put GridView inside a Container you get an assertion error, add shrinkWrap: true to the Constructor of GridView and everything works as expected:
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Expanded(flex: 1, child: Text("Text1")),
Expanded(flex: 1, child: Text("Text1")),
Container(
child: GridView.count(
crossAxisCount: 4,
mainAxisSpacing: 0,
crossAxisSpacing: 0,
shrinkWrap: true,
children: List.generate(
20,
(i) => Container(
child: TextButton(
onPressed: () {
print(i);
},
child: Text(i.toString()),
),
))),
)
],
));
}Answered By – Furby Haxx
Answer Checked By – Marilyn (FlutterFixes Volunteer)