How to make a gridview for all devices in Flutter?

user_12492675 0
Viewed 379

I have a regular GridView with an image and a text below it in my app. I recently used device preview to see how it appears on other devices and it appears very different on tablets vs on small phones. Is it possible to make a single grid with even spacing on all devices so that it doesn't differ so much? This is my code:

GridView.builder(
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3,
                mainAxisSpacing: 15.0,
                crossAxisSpacing: 10.0,
                childAspectRatio: MediaQuery.of(context).size.width /
                    (MediaQuery.of(context).size.height / 1.92),
              ),
              itemCount: 100,
              itemBuilder: (context, index) {
                return Column(
                  children: <Widget>[
                    Expanded(
                      child: ClipRRect(
                        borderRadius: BorderRadius.all(Radius.circular(15.0)),
                        child: GridTile(
                          child: Image.network(
                            'https://lh3.googleusercontent.com/proxy/DC95dZwFErJk5toYcgiDngZbOnQuvHsZHMe7hIUol_dlykLi3xgJljZlljxJJU2WM2jACnOpHXjidqamjHWIOQ6DrABhkXahUzKwQSIC9dXPGJb8NhqJiLxRNcEEQseKAH9DlEHYgBEsMtY8pqubmv3HU2L15i5CJyuGs5XFhw',
                            height: 150,
                            fit: BoxFit.fill,
                          ),
                        ),
                      ),
                    ),
                    Padding(
                        padding: const EdgeInsets.only(top: 2.0),
                        child: RichText(
                          overflow: TextOverflow.ellipsis,
                          textAlign: TextAlign.center,
                          maxLines: 1,
                          text: TextSpan(
                            text: 'Hello',
                            style: kTasksStyle.copyWith(
                              color: kDarkBlue,
                              fontSize: getValueForScreenType<double>(
                                  context: context, mobile: 14, tablet: 20),
                            ),
                          ),
                        )),
                  ],
                );
              },
            ),

This is how it appears on a small android phone (320x560): enter image description here

And this is how it appears on a tablet: enter image description here

dart flutter user-interface
1 Answers

Please correct me if I misunderstand you question or you need clarification.

I think you problem here is due to the fact you did not use media query on the mainAxisSpacing and the crossAxisSpacing so the larger the device you use the larger the space between the grid items would become. You also seemed to do the same thing with the Text.

user_121542860
Related