Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter how to remove gridview top space

I am getting a space on top of my gridview. I have tried to remove it without success. It looks like this:

What I want:

Here is my code:

Container(
      margin: EdgeInsets.all(10),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
              Text(
                "Check",
                style: TextStyle(color: Colors.black, fontSize: 18, fontWeight: FontWeight.bold),
                textAlign: TextAlign.left,
              ),
              GridView.count(
                physics: NeverScrollableScrollPhysics(),
                shrinkWrap: true,
            crossAxisCount: 1,
            crossAxisSpacing: 2,
            mainAxisSpacing: 10,
            childAspectRatio: 5.1,
            children: <Widget>[
              GestureDetector(
                child: _buildWidget("Car", 0),
                onTap: () => setState(() => _languageIndex = 0),
              ),
              GestureDetector(
                child: _buildWidget("Boat", 1),
                onTap: () => setState(() => _languageIndex = 1),
              ),
            ],
          ),
      ],
    ));

Widget _buildWidget(String language, int index) {
    bool isSelected = _languageIndex == index;
    return Container(
      alignment: Alignment.center,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(4),
        border: Border.all(color: isSelected ? Colors.blue.withOpacity(1.0) : Colors.black26),
        color: isSelected ? Colors.white.withOpacity(0.0) : Colors.white
      ),
      child:
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          SizedBox(width:10),
      Text(
        language,
        style: TextStyle(fontSize: 16,fontWeight: FontWeight.bold, color: isSelected ? Colors.black : Colors.black26),
      ),
      SizedBox(width:20),
      ],)
    );
  }

What can I do to remove the space between the text and the gridview? Or can I do it in another way to get the output I am looking for?

like image 277
Mat Koffman Avatar asked Mar 23 '26 18:03

Mat Koffman


1 Answers

The GridView widget has a default padding, you can remove the padding by giving it a padding of EgdeInsets.zero.

 GridView.count(
                       padding: EdgeInsets.zero // set padding to zero
                physics: NeverScrollableScrollPhysics(),
                shrinkWrap: true,
            crossAxisCount: 1,
            crossAxisSpacing: 2,
            mainAxisSpacing: 10,
            childAspectRatio: 5.1,
            children: <Widget>[
              GestureDetector(
                child: _buildWidget("Car", 0),
                onTap: () => setState(() => _languageIndex = 0),
              ),
              GestureDetector(
                child: _buildWidget("Boat", 1),
                onTap: () => setState(() => _languageIndex = 1),
              ),
            ],
          ),
like image 127
V.N Avatar answered Mar 26 '26 10:03

V.N



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!