Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – How to Use GridView in a SingleChildScrollView

I am creating a dashboard for my project where I need to display a grid of buttons. I am utilizing GridView for this purpose, but it’s causing issues when used with SingleChildScrollView.
Here is the code:

import 'dart:ffi';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:forest_fire/gridcard.dart';

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  TextEditingController textEditingController = TextEditingController();
  FocusNode focusNode = FocusNode();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
          top: true,
          child: Padding(
            padding: EdgeInsetsDirectional.fromSTEB(8, 0, 8, 0),
            child: SingleChildScrollView(
              child: Column(
                mainAxisSize: MainAxisSize.max,
                children: [
                  Padding(
                    padding: EdgeInsetsDirectional.fromSTEB(8.0, 0.0, 8.0, 0.0),
                    child: TextFormField(
                      controller: textEditingController,
                      focusNode: focusNode,
                      autofocus: true,
                      obscureText: false,
                      decoration: InputDecoration(
                          labelText: "Services",
                          labelStyle: Theme.of(context).textTheme.labelMedium?.copyWith(
                            fontFamily: 'Plus Jakarta Sans',
                            color: Color(0xFFA5A5A5),
                            letterSpacing: 0.0,
                            fontWeight: FontWeight.bold,
                          ),
                          hintStyle: Theme.of(context).textTheme.labelMedium?.copyWith(
                            fontFamily: 'Readex Pro',
                            letterSpacing: 0.0,
                          ),
                          enabledBorder: OutlineInputBorder(
                              borderSide: BorderSide(
                                color: Color(0xFF696969),
                                width: 2.0,
                              ),
                              borderRadius: BorderRadius.circular(24)
                          ),
                          errorBorder: OutlineInputBorder(
                              borderSide: BorderSide(
                                  color: Theme.of(context).colorScheme.error,
                                  width: 2.0
                              ),
                              borderRadius: BorderRadius.circular(24)
                          ),
                          focusedErrorBorder: OutlineInputBorder(
                              borderSide: BorderSide(
                                  color: Theme.of(context).colorScheme.error,
                                  width: 2.0
                              ),
                              borderRadius: BorderRadius.circular(24)
                          ),
                          prefixIcon: Icon(
                              Icons.search
                          ),
                          suffixIcon: Icon(
                              Icons.mic_none
                          )
                      ),
                      style: Theme.of(context).textTheme.bodyMedium?.copyWith(
                        fontFamily: 'Readex Pro',
                        letterSpacing: 0.0,
                      ),
                    ),
                  ),
                  Flexible(
                      child: Padding(
                        padding: const EdgeInsetsDirectional.fromSTEB(0.0, 16.0, 0.0, 0.0),
                        child: ClipRRect(
                          borderRadius: BorderRadius.circular(8),
                          child: Image.asset(
                            'assets/images/download_1.png',
                            width: 360,
                            height: 160,
                            fit: BoxFit.cover,
                          ),
                        ),
                      )
                  ),
                  Align(
                    alignment: const AlignmentDirectional(-1, 0),
                    child: Padding(
                      padding: const EdgeInsetsDirectional.fromSTEB(16, 16, 0, 0),
                      child: Text(
                        'POPULAR SERVICES',
                        style: Theme.of(context).textTheme.titleSmall?.copyWith(
                          fontFamily: 'Readex Pro',
                          letterSpacing: 0.0,
                        ),
                      ),
                    ),
                  ),
                  SizedBox(
                    height: 300,
                      child: GridView(
                        physics: const NeverScrollableScrollPhysics(),
                        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                            crossAxisCount: 3,
                            crossAxisSpacing: 10,
                            mainAxisSpacing: 10,
                            childAspectRatio: 1
                        ),
                        padding: EdgeInsets.zero,
                        shrinkWrap: true,
                        scrollDirection: Axis.vertical,
                        children: [
                          GridCard(iconData: Icons.fire_truck_outlined, text: "Fire Stations"),
                          GridCard(iconData: Icons.restore_sharp, text: "Logo"),
                          GridCard(iconData: Icons.content_paste_outlined, text: "FWI"),
                          GridCard(iconData: Icons.location_on_outlined, text: "Location Tracker"),
                          GridCard(iconData: Icons.keyboard_control_sharp, text: "More",),
                        ],
                      )
                  ),
                  Align(
                    alignment: const AlignmentDirectional(-1.0, 0.0),
                    child: Padding(
                      padding:
                      const EdgeInsetsDirectional.fromSTEB(16.0, 16.0, 0.0, 0.0),
                      child: Text(
                        'SERVICE CATEGORIES',
                        style: Theme.of(context).textTheme.titleSmall?.copyWith(
                          fontFamily: 'Readex Pro',
                          color: Theme.of(context).colorScheme.onPrimary,
                          letterSpacing: 0.0,
                        ),
                      ),
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsetsDirectional.fromSTEB(0.0, 8.0, 0.0, 8.0),
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(8.0),
                      child: Image.asset(
                        'assets/images/video_1.png',
                        width: 347.0,
                        height: 68.0,
                        fit: BoxFit.cover,
                      ),
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsetsDirectional.fromSTEB(0.0, 8.0, 0.0, 8.0),
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(8.0),
                      child: Image.asset(
                        'assets/images/video_1.png',
                        width: 347.0,
                        height: 68.0,
                        fit: BoxFit.cover,
                      ),
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsetsDirectional.fromSTEB(0.0, 8.0, 0.0, 8.0),
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(8.0),
                      child: Image.asset(
                        'assets/images/video_1.png',
                        width: 347.0,
                        height: 68.0,
                        fit: BoxFit.cover,
                      ),
                    ),
                  ),
                ],
              ),
            ),
          )
      ),
    );
  }
}

Note: I do not want my GridView to be scrollable. Instead, I want my Column to be scrollable and my GridView to be large enough to display all my gridCards.

Tags:

2

Answers


  1. 0

    Please try this code to use gridView in a singleChild Scroll view.

    SingleChildScrollView(
      child: Column(
        children: [
          // Other widgets can go here before the GridView
          GridView.count(
            shrinkWrap: true, // Important for SingleChildScrollView
            physics: NeverScrollableScrollPhysics(), // Disable GridView scrolling
            crossAxisCount: 2,
            children: List.generate(20, (index) {
              return Center(
                child: Text(
                  'Item $index',
                  style: TextStyle(fontSize: 20),
                ),
              );
            }),
          ),
          // Other widgets can go here after the GridView
        ],
      ),
    ),
  ),
    Login or Signup to reply.
  2. 0

    Your code will work, but Just remove the Flexible Widget from the scroll view:

    result:

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search