flutter: RenderFlex children have non-zero flex but incoming height constraints are unbounded. in GridView widget

Question

I want to create a grid view with four columns in two rows if I add a widget GridView() it shows an error on compile time. it shows an error multiple times when the app is hot reload after saving file.

Error: RenderFlex children have non-zero flex but incoming height constraints are unbounded. Error: Image of Error shows in terminal please look into this

Here is my code:-

import 'package:flutter/material.dart';
import 'package:dateapp/utils/widget_functions.dart';
import 'package:dateapp/custom/BorderIcon.dart';

class Gender extends StatelessWidget{

@override
Widget build(BuildContext context){
 final Size size = MediaQuery.of(context).size;
 final ThemeData themeData = Theme.of(context);
 final double padding = 25;
 final sidePadding = EdgeInsets.symmetric(horizontal: padding);
 //return SafeArea(
 return Scaffold(
  body: Container(
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topRight,
          end: Alignment.bottomRight,
          colors: const [Color.fromRGBO(132,105,211,1), Color.fromRGBO(93,181,233,1), Color.fromRGBO(86,129,233,1)],
        ),
      ),
      width: size.width,
      height: size.height,
      child: Stack(
        children: [
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              addVerticalSpace(padding),
              Padding(
                padding: sidePadding,
                child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children:[
                      InkWell(
                        onTap: (){
                          Navigator.pop(context);
                        },
                        child: BorderIcon(
                          padding: new EdgeInsets.all(0.0),
                          height: 100,
                          width: 0,
                          child: Icon(
                            Icons.arrow_back_ios_outlined,
                            color:Colors.white,
                          ),
                        ),
                      ),
                    ]
                ),
              ),
              addVerticalSpace(padding),
              Padding(
                padding: sidePadding,
                child: Text(
                  'Your profile info',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 20,
                  ),),
              ),
              addVerticalSpace(20),
              Padding(
                padding: sidePadding,
                child: Column(
                  children: <Widget>[
                    addVerticalSpace(15),
                    Column(
                      children: <Widget>[
                          Expanded(
                            child: Column(
                              children: [
                                GridView(
                                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                                    crossAxisCount: 3,
                                  ),
                                  children: [
                                    Text('one'),
                                    Text('two'),
                                    Text('Three'),
                                    Text('Four'),
                                  ],
                          ),
                              ],
                            ),
                          ),
                      ],
                    ),
                    addVerticalSpace(10),

                  ],
                ),
              ),
            ],
          ),
        ],
      )
  ),
  floatingActionButton: Container(
    child: Padding(
      padding: sidePadding,
        child: Align(
          alignment: Alignment.bottomCenter,
          child:  ElevatedButton(
            style: ElevatedButton.styleFrom(
            primary: Colors.deepPurpleAccent,
            minimumSize: const Size.fromHeight(50), // NEW
            ),
            child: const Text(
            'Next',
            style: TextStyle(
            fontSize: 18,
            ),
            ),
            onPressed: () {},
          ),
        ),
    ),
  ),
  floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
);
//);
}
}

Please help me out with this error I don't know how to fix this This is what I want

I change the code of

Padding(
                padding: sidePadding,
                child: Column(
                  children: <Widget>[
                    addVerticalSpace(15),
                    Column(
                      children: <Widget>[
                          Expanded(
                            child: Column(
                              children: [
                                GridView(
                                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                                    crossAxisCount: 3,
                                  ),
                                  children: [
                                    Text('one'),
                                    Text('two'),
                                    Text('Three'),
                                    Text('Four'),
                                  ],
                          ),
                              ],
                            ),
                          ),
                      ],
                    ),

To

Expanded(
                  child: Padding(
                      padding: const EdgeInsets.all(8.0),
                    child: Column(
                      children: [
                        Expanded(
                            child: GridView(
                              padding: const EdgeInsets.all(8.0),
                              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                                crossAxisCount: 2,
                              ),
                              children: [
                                Text('one'),
                                Text('two'),
                                Text('Three'),
                                Text('Four'),
                              ],
                            ),
                        ),
                      ],
                    ),
                  )
              ),

But now it shows another error image of another error

Answer 1

Use Padding widget as child on Expanded .

Expanded(
  child: Padding(
    padding: const EdgeInsets.all(8.0),
    child: GridView(....)

You can also use GridView 's padding: . If you want to have multiple column wrap Column and GridView with Expanded .

Expanded(
  child: Padding(
    padding: const EdgeInsets.all(8.0),
    child: Column(
      children: [
        Expanded(
          child: GridView(
            padding: const EdgeInsets.all(8.0),
            gridDelegate:
                SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 3,
            ),
            children: [ .....