Ad

Gridview.count Doesn't Scroll Flutter

- 1 answer

In my app i put gridview.count in column widget but gridview.count doesn't scroll and give overflow in bottom so please give some suggestion

Here is my code

 @override
 Widget build(BuildContext context) {
 return Stack(
  children: <Widget>[
    Image.asset(
      "images/background.png",
      height: MediaQuery.of(context).size.height,
      width: MediaQuery.of(context).size.width,
      fit: BoxFit.fill,
    ),
    Scaffold(
      backgroundColor: Color(0x00000000),
      body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Container(
                child: Padding(
                  padding: EdgeInsets.only(top: 50,bottom: 10),
                  child: Row(
                    children: <Widget>[
                      Spacer(flex: 2),
                      Text(
                        'Interests',
                        textAlign: TextAlign.center,
                        overflow: TextOverflow.ellipsis,
                        maxLines: 1,
                        style: TextStyle(
                          color: Color(0xFF0066CB),
                          fontSize: 20.0,
                        ),
                      ),
                      Spacer(),
                      Expanded(
                        child:SvgPicture.asset(
                          "images/vector.svg",
                          height: 30.0,
                          width: 30.0,
                        ),
                      )
                    ],
                  ),
                ),
              ),
              Padding(
                padding: EdgeInsets.only(top: 10,bottom: 90,left: 10,right: 10),
                child: GridView.count(
                     scrollDirection: Axis.vertical,
                     crossAxisCount: 3,
                     crossAxisSpacing: 5.0,
                     mainAxisSpacing: 5.0,
                     shrinkWrap: true,
                     children: List.generate(20, (index) {
                       return Padding(
                         padding: EdgeInsets.all(5.0),
                         child: Container(
                           child: SvgPicture.asset(
                             "images/register_top_logo_new.svg",
                           ),
                           padding: EdgeInsets.all(20.0),
                           height: 135.0,
                           width: 135.0,
                           decoration: BoxDecoration(
                             border: Border.all(
                               width: 1.0,
                               color: Color(0xFFF9AD16),
                             ),
                           ),
                         ),
                       );
                     },
                     ),
                   ),
              ),
            ],
          ),
       ),
     ),
    ],
   );
 }

here is log i get when I run the app

I/flutter (16748): The relevant error-causing widget was:
I/flutter (16748):   Column
I/flutter (16748):   file:///C:/Users/mayur/AndroidStudioProjects/flutter/webinar-mobile/lib/activities/interests_activity.dart:30:22
I/flutter (16748): 
I/flutter (16748): The overflowing RenderFlex has an orientation of Axis.vertical.
I/flutter (16748): The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and
I/flutter (16748): black striped pattern. This is usually caused by the contents being too big for the RenderFlex.
I/flutter (16748): Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the
I/flutter (16748): RenderFlex to fit within the available space instead of being sized to their natural size.
I/flutter (16748): This is considered an error condition because it indicates that there is content that cannot be
I/flutter (16748): seen. If the content is legitimately bigger than the available space, consider clipping it with a
I/flutter (16748): ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex,
I/flutter (16748): like a ListView.
I/flutter (16748): The specific RenderFlex in question is: RenderFlex#42dda relayoutBoundary=up5 OVERFLOWING:
I/flutter (16748):   needs compositing
I/flutter (16748):   creator: Column ← Center ← _BodyBuilder ← MediaQuery ← LayoutId-[<_ScaffoldSlot.body>] ←
I/flutter (16748):     CustomMultiChildLayout ← AnimatedBuilder ← DefaultTextStyle ← AnimatedDefaultTextStyle ←
I/flutter (16748):     _InkFeatures-[GlobalKey#417d7 ink renderer] ← NotificationListener<LayoutChangedNotification> ←
I/flutter (16748):     PhysicalModel ← ⋯
I/flutter (16748):   parentData: offset=Offset(0.0, 0.0) (can use size)
I/flutter (16748):   constraints: BoxConstraints(0.0<=w<=360.0, 0.0<=h<=640.0)
I/flutter (16748):   size: Size(360.0, 640.0)
I/flutter (16748):   direction: vertical
I/flutter (16748):   mainAxisAlignment: start
I/flutter (16748):   mainAxisSize: max
I/flutter (16748):   crossAxisAlignment: center
I/flutter (16748):   verticalDirection: down
I/flutter (16748): ◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
I/flutter (16748): ════════════════════════════════════════════════════════════════════════════════════════════════════
I/flutter (16748): unhandled element metadata; Picture key: AssetBundlePictureKey(bundle: PlatformAssetBundle#bcd18(), name: "images/register_top_logo_new.svg", colorFilter: null)

this i got when I run this app overflow in bottom and doesn't scroll

So here gridview.count doesn't scroll,i tried to use gridview.builder but it give same error so tell me where I made mistake in this.

Ad

Answer

Just wrap your grid view with Expanded widget like this

Expanded(
   child: Padding(
                padding: EdgeInsets.only(top: 10,bottom: 90,left: 10,right: 10),
                child: GridView.count(
                     scrollDirection: Axis.vertical,
                     crossAxisCount: 3,
                     crossAxisSpacing: 5.0,
                     mainAxisSpacing: 5.0,
                     shrinkWrap: true,
                     children: List.generate(20, (index) {
                       return Padding(
                         padding: EdgeInsets.all(5.0),
                         child: Container(
                           child: SvgPicture.asset(
                             "images/register_top_logo_new.svg",
                           ),
                           padding: EdgeInsets.all(20.0),
                           height: 135.0,
                           width: 135.0,
                           decoration: BoxDecoration(
                             border: Border.all(
                               width: 1.0,
                               color: Color(0xFFF9AD16),
                             ),
                           ),
                         ),
                       );
                     },
                     ),
                   ),
              ),
)
Ad
source: stackoverflow.com
Ad