flutter gridview item at bottom

Question

I have a gridView(3 items in a row) with dynamic number of items. I want gridView item should be at bottom means if there are 3 items then one row at bottom of screen, if there are 6 items then two row at bottom. So a dynamic padding at top depending on item count and screen size. My code structure is like below

class className extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Stack(
          children: [
            ImageFiltered(
                //code here
                ),
            Container(
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height,
              color: Colors.black38,
            ),
            GridView.builder(
                primary: false,
                reverse: false,
                padding: const EdgeInsets.symmetric(
                  horizontal: 10,
                  vertical: 30,
                ),
                itemBuilder: (context, index) {
                
                  return InkWell(
                    onTap: () {
                      //code
                    },
                    child: CustomWidget(
                      title: toolkitStore.getLabel(toolKit),
                      icon: ImageIcon(
                        AssetImage(
                            'assets/images/abcd.png'),
                        size: 48,
                        color: kWhiteColor,
                      ),
                    ),
                  );
                },
                itemCount: getCount().length,
                gridDelegate:
                    SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
              ),
          ],
        ),
      ),
    );
  }
}

Now I have this

but I want this

Thanks in advance.

Solution 1

Thank you, everyone.

I solved my problem by using Positioned widget and setting shrinkWrap: true, my code structure is

new Positioned(
              left: 0.0,
              bottom: 0.0,
              width: MediaQuery.of(context).size.width,
              child: GridView.builder(
                shrinkWrap: true, //this is most important
))

Solution 2

**Try this one: **

import 'package:flutter/material.dart';

class ClassName extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Stack(
          children: [
            Container(height: 100,width: 200,color: Colors.green,),//<----Your any widget
            Align(
              alignment: Alignment.bottomCenter,
              child: GridView.builder(
                primary: false,
                reverse: true,
                padding: const EdgeInsets.symmetric(
                  horizontal: 10,
                  vertical: 30,
                ),
                itemBuilder: (context, index) {

                  return InkWell(
                    onTap: () {
                      //code
                    },
              child: const Icon(Icons.person,size: 50,color: Colors.green,),
                  );
                },
                itemCount: 5,
                gridDelegate:
                const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
              ),
            ),
            Container(height: 100,width: 100,color: Colors.red,),//<----Your any widget
          ],
        ),
      ),
    );
  }
}

Solution 3

Wrap your GridView.builder with Align widget provide alignment: Alignment.bottomCenter,

Align(
  alignment: Alignment.bottomCenter,
  child: GridView.builder(
      primary: false,
      reverse: false,

While using Stack use positional widget(Positioned, Align,...) to place children on UI.