Another exception was thrown: A RenderFlex overflowed by 51 pixels on the bottom

Question

im trying to add GridView, i got the data right in the app how ever i hava this error:

Another exception was thrown: A RenderFlex overflowed by 51 pixels on the bottom. i guess i need to add a listview as found after searching abt this error, but i dont know how to add in the code as i'm a new to flutter

 import 'package:flutter/material.dart';
    import 'GridList.dart';
    void main() => runApp(MyApp());

    class MyApp extends StatelessWidget {
        @override
        Widget build(BuildContext context) {
            return new MaterialApp(
                home: new Scaffold(
                    body: Column(
      children: <Widget>[
        Container(
          height: 240,
          width: double.infinity,
     color: Colors.blueAccent,
        ),
    Expanded( 
      child:GridView.count(
      primary: false,
      padding: const EdgeInsets.all(20),
      crossAxisSpacing: 10,
      mainAxisSpacing: 10,
      crossAxisCount: 2,
      children: <Widget>[
       GridList()
      ],
    )

    )

      ],
    )
                ),
            );
        }
    }


 import 'package:flutter/material.dart'; 
    class GridList extends StatelessWidget {
      Items item1 = new Items(
          title: "Calendar",
          subtitle: "March, Wednesday",
          event: "3 Events",
      );
      Items item2 = new Items(
        title: "Groceries",
        subtitle: "Bocali, Apple",
        event: "4 Items",
      );
      Items item3 = new Items(
        title: "Locations",
        subtitle: "Lucy Mao going to Office",
        event: "",
      );
      Items item4 = new Items(
        title: "Activity",
        subtitle: "Rose favirited your Post",
        event: "",
      );
      Items item5 = new Items(
        title: "To do",
        subtitle: "Homework, Design",
        event: "4 Items",
      );
      Items item6 = new Items(
        title: "Settings",
        subtitle: "",
        event: "2 Items",
      );

      @override
      Widget build(BuildContext context) {
        List<Items> myList = [item1, item2, item3, item4, item5, item6];
        var color = 0xff453658;

        return Flexible(
          child: GridView.count(
              childAspectRatio: 1.0,
              padding: EdgeInsets.only(left: 16, right: 16),
              crossAxisCount: 2,
              crossAxisSpacing: 18,
              mainAxisSpacing: 18,
              children: myList.map((data) {
                return Container(
                  decoration: BoxDecoration(
                      color: Color(color), borderRadius: BorderRadius.circular(10)),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      SizedBox(
                        height: 14,
                      ),
                      Text(
                        data.title,
                      ), 
                      SizedBox(
                        height: 8,
                      ),
                      Text(
                        data.subtitle,
                      ),
                      SizedBox(
                        height: 14,
                      ),
                      Text(
                        data.event,

                      ),
                    ],
                  ),
                );
              }).toList()),
        );
      }
    }
    class Items {
      String title;
      String subtitle;
      String event;
      String img;
      Items({this.title, this.subtitle, this.event, this.img});
    }

Answer 1

I made some changes to your code. I have attached a screenshot of the output You were basically using a Fliexible and Expanded together. And nested GridView OUTPUT FILE NAME :main.dart

import 'package:flutter/material.dart';
import 'GridList.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
          body: Column(
        children: <Widget>[
          Container(
            height: 240,
            width: double.infinity,
            color: Colors.blueAccent,
          ),
          Expanded(child: GridList())
        ],
      )),
    );
  }
}

FILE NAME: GridList.dart

import 'package:flutter/material.dart';

class GridList extends StatelessWidget {
  Items item1 = new Items(
    title: "Calendar",
    subtitle: "March, Wednesday",
    event: "3 Events",
  );
  Items item2 = new Items(
    title: "Groceries",
    subtitle: "Bocali, Apple",
    event: "4 Items",
  );
  Items item3 = new Items(
    title: "Locations",
    subtitle: "Lucy Mao going to Office",
    event: "",
  );
  Items item4 = new Items(
    title: "Activity",
    subtitle: "Rose favirited your Post",
    event: "",
  );
  Items item5 = new Items(
    title: "To do",
    subtitle: "Homework, Design",
    event: "4 Items",
  );
  Items item6 = new Items(
    title: "Settings",
    subtitle: "",
    event: "2 Items",
  );

  @override
  Widget build(BuildContext context) {
    List<Items> myList = [item1, item2, item3, item4, item5, item6];
    var color = 0xff453658;

    return GridView.count(
        childAspectRatio: 1.0,
        padding: EdgeInsets.only(left: 16, right: 16),
        crossAxisCount: 2,
        crossAxisSpacing: 18,
        mainAxisSpacing: 18,
        children: myList.map((data) {
          return Container(
            decoration: BoxDecoration(
                color: Color(color), borderRadius: BorderRadius.circular(10)),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                SizedBox(
                  height: 14,
                ),
                Text(
                  data.title,
                ),
                SizedBox(
                  height: 8,
                ),
                Text(
                  data.subtitle,
                ),
                SizedBox(
                  height: 14,
                ),
                Text(
                  data.event,
                ),
              ],
            ),
          );
        }).toList());
  }
}

class Items {
  String title;
  String subtitle;
  String event;
  String img;
  Items({this.title, this.subtitle, this.event, this.img});
}

Answer 2

Try the following:

SingleChildScrollView(
    child:Expanded( 
      child:GridView.count(
       primary: false,
       padding: const EdgeInsets.all(20),
       crossAxisSpacing: 10,
       mainAxisSpacing: 10,
       crossAxisCount: 2,
       children: <Widget>[
        GridList()
      ],
    )
)

A box in which a single widget can be scrolled.

This widget is useful when you have a single box that will normally be entirely visible, for example a clock face in a time picker, but you need to make sure it can be scrolled if the container gets too small in one axis (the scroll direction).

https://api.flutter.dev/flutter/widgets/SingleChildScrollView-class.html