CODEWITHSUNDEEP
flutterdart
delmin
delmin

Reputation: 2690

Change height of row in GridView builder to fixed height

I've noticed that GridView makes each child a square.. Is there any way to adjust height of each child which means entire row of GridView row in GridView.builder?

In this example I want to have each input next to each other.

List<Map<String, dynamic>> list = [
  {'description': 'des1'},
  {'description': 'des2'},
  {'description': 'des3'},
  {'description': 'des4'},
  {'description': 'des5'},
  {'description': 'des6'}
];

class _MaterialScreenState extends State<MaterialScreen> {
  String text = '';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Column(
      children: <Widget>[
        Text(text),
        GridView.builder(
            shrinkWrap: true,
            itemCount: list.length,
            gridDelegate:
                SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 5),
            itemBuilder: (BuildContext context, int index) {
              return TextFormField(
                textAlign: TextAlign.center,
                onTap: () => setState(() {
                  text = list[index]['description'];
                }),
                decoration: InputDecoration(border: OutlineInputBorder()),
              );
            }),
      ],
    ));

Problem:

enter image description here

Reason:

enter image description here

Upvotes: 1

Views: 276

Answers (2)

Yuu Woods
Yuu Woods

Reputation: 1348

How about this?

gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
  maxCrossAxisExtent: 200,
  childAspectRatio: 3,
),

enter image description here

enter image description here

Upvotes: 1

Yuu Woods
Yuu Woods

Reputation: 1348

Yoy can use "childAspectRatio".

gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
  crossAxisCount: 5,
  childAspectRatio: 2,
),

sample

Upvotes: 0

Related Questions