Remove space between checkbox and text in CheckboxListTile using GridView - Flutter

Question

How can I remove the space between Text widget and checkbox in Flutter CheckboxListTile? I want to have 12 items, in 4 rows, in every row 3 of them and I have lots of unused space (and because of that I have to make font size smaller).

I have tried to change CheckboxListTile according to this solution, but don't know how to do it using GridView.

Here's a whole snippet of code:

          LayoutBuilder(
            builder: (BuildContext context, BoxConstraints constraints) {
              return SizedBox(
                width: constraints.maxWidth * 0.9,
                height: 550,
                child: GridView.count(
                  crossAxisCount: 3,
                  children: List.generate(
                    12,
                    (index) => CheckboxListTile(
                      // contentPadding: EdgeInsets.zero,
                      value: false,
                      title: const Text(
                        "test",
                        style: TextStyle(fontSize: 12),
                      ),
                      onChanged: (newValue) {},
                      controlAffinity: ListTileControlAffinity.leading,
                    ),
                  ),
                ),
              );
            },
          ),

Also I don't know why is spacing between rows so large, but that is for another topic.

Answer 1

You can try using childAspectRatio

   return GridView.count(
                    crossAxisCount: 3, // display 3 columns

                    shrinkWrap: true,
                    childAspectRatio: 3 / 1,
                    ...

It should adjust width and height ratio of each child widget.

You can also use

contentPadding: const EdgeInsets.symmetric(
                            horizontal: 25, vertical: 0)