Can't set a GridView in a Column

Question

I need to set many items into a grid view. But I need to write something above the grid view and that's why I need a column which contains the texts and the grid view. But If I set some text and below the grid view then it doesn't work. Here is my code:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hamim Shop',
      home: Scaffold(
        body: Container(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            children: [
              Text('Hamim Shop'),
              GridView.count(
                crossAxisCount: 3,
                children: List.generate(choices.length, (index) {
                  return Center(
                    child: ChoiceCard(choice: choices[index]),
                  );
                }),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Edited from Here:

Choice Card:

class ChoiceCard extends StatelessWidget {
  const ChoiceCard({Key key, this.choice}) : super(key: key);

  final Choice choice;

  @override
  Widget build(BuildContext context) {
    return Card(
        color: Colors.white,
        child: Center(
          child: Column(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Expanded(child: Icon(choice.icon, size: 150)),
                Text(choice.title),
              ]),
        ));
  }
}

...

class Choice {
  const Choice({this.title, this.icon});
  final String title;
  final IconData icon;
}

const List<Choice> choices = const [
  const Choice(title: 'Car', icon: Icons.directions_car),
  .....
];

Answer 1

Use shrinkwrap:true & physics:NeverScrollableScrollPhysics()

physics: Scroll physics that does not allow the user to scroll. Means only Column+SingleChildScrollView Scrolling work.

shrinkwrap:

If you do not set the shrinkWrap property, your GridView will be as big as its parent.

If you set it to true, the GridView will wrap its content and be as big as its children allow it to be.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hamim Shop',
      home: Scaffold(
        body: Container(
          padding: const EdgeInsets.all(8.0),
          child: SingleChildScrollView(
            child: Column(
              children: [
                Text('Hamim Shop'),
                GridView.count(
                  shrinkWrap: true,
                  physics: NeverScrollableScrollPhysics(),
                  crossAxisCount: 3,
                  children: List.generate(choices.length, (index) {
                    return Center(
                      child: ChoiceCard(choice: choices[index]),
                    );
                  }),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

class ChoiceCard extends StatelessWidget {
  const ChoiceCard({Key key, this.choice}) : super(key: key);

  final Choice choice;

  @override
  Widget build(BuildContext context) {
    return Card(
        color: Colors.white,
        child: Center(
          child: Column(
              mainAxisSize: MainAxisSize.max,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Expanded(child: Icon(choice.icon, size: 150)),
                Text(choice.title),
              ]),
        ));
  }
}
class Choice {
  const Choice({this.title, this.icon});
  final String title;
  final IconData icon;
}

const List<Choice> choices = const [
const Choice(title: 'Car', icon: Icons.directions_car),
....
];