Flutter: How to fix "A RenderFlex overflowed by pixels " error?

Question

I am using GridView in my Flutter app to display images and their titles. Please check the below code.

import 'package:flutter/material.dart';  import '../common_ui/search_bar.dart';  class PurchaseProductsPage extends StatelessWidget {   @override   Widget build(BuildContext context) {     // TODO: implement build     return PurchaseProductsUI();   } }  class PurchaseProductsUI extends StatefulWidget {   @override   State<StatefulWidget> createState() {     // TODO: implement createState     return _PurchaseProductUIState();   } }  class _PurchaseProductUIState extends State<PurchaseProductsUI> {   @override   Widget build(BuildContext context) {     // TODO: implement build     return ListView(       children: <Widget>[         Container(           margin: EdgeInsets.all(20),           child: SearchBar(),         ),         Container(             margin: EdgeInsets.all(20),             child: GridView.builder(                 physics: ScrollPhysics(), // to disable GridView's scrolling                 shrinkWrap: true,                 itemCount: 20,                 gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(                     crossAxisCount: 2),                 itemBuilder: (BuildContext context, int index) {                   return Container(                       padding: EdgeInsets.all(5), child: _buildImageBoxes());                 })),       ],     );   }    Widget _buildImageBoxes() {     return     Column(       children: <Widget>[         Container(           child: Image.network("https://picsum.photos/200/300/?random"),         ),         Container(           padding: EdgeInsets.all(10),           child:  Text("Text"),        )       ],     );    } } 

I get the following error and UI when I run the above code

I/flutter ( 2743): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════ I/flutter ( 2743): The following message was thrown during layout: I/flutter ( 2743): A RenderFlex overflowed by 111 pixels on the bottom. I/flutter ( 2743): The overflowing RenderFlex has an orientation of Axis.vertical. I/flutter ( 2743): The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and I/flutter ( 2743): black striped pattern. This is usually caused by the contents being too big for the RenderFlex. I/flutter ( 2743): Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the I/flutter ( 2743): RenderFlex to fit within the available space instead of being sized to their natural size. I/flutter ( 2743): This is considered an error condition because it indicates that there is content that cannot be I/flutter ( 2743): seen. If the content is legitimately bigger than the available space, consider clipping it with a I/flutter ( 2743): ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex, I/flutter ( 2743): like a ListView. I/flutter ( 2743): The specific RenderFlex in question is: I/flutter ( 2743):   RenderFlex#4a1bb OVERFLOWING I/flutter ( 2743):   creator: Column ← Padding ← Container ← RepaintBoundary-[<14>] ← IndexedSemantics ← I/flutter ( 2743):   NotificationListener<KeepAliveNotification> ← KeepAlive ← AutomaticKeepAlive ← SliverGrid ← I/flutter ( 2743):   MediaQuery ← SliverPadding ← ShrinkWrappingViewport ← ⋯ I/flutter ( 2743):   parentData: offset=Offset(5.0, 5.0) (can use size) I/flutter ( 2743):   constraints: BoxConstraints(w=150.0, h=150.0) I/flutter ( 2743):   size: Size(150.0, 150.0) I/flutter ( 2743):   direction: vertical I/flutter ( 2743):   mainAxisAlignment: start I/flutter ( 2743):   mainAxisSize: max I/flutter ( 2743):   crossAxisAlignment: center I/flutter ( 2743):   verticalDirection: down I/flutter ( 2743): ◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤ I/flutter ( 2743): ════════════════════════════════════════════════════════════════════════════════════════════════════ I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom. I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom. I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom. I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom. I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom. I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom. I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom. I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom. I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom. I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom. I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom. I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom. I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom. I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom. I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom. I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom. I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom. I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom. I/flutter ( 2743): Another exception was thrown: A RenderFlex overflowed by 111 pixels on the bottom. Reloaded 0 of 446 libraries in 1,179ms. 

Below is the UI

How can I solve this?