Gridview wrap content flutter

Question

I have a json, I want to display it in gridview, the json has many content, in gridview I just want to show only 9 items.

The problem was I want to wrap the content of the gridview but I dont know how. I tried wrap widget. If its not possible then I guess I'll reconsider using columns and row for this one.

Please check the code below.

class ServicesWidget extends StatefulWidget {
  @override
  _ServicesState createState() => _ServicesState();
}

class _ServicesState extends State<ServicesWidget> {
  @override
  Widget build(BuildContext context) {
    return Flexible(
      child: GridView.count(
        crossAxisCount: 3,
        childAspectRatio: 1,
        children: <Widget>[
          Center(child: Text('qwe')),
          Center(child: Text('qwe')),
          Center(child: Text('qwe')),
          Center(child: Text('qwe')),
          Center(child: Text('qwe')),
          Center(child: Text('qwe')),
          Center(child: Text('qwe')),
          Center(child: Text('qwe')),
          Center(child: Text('qwe')),
        ],
      ),
    );
  }
}

class HomeScreen extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<HomeScreen> {

  @override
  Widget build(BuildContext context) {
    return DirectSelectContainer(
      child: Scaffold(
          appBar: AppBar(
            title: Row(
              children: <Widget>[
                // cityDirectSelect(),
                // areaDirectSelect(),
                Spacer(flex: 1),
                IconButton(
                  padding: EdgeInsets.all(0),
                  icon: Icon(Icons.person),
                  color: Colors.grey,
                  onPressed: () {
                    Get.off(LoginScreen());
                  },
                )
              ],
            ),
          ),
          body: Center(
            child: Container(
              child: Column(
                children: <Widget>[
                  ServicesWidget(),
                  Container(
                    width: double.infinity,
                    child: Text('qweqwe'),
                    color: Colors.red,
                  )
                ],
              ),
            ),
          )),
    );
  }
}

Answer 1

I solve it using shrinkWrap. Now the gridview height is wrapped according to its children.shrinkwrap gridview