fluttergridviewsinglechildscrollviewflutter-expanded

How do I get GridView.builder to take up the remainder of the screen in flutter and scroll with another two widgets


I am having trouble getting my GridView.builder to scroll with the two widgets above it at the same time. I only want the search bar to remain on the screen when I am scrolling. The only way I have managed to hack it is by using a SizedBox but I want it to fill up whatever mobile device it is on.

Any help would be appreciated. I have marked the point I want it to scroll from in the code in capital letters.

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

import '../widgets.dart/search_results_chip.dart';

class ItemSearchResults extends StatelessWidget {
  const ItemSearchResults({super.key});

  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Column(
      children: [
        //search bar
        Row(
          children: [
            IconButton(
              onPressed: () {},
              icon: const Icon(Icons.arrow_back),
            ),
            Expanded(
              child: TextField(
                decoration: InputDecoration(
                    isCollapsed: true,
                    prefixIcon: const Icon(Icons.category),
                    suffixIcon: const Icon(Icons.search),
                    border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(30))),
              ),
            ),
            IconButton(
                onPressed: () {}, icon: const Icon(Icons.filter_alt_outlined))
          ],
        ),

        SizedBox(
          height: 6,
        ),

        //search results
        //SCROLL FROM HERE
        Expanded(
          child: SingleChildScrollView(
            child: Column(
              children: [
                Container(
                  padding: const EdgeInsets.all(8),
                  height: 60,
                  child: ListView(
                    scrollDirection: Axis.horizontal,
                    children: const [
                      SearchResultsChip(
                          title: 'Free Delivery', showDropDown: false),
                      SearchResultsChip(
                        title: 'Price',
                        showDropDown: true,
                      ),
                      SearchResultsChip(
                          title: 'Estimated Delivery', showDropDown: true)
                    ],
                  ),
                ),

                //sort by
                Container(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(30),
                  ),
                  child: Row(
                    children: [
                      Text(
                        'Relevance',
                        style: TextStyle(color: Colors.white),
                      ),
                      IconButton(
                        onPressed: () {},
                        icon: Icon(
                          Icons.sort,
                          color: Colors.white,
                        ),
                      ),
                    ],
                  ),
                ),

                //Search Results
                Expanded(
                  child: GridView.builder(
                      itemCount: 10,
                      shrinkWrap: true,
                      physics: NeverScrollableScrollPhysics(),
                      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                          crossAxisCount: 2, crossAxisSpacing: 4),
                      itemBuilder: (context, index) {
                        return Column(
                          children: [
                            Expanded(
                              child: Container(
                                height: 150,
                                child: Image(
                                    height: 150,
                                    fit: BoxFit.cover,
                                    image: NetworkImage(
                                        'https://images.unsplash.com/photo-1633435597643-601bb3efc197?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTJ8fGVwb3h5JTIwdGFibGV8ZW58MHx8MHx8fDA%3D')),
                              ),
                            )
                          ],
                        );
                      }),
                )
              ],
            ),
          ),
        )
      ],
    ));
  }
}

Solution

  • Wrap your GridView.builder with SizedBox instead of Expanded

     //Search Results
      SizedBox(
        child: GridView.builder(),
      ),
    

    Result Screen - image