Flutter GridView Widget for Smaller Screens

Question

I am trying to build a 2x3 GridView in my app, it works quite fine on big screen devices but for devices like iPhone SE (4 inch) GridView is not scaling it self. It appears with scroll or overflows from the bottom.

How can I make sure, all the other widgets are placed to their positions and rest of the space is used by GridView and without scroll, every item is visible? You can check the code below or also can check this codepen

import 'package:flutter/material.dart';

class StatsScreen extends StatefulWidget {
 static const String id = 'stats_screen';

 StatsScreen({Key key}) : super(key: key);
 @override
 _StatsScreenState createState() => _StatsScreenState();
}

class _StatsScreenState extends State<StatsScreen> {
 @override
 Widget build(BuildContext context) {
   return Scaffold(
     body: Container(
       padding:
           EdgeInsets.only(top: 60.0, left: 20.0, right: 20.0, bottom: 0.0),
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.stretch,
         children: <Widget>[
           Text(
             'MyText',
             style: TextStyle(fontSize: 30.0, fontWeight: FontWeight.w700),
           ),
           SizedBox(
             height: 20,
           ),
           Expanded(
             child: GridView.count(
               primary: false,
               shrinkWrap: true,
               padding: const EdgeInsets.all(0),
               crossAxisSpacing: 10,
               mainAxisSpacing: 10,
               crossAxisCount: 2,
               children: <Widget>[
                 Container(
                   padding: const EdgeInsets.all(8),
                   child: const Text('He\'d have you all unravel at the'),
                   color: Colors.teal[100],
                 ),
                 Container(
                   padding: const EdgeInsets.all(8),
                   child: const Text('Heed not the rabble'),
                   color: Colors.teal[200],
                 ),
                 Container(
                   padding: const EdgeInsets.all(8),
                   child: const Text('Sound of screams but the'),
                   color: Colors.teal[300],
                 ),
                 Container(
                   padding: const EdgeInsets.all(8),
                   child: const Text('Who scream'),
                   color: Colors.teal[400],
                 ),
                 Container(
                   padding: const EdgeInsets.all(8),
                   child: const Text('Revolution is coming...'),
                   color: Colors.teal[500],
                 ),
                 Container(
                   padding: const EdgeInsets.all(8),
                   child: const Text('Revolution, they...'),
                   color: Colors.teal[600],
                 ),
               ],
             ),
           ),
           SizedBox(
             height: 30.0,
           ),
           RaisedButton(
             onPressed: () {},
             child: Text(
               'MyRaisedButton',
               style: TextStyle(
                 fontSize: 30.0,
                 color: Colors.white,
               ),
             ),
             color: Colors.red[900],
             shape: RoundedRectangleBorder(
               borderRadius: BorderRadius.circular(30.0),
             ),
           )
         ],
       ),
     ),
   );
 }
}

score 1 · Accepted Answer · answered May 04 '20 at 21:52

The GridView.count has a property called childAspectRatio.

childAspectRatio is the ratio of the cross-axis to the main-axis extent of each child.

You can adjust the properties starting from 0 to any value to your desired app requirement.

I hope this helps.

NOTE: The childAspectRatio must have a value greater than 0.

Check the code below for an example:

GridView.count(
               childAspectRatio: 1.0,
               primary: false,
               shrinkWrap: true,
               padding: const EdgeInsets.all(0),
               crossAxisSpacing: 10,
               mainAxisSpacing: 10,
               crossAxisCount: 2,
               children: <Widget>[
                  ........
                   ]
              )

score 0 · Answer 2 · answered May 04 '20 at 21:51

0

try wrap the body in a SafeArea Widget.

answered May 04 '20 at 21:51

Gonzalo Gauto

181
10

Thnaks, I've tried that. Nothing overflows but GridView has an active scroll, some items are not visible. – btutal May 04 '20 at 22:32

Flutter GridView Widget for Smaller Screens

2 Answers2