GridView Containing Cards Are Getting Trimmed At The End In Flutter

I am trying to create one Grid View page with Cards as list elements and the last of the cards are getting cut from the bottom. The following are relevant code snippets:

createListBody.dart

List<String> services = [
    
    'Demo1',
    'Demo2',
    'Demo3',
    'Demo4',
    'Demo5',
    'Demo6',
    'Demo7',
    'Demo8',
    'Demo9',
    'Demo10',
  ];

  @override
  Widget build(BuildContext context) {
    return Container(
      height: MediaQuery.of(context).size.height,
      child: GridView.count(
        crossAxisCount: 2,
        crossAxisSpacing: 2.0,
        mainAxisSpacing: 2.0,
        children: services.map((String serviceName){
          return Container(
            child:Card(
              color: Colors.grey[500],
              elevation: 15,
              semanticContainer: true,
              shadowColor: palletFuchsia,
              shape: CircleBorder(),
              child: InkWell(
                onTap: (){
                  print("Tapped "+serviceName);
                },
                child: Center(
                  child: Text(
                    serviceName,
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: 25
                    ),
                  ),
                ),
              ),
            )
          );
        }).toList(),
      ),
    );
  }

listScreen.dart

Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: palletWhiteDrawer,
      drawer: Theme(
        data: Theme.of(context).copyWith(
          canvasColor: palletYellowDrawer,
        ),
        child: CreatDrawerWidget(),
      ),
      appBar: CreateAppBar(),
      body:GestureDetector(
        behavior: HitTestBehavior.opaque,
        onTap: () {
          FocusScope.of(context).requestFocus(new FocusNode());
        },
        child: SingleChildScrollView(
            
            child: Column(
              mainAxisSize: MainAxisSize.max,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                ServiceListBody()
              ],
            )
          ),
        ),
    );
  }

Screenshot

I am completely new to flutter so, sorry if there is some silly mistake. But any help would be useful. Thank you for your time!

Just for exploring, you can do height: MediaQuery.of(context).size.height *2, It shouldn't get cut anymore right?

Solution 1

Your telling your container a given height which is fix for the moment, no matter how many items you got inside your ListView.

You can for example use ConstrainedBox with shrinkWrap:true and manage your max height

ConstrainedBox(
  constraints: BoxConstraints(maxHeight: 200, minHeight: 56.0),
  child: ListView.builder(
    shrinkWrap: true,
    ...

more info: https://api.flutter.dev/flutter/widgets/ConstrainedBox-class.html

Solution 2

use Slivers, they are dynamic.

For this you need to customize your structure a little bit. You wrap everything with a CustomScrollView(), SliverToBoxAdapter() for fixed elements and SliverList() for dynamic ones, makes it work like a charm.

Example using CustomScrollView and SliverToBoxAdapter:

return SafeArea(
      child: CustomScrollView(
        //scrollDirection: Axis.vertical,
        physics: BouncingScrollPhysics(),
        slivers: <Widget>[
          // Place sliver widgets here
          SliverToBoxAdapter(
              child: Padding(
                  padding: const EdgeInsets.fromLTRB(25, 30, 25, 20),
                  child: SizedBox(
                    height: 299,
                    child: Column(children: <Widget>[
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: <Widget>[
                        ...

You can define the height with the SizedBoxheight. Also you can apply nice effects to your whole View on the CustomScrollView

Example Sliverlist:

   SliverList(
      delegate: SliverChildBuilderDelegate(
    (ctx, index) => ChangeNotifierProvider.value(
      value: list[index],
      child: GestureDetector(
        onTap: () {}),
        childCount: list.length,
  )),

Infos about slivers: https://medium.com/flutterdevs/explore-slivers-in-flutter-d44073bffdf6