Remove space for item in gridew.builder flutter

Question

I am using Gridview.builder to show dynamic item count in a row with the help of crossAxisCount. if crossAxisCount is 3 then 3 items are showing on grid. But It is showing top and bottom space(item space,not thein between space of items) for every item. Please help me how to remove the space. Thank you

code:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class Order extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _OrderState();
}

class _OrderState extends State<Order> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Expanded(
            child: SizedBox(
              width: MediaQuery.of(context).size.width,
              // height: MediaQuery.of(context).size.height,
              child: GridView.builder(
                shrinkWrap: true,
                gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 3),
                padding: EdgeInsets.zero,

                itemCount: 9,
                itemBuilder: (BuildContext context, int index) {
                  return Container(
                    decoration: BoxDecoration(
                      border: Border.all(color: Colors.red),
                      borderRadius: BorderRadius.circular(10),
                    ),

                    margin: const EdgeInsets.fromLTRB(10, 20, 10, 10),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: const [
                        Text("hello"),
                        Text("hello"),

                      ],
                    ),
                  );
                },
              ),
            ),
          ),
        ],
      ),
    );
  }
}

screenshot:

[![enter image description here][3]][3]

Actually trying for this design

@Jahidual I dnt want the space of top padding and bottom padding for text (hello -hello) — kartheeki j, May 17 '22 at 06:38
You can apply this to Row crossAxisAlignment: CrossAxisAlignment.start as requirement is still not clear — Hardik Mehta, May 17 '22 at 06:47

Xuuan Thuc · Answer 1 · 2022-05-17T06:41:59.193

0

Try add childAspectRatio in side SliverGridDelegateWithFixedCrossAxisCount():

             gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3,
               childAspectRatio: 1/3
             ),

edited May 17 '22 at 06:41

answered May 17 '22 at 06:34

Xuuan Thuc

2,340
1
5
22

Internal space of item. Not the outer space – kartheeki j May 17 '22 at 06:36
oh, try add `childAspectRatio: 1/3` in side SliverGridDelegateWithFixedCrossAxisCount() – Xuuan Thuc May 17 '22 at 06:40

Tuan · Answer 2 · 2022-05-17T07:47:57.593

0

The question is not so clear.

If problem is space between square, just remova margin: const EdgeInsets.fromLTRB(10, 20, 10, 10).

If problem is why your text in the center and look like container have space on top and bottom of the text, that's not the problem. Cause the Grid item was fixed sized of child (Container) and a Row inside, children of Row was fill the size of parent as default.

Example: just add alignment, the spaces is gone

Updated: update answer, check this example below

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(),
      body: Column(
        children: [
          Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: const [
              Expanded(child: Ticket(title: '#1', height: 200)),
              Expanded(child: Ticket(title: '#3', height: 400)),
              Expanded(child: Ticket(title: '#4', height: 300)),
            ],
          ),
        ]
      ),
    ),
  ));
}

class Ticket extends StatelessWidget {
  const Ticket({required this.height, required this.title, Key? key})
      : super(key: key);
  final String title;
  final double height;
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(4),
      child: Container(
        decoration: BoxDecoration(
          border: Border.all(),
        ),
        child: Column(
          children: [
            Text(title),
            Placeholder(fallbackHeight: height),
          ],
        ),
      ),
    );
  }
}

edited May 17 '22 at 07:47

answered May 17 '22 at 06:40

Tuan

2,033
1
9
16

Thanks, it was moved to top then how to remove bottom space – kartheeki j May 17 '22 at 06:48
But my items are not fixed size some times items have diffrent data. So in this case which one I have to take. give some suggestions please – kartheeki j May 17 '22 at 06:56
yes dynamic height per item but not staggered gridview look. 3 items in one row...next 3 in another row and so on............. – kartheeki j May 17 '22 at 07:19
ok. will check with table – kartheeki j May 17 '22 at 07:32
Added required image – kartheeki j May 17 '22 at 07:38
I tried with row and column, but bottom space is showing because of dynamic height. want to remove the bottom space – kartheeki j May 17 '22 at 07:43
@kartheekij check updated answer – Tuan May 17 '22 at 07:48
@kartheekij and please delete discussions chat, in next time, create a chat room. – Tuan May 17 '22 at 07:49
why u given heights. based on the webservice data the height will change. some times we have 12 items. some times the crossaxiscount will be 6. – kartheeki j May 17 '22 at 07:50
@kartheekij cause it is an example i want to write short and fast, height represents the height of the child widget. You dont need passing height, just replace **height** by something like **Widget child** – Tuan May 17 '22 at 07:52
@kartheekij please create a chat room to discussions, too many comment here – Tuan May 17 '22 at 07:55
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/244794/discussion-between-kartheeki-j-and-tuan). – kartheeki j May 17 '22 at 07:58

score 0 · Answer 3 · answered May 17 '22 at 06:51

Try below code, use MainAxisAlignment.spaceAround refer layout

 Column(
    children: [
      Expanded(
        child: SizedBox(
          width: MediaQuery.of(context).size.width,
          // height: MediaQuery.of(context).size.height,
          child: GridView.builder(
            shrinkWrap: true,
            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 3,
              crossAxisSpacing: 1,
              mainAxisSpacing: 1,
            ),
            padding: EdgeInsets.zero,
            itemCount: 9,
            itemBuilder: (BuildContext context, int index) {
              return Container(
                decoration: BoxDecoration(
                  border: Border.all(color: Colors.red),
                  borderRadius: BorderRadius.circular(10),
                ),
                margin: const EdgeInsets.all(10),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: const [
                    Text("hello"),
                    Text("hello"),
                  ],
                ),
              );
            },
          ),
        ),
      ),
    ],
  ),

not working Ravindra. dynamic heights – kartheeki j May 17 '22 at 07:23 — kartheeki j, May 17 '22 at 07:23
what do you exact want can you add your wanted image? – Ravindra S. Patil May 17 '22 at 07:25 — Ravindra S. Patil, May 17 '22 at 07:25

Remove space for item in gridew.builder flutter

3 Answers3