Flutter: Remove Extra Space from SliverGrid

Question

Im working on a grid of containers that should be displayed.

The current app looks like this

as you can see, there's a giant space between each row.

I found this solution: Flutter remove space between GridView row however the structure and Sliver Widget used it's different.

Right now this is how i have my SliverGrid.

SliverGrid(
                            gridDelegate:
                                SliverGridDelegateWithFixedCrossAxisCount(
                              crossAxisCount: 2,
                              childAspectRatio: 1.15,
                              mainAxisSpacing: 0,
                              crossAxisSpacing: 0,
                            ),
                            delegate: SliverChildBuilderDelegate(
                              (BuildContext context, int index) {
                                print(index);
                                return HourMenuWidget(
                                  active: _selectedMainPage == index,
                                  onTap: () {
                                    setState(() {
                                      _selectedMainPage = index;
                                    });
                                  },
                                  icon: Icons.dashboard,
                                  title:
                                      provider.doctors[0].hoursAvailable[index],
                                );
                              },
                              childCount:
                                  provider.doctors[0].hoursAvailable.length,
                            ),
                          ),

and the Widget HourMenuWidget

import 'package:flutter/material.dart';

class HourMenuWidget extends StatelessWidget {
  const HourMenuWidget({this.active, this.icon, this.title, this.onTap});
  final bool active;
  final IconData icon;
  final String title;
  final Function onTap;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        margin: EdgeInsets.symmetric(horizontal: 5.0, vertical: 50.0),
        decoration: BoxDecoration(
          color: active
              ? Color.fromRGBO(241, 115, 176, 1.0)
              : Color.fromRGBO(233, 233, 233, 1.0),
          borderRadius: BorderRadius.circular(10),
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              title ?? "",
              style: TextStyle(
                  color: active ? Colors.white : Colors.black, fontSize: 12),
            )
          ],
        ),
      ),
    );
  }
}

I need help to know how to remove those gaps of spaces between each row :(

score 1 · Accepted Answer · answered Jul 30 '20 at 01:13

This is due to the set vertical margin your hour menu widget. You can decrease the margin

import 'package:flutter/material.dart';

class HourMenuWidget extends StatelessWidget {
  const HourMenuWidget({this.active, this.icon, this.title, this.onTap});
  final bool active;
  final IconData icon;
  final String title;
  final Function onTap;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        margin: EdgeInsets.symmetric(horizontal: 5.0, vertical: 25.0), //vertical margin here
        decoration: BoxDecoration(
          color: active
              ? Color.fromRGBO(241, 115, 176, 1.0)
              : Color.fromRGBO(233, 233, 233, 1.0),
          borderRadius: BorderRadius.circular(10),
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              title ?? "",
              style: TextStyle(
                  color: active ? Colors.white : Colors.black, fontSize: 12),
            )
          ],
        ),
      ),
    );
  }
}

Actually the margin was some testing, because if i took it off, then all the cells gets align but with 0 space between then, and i required a small gap — Luis Cardoza Bird, Jul 30 '20 at 02:03
Alright, you can remove the margin completely and then in your `SliverGridDelegateWithFixedCrossAxisCount` you could increase the value of `mainAxisSpacing` and `crossAxisSpacing` to have some space between the cells — ByteMe, Jul 30 '20 at 13:33

Flutter: Remove Extra Space from SliverGrid

1 Answers1