It also gives me an error when I have taken GridView as an expended child

error:

RenderFlex children have non-zero flex but incoming height constraints are unbounded.

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

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  Widget topItem(){
    return Padding(
      padding: const EdgeInsets.all(15.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Text('Your Best Products',
            style: TextStyle(fontSize: 20,fontWeight: FontWeight.bold
            ),
          ),
      Padding(
        padding: const EdgeInsets.only(top: 20),
        child: SizedBox(
          height: 45,
          width: 300,
          child: TextField(

                decoration: InputDecoration(

                hintText:'Search here' ,
                suffixIcon:Icon(Icons.search) ,
                fillColor: Colors.grey,
                filled: true,
                border: OutlineInputBorder(
                    borderSide: BorderSide.none,
                    borderRadius: BorderRadius.circular(20.0)
                )
            ),

          ),
        ),
      ),
          const SizedBox(height: 12,),
          Container(
            height: 50,

            child: ListView.separated(
              shrinkWrap: true,
              scrollDirection: Axis.horizontal,
                itemBuilder: (context,index){
                  return Card(
                    child: MaterialButton(
                      onPressed: (){},
                      color: Colors.blue,
                      shape: StadiumBorder(),
                      child: Text('Sandle'),
                    ),
                  );
                },
                separatorBuilder: (context ,index){
                  return SizedBox(width: 12,);
                },
                itemCount: 10),
          ),
          Expanded(

            child: GridView.builder(
              scrollDirection: Axis.vertical,
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 2,
                   crossAxisSpacing: 5,
                  mainAxisExtent: 5
                ),
                itemBuilder: (context,index){
                  return Container(
                    height: 50,
                    width: 50,
                    color: Colors.red,
                  );
                }),
          )
        ],

      ),
    );
  }}

CodePudding user response：

Remove mainAxisExtent: 5 from GridView.builder. And where did you use topItem()?