Question 219808 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter decrease space between 2 CheckboxListTiles?

Is there a way to decrease spacing between 2 checkbox list tiles (rows)? I dont’t want to remove padding, it doesn’t help me at all.

I have this:

enter image description here

But I want to get this:

enter image description here

                     child: ListView.builder(
                      physics: const NeverScrollableScrollPhysics(),
                      itemCount: 5,
                      itemBuilder: (context, index) {
                        int starValue = index;
                        return CheckboxListTile(
                          value: _starValues[index],
                          title: Row(
                            children: List.generate(5, (i) {
                              return Icon(
                               ...
                              );
                            }),
                          ),
                          onChanged: ...
                        );
                      }),
Tags:

2

Answers


  1. 0

    In this documentation the space look not as big yours: https://api.flutter.dev/flutter/material/CheckboxListTile-class.html

    but for the ListTile widget, you can modify the space by:

    CheckboxListTile(
 dense: true
 // if it still too big then apply the visual density
 visualDensity: VisualDensity(vertical: -4),
    Login or Signup to reply.
  2. 0

    You can assign a value to the contentPadding property of the CheckboxListTile.

    return CheckboxListTile(
  contentPadding: EdgeInsets.zero,

    or you can create your custom list tile widget

    class CustomCheckbox extends StatelessWidget {
  final VoidCallback onChanged;
  final int count;
  final bool value;
  const CustomCheckbox({super.key, required this.onChanged, required this.count, required this.value});

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: ..., // Decorate if you want
      child: InkWell(
        onTap: onChanged, // This is your onChanged function
        child: Row(
          children: [
            Padding(
              padding: const EdgeInsets.all(8.0), //You can add checkbox padding or...
              child: Checkbox(onChanged:null,
              value: value),
            ),
            SizedBox(width: 5), //... you can add gap between checkbox and stars
            Expanded(
              child: Row(
                children: List.generate(count, (index) {
                  return Icon(
                               ...
                              );
                } ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

    Hope it helps.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search