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?
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
....
)