Flutter. GridView inside Container

Question

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:carousel_slider/carousel_slider.dart';
import 'Login.dart';
class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        image:DecorationImage(
          image: AssetImage("images/black_background_logo.png"),
      fit: BoxFit.cover,
    )
      ),
      child: Column(
        children: [
          CarouselDemo(),
          HomePanel()
        ],
      ),
    );

  }

}

List images = [
  'https://skalka-app.ru/banners/1.png',
  'https://skalka-app.ru/banners/2.png',
  'https://skalka-app.ru/banners/3.png',
] ;
class CarouselDemo extends StatelessWidget {
  CarouselController buttonCarouselController = CarouselController();

  @override
  Widget build(BuildContext context) => CarouselSlider(
    options: CarouselOptions(
        height: MediaQuery.of(context).size.height*0.7,
      viewportFraction: 1.0,
      enableInfiniteScroll: true,
      reverse: false,
      autoPlay: true,
      autoPlayInterval: Duration(seconds: 8),
      autoPlayAnimationDuration: Duration(milliseconds: 800),
      autoPlayCurve: Curves.fastOutSlowIn,
    ),
    items: images.map((i) {
      return Builder(
        builder: (BuildContext context) {
          return Container(
              //width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height*0.7,

              decoration: BoxDecoration(
                  color: Colors.amber
              ),
              child: Image.network(i,fit: BoxFit.cover, height: MediaQuery.of(context).size.height*0.7,)
          );
        },
      );
    }).toList(),
  );
}

class HomePanel extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final double height = MediaQuery.of(context).size.height;
    List data = ["Twitter", "Reddit", "YouTube", "Facebook",
      "Vimeo", "GitHub", "GitLab", "BitBucket", "LinkedIn", "Medium",
      "Tumblr", "Instagram", "Pinterest"];
    List myWidgets = data.map((item) {
      return new RaisedButton(
          child: new Text(item),
          onPressed: () async {

          }
      );
    }).toList();
    GridView myGrid = GridView.count(
        crossAxisCount: 3,
        children: myWidgets
    );

    return Container(

      height: height*0.3,
      width: MediaQuery.of(context).size.width,
      color: Colors.red,
      child:  myGrid
      );


  }
}

I'm trying to add a GridView to a Container, but an indent appears at the top. Please tell me how to fix this?

I painted the Container red to show that there is a padding on top. I could not find a solution to this problem on the Internet. I'm new to Flutter, maybe I missed an important point in building this widget.

user_7652436 · Answer

You can try wrap GridView with a MediaQuery.removePadding() then set removeTop property to True.

MediaQuery.removePadding(
    context: context,
    removeTop: true,
    child: GridView(
     .......
    )
  );

user_5362583 · Answer

I have used your code pretty much, just for the Carousel, I have used the ListView.builder(). Rest is fine.

The catch is to use Expanded class inside your Column() to take the height automatically for the Carousel

Follow the code along, and see the result as well, no extra space in the UI in the GridView

class _MyHomePageState extends State {
  List images = [
    'https://skalka-app.ru/banners/1.png',
    'https://skalka-app.ru/banners/2.png',
    'https://skalka-app.ru/banners/3.png',
  ];
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        height: double.infinity,
        child: Column(
          children: [
            // Expanded used to take up the space
            Expanded(
              // ListView.builder, use your carousel here
              child: ListView.builder(
                shrinkWrap: true,
                itemCount: images.length,
                scrollDirection: Axis.horizontal,
                itemBuilder: (BuildContext context, int index){
                  // look at this as well, no height, only width
                  // given for the image
                  return Container(
                    width: MediaQuery.of(context).size.width,
                    decoration: BoxDecoration(
                      image: DecorationImage(
                        fit: BoxFit.cover,
                        image: NetworkImage(images[index])
                      )
                    )
                  );
                }
              )
            ),
            HomePanel()
          ],
        ),
      )
    );
  }
}


class HomePanel extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final double height = MediaQuery.of(context).size.height;
    List data = ["Twitter", "Reddit", "YouTube", "Facebook",
      "Vimeo", "GitHub", "GitLab", "BitBucket", "LinkedIn", "Medium",
      "Tumblr", "Instagram", "Pinterest"];
    List myWidgets = data.map((item) {
      return new RaisedButton(
          child: new Text(item),
          onPressed: () async {

          }
      );
    }).toList();
    GridView myGrid = GridView.count(
        crossAxisCount: 3,
        children: myWidgets
    );

    return Container(
      height: height*0.3,
      width: MediaQuery.of(context).size.width,
      color: Colors.red,
      child:  myGrid
    );
  }
}

Result

Look at the design closely in the result, no extra spacing or padding

Flutter. GridView inside Container

2 Answers