Flutter showing extra space in gridview how can i remove it

Viewed 5233

I have a simple widget and in the widget, I have a brown and a grid view. The issue is it's showing extra space in end because of height. If I remove height then the widget isn't showing.

Code

class PodcastSection extends StatelessWidget {
  final String title;
  final DiscoverExtended arg;
  final List<Item> listOfPodcasts;
  PodcastSection({@required this.title, this.arg, this.listOfPodcasts});
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(top: 18),
      padding: EdgeInsets.only(left: 1, right: 1),
      height: MediaQuery.of(context).size.height * 0.66,
      decoration: BoxDecoration(
        border: Border(
          bottom: BorderSide(color: Color(0xFF707070).withOpacity(0.35)),
        ),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          SizedBox(
            height: MediaQuery.of(context).size.height * 0.005,
          ),
          //TOP Row
          Row(
            crossAxisAlignment: CrossAxisAlignment.end,
            children: [
              Text(
                title.toUpperCase(),
                style: TextStyle(
                  fontFamily: "Segoe UI",
                  fontSize: 20,
                  color: Colors.white,
                ),
              ),
              Spacer(),
              GestureDetector(
                onTap: () {
                  Navigator.pushNamed(context, 'discover-extended',
                      arguments: arg);
                },
                child: Text(
                  "View all",
                  style: TextStyle(
                    fontFamily: "Product Sans",
                    fontSize: 15,
                    color: Color(0xFF969696),
                  ),
                ),
              )
            ],
          ),
          //Podcast Item

          //Podcast Item
          Expanded(
            child: GridView.count(
              // shrinkWrap: true,
              // primary: true,
              physics: new NeverScrollableScrollPhysics(),
              crossAxisCount: 2,
              childAspectRatio: 1.1,
              children: listOfPodcasts
                  .map<Widget>(
                    (e) => GestureDetector(
                      child: PodcastItem(podcastInfo: e),
                      onTap: () {
                        Navigator.pushNamed(context, "episode", arguments: e);
                      },
                    ),
                  )
                  .toList(),
            ),
          ),
        ],
      ),
    );
  }
}

You can see in the image its showing space at the end

enter image description here

I need to remove the extra space in end I try to remove the height and wrap Container in Extended but its not showing the entire widget row and grid both.

6 Answers

In the GridView.count() Widget, there's an option for assigning padding.

Try that: padding: EdgeInsets.zero

Have you tried this? Remove Expanded widget and only set shrinkWrap to true maybe this will work for you

          GridView.count(
          shrinkWrap: true,
          physics: new NeverScrollableScrollPhysics(),
          crossAxisCount: 2,
          childAspectRatio: 1.1,
          children: listOfPodcasts
              .map<Widget>(
                (e) => GestureDetector(
                  child: PodcastItem(podcastInfo: e),
                  onTap: () {
                    Navigator.pushNamed(context, "episode", arguments: e);
                  },
                ),
              )
              .toList(),
        ),

There is one property in Gridview.count i.e. the padding property. Set it like this => padding: EdgeInsets.zero.

This will eliminate all the unwanted spaces around your gridview.

the problem you gave a parent container a specific height remove this line : height: MediaQuery.of(context).size.height * 0.66,

You can try the next code:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  final Color darkBlue = Color.fromARGB(255, 18, 32, 47);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<String> podcasts = [
    'Tech me',
    'Grounded',
    'Breakdonw',
    'Today in Focus',
    'Feel better',
    'No such thing',
    'Agile',
    'Driven Test Dev'
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: [
          //TOP Row
          SafeArea(
            child: ListTile(
                title: Text(
                  'Top Rated',
                  style: TextStyle(
                    fontFamily: "Segoe UI",
                    fontSize: 20,
                    color: Colors.white,
                  ),
                ),
                trailing: GestureDetector(
                  onTap: () {},
                  child: Text(
                    "View all",
                    style: TextStyle(
                      fontFamily: "Product Sans",
                      fontSize: 15,
                      color: Color(0xFF969696),
                    ),
                  ),
                )),
          ),
          //Podcast Item
            GridView.count(
              shrinkWrap: true,
              // primary: true,
              physics: new NeverScrollableScrollPhysics(),
              crossAxisCount: 2,
              childAspectRatio: 1.1,
              children: podcasts
                  .map((podcast) => Container(
                        width: 200,
                        child: Card(
                          child: Center(child: Text(podcast)),
                        ),
                      ))
                  .toList(),
            ),
        ],
      ),
    );
  }
}

This solves your issue, however, I really recommend you to avoid using a Container as a parent, which gives you a lot of problems, when you use height: MediaQuery.of(context).size.height * 0.66, you are saying to Flutter, this widget will have a fixed size, and that does not fit good for a Grid.

Also, be careful with the Expand widgets, I removed the expanded since you cannot use a Listview and an Expanded as a child.

Note: If you want the "Top-Rated" and "View all" to don't move, you will need to use a CustomScrollView and a SliverPersistenHeader, but will require more code and knowledge.

class PodcastSection extends StatelessWidget {
  final String title;
  final DiscoverExtended arg;
  final List<Item> listOfPodcasts;
  PodcastSection({@required this.title, this.arg, this.listOfPodcasts});
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(top: 18),
      padding: EdgeInsets.only(left: 1, right: 1),
      height: MediaQuery.of(context).size.height * 0.66,
      decoration: BoxDecoration(
        border: Border(
          bottom: BorderSide(color: Color(0xFF707070).withOpacity(0.35)),
        ),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          SizedBox(
            height: MediaQuery.of(context).size.height * 0.005,
          ),
          //TOP Row
          Row(
            crossAxisAlignment: CrossAxisAlignment.end,
            children: [
              Text(
                title.toUpperCase(),
                style: TextStyle(
                  fontFamily: "Segoe UI",
                  fontSize: 20,
                  color: Colors.white,
                ),
              ),
              Spacer(),
              GestureDetector(
                onTap: () {
                  Navigator.pushNamed(context, 'discover-extended',
                      arguments: arg);
                },
                child: Text(
                  "View all",
                  style: TextStyle(
                    fontFamily: "Product Sans",
                    fontSize: 15,
                    color: Color(0xFF969696),
                  ),
                ),
              )
            ],
          ),
          //Podcast Item

          //Podcast Item
          Expanded(
            child: MediaQuery.removePadding(
              context: context,
              removeTop: true,
              child: GridView.count(
                // shrinkWrap: true,
                // primary: true,
                physics: new NeverScrollableScrollPhysics(),
                crossAxisCount: 2,
                childAspectRatio: 1.1,
                children: listOfPodcasts
                    .map<Widget>(
                      (e) => GestureDetector(
                    child: PodcastItem(podcastInfo: e),
                    onTap: () {
                      Navigator.pushNamed(context, "episode", arguments: e);
                    },
                  ),
                )
                    .toList(),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Just Add This Line Before Grid View

MediaQuery.removePadding(
  context: context,
  removeTop: true,
  child: Container(),
)
Related