Height of text field breaks when used inside GridView.count

Question

I render some widgets using SingleChildScrollView and Column. Because the app can run on mutiple dimensions so I want to render the widgets sometimes in pairs like each 2 text fields beside each other and so on.

I tried to use GridView.count like this:

Column(
children: [
     GridView.count(
       crossAxisCount: crossAxisCount, // using mediaquery to get the count
       shrinkWrap: true,
       physics: const NeverScrollableScrollPhysics(),
       crossAxisSpacing: widget.width * 0.006,
       mainAxisSpacing: widget.height * 0.01,
       children: [
       const TextField(),
       const TextField(),
       ],
     ),
  ],
),

the text field itself is ok, but it takes much too much height, and if I pressed on the extra height it focuses on the input field. I tried wrapping it inside a sizedbox, constraintedbox but didn't work. tried using listview and singlechildscrollview and it was the normal behavior, where the text field only took the normal size. I also tried maxLines property and set it to 1 but no luck. What is the problem here?

Answer 1

Using intrinsic height widgets will not help:

You should use the property childAspectRatio within GridView which defines the percent between the mainAxisSize and CrossAxisSize.

it's important to understand how it works:

in your code your representing only 2 TextFields in the cross Axis, which means every text field will allocate the half of screen width.

hence text field width = 0.5 * screen width

when setting aspect ratio to say 2

then, text field height = 0.5 * screen width / 2 .

You got it! aspect ratio by default is 1 which means height and width both are equal.

GridView.count(

childAspectRatio: 2, // height of each child will be half of its width
....
)