Textfield and MasonryGrid give error (Vertical viewport was given unbounded height)

Question

Masonry layout working properly without any other widgets, but not working when i add textfield and MasonryLayout together.

So i just want to these 2 widgets in column with scroll.....

TextField(
          decoration: InputDecoration(
            isDense: true,
            filled: true,
            fillColor: Colors.grey.withOpacity(0.1),
            border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(20),
              borderSide: BorderSide.none,
            ),
            
            hintText: 'Search',
            hintStyle: TextStyle(
              fontSize: 15,
              color: Colors.grey,
            ),
           
            prefixIcon: Icon(Icons.search, color: Colors.black,size: 20,),
        
          ),
        ),



MasonryGridView.builder(
    crossAxisSpacing: 8,
    mainAxisSpacing: 8,
    gridDelegate: SliverSimpleGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
    itemCount: 1,
    itemBuilder: (context, index) {
      return ClipRRect(
        child: Image.network("http://source.unsplash.com/random?sig=$index", ),

      );
    },
  ),

Answer 1

In your MasonryGridView set shrinkWrap true like this:

MasonryGridView.builder(
                physics: NeverScrollableScrollPhysics(), // <--- add this
                shrinkWrap: true, // <--- add this
                crossAxisSpacing: 8,
                mainAxisSpacing: 8,
                gridDelegate: SliverSimpleGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 2),
                itemCount: 1,
                itemBuilder: (context, index) {
                  return ClipRRect(
                    child: Image.network(
                      "http://source.unsplash.com/random?sig=$index",
                    ),
                  );
                },
              ),