Flutter how to remove gridview top space

538

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),
              ),
            ],
          ),
Share:
538
Mat Koffman
Author by

Mat Koffman

Updated on December 23, 2022

Comments

  • Mat Koffman
    Mat Koffman over 1 year

    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?