Flutter: CheckboxListTile remove default padding

Question

I'm looking to remove this padding around my row of CheckboxListTiles, but haven't found any information on how to do this without making my own version of a checkbox.

Is there any way to (using the CheckboxListTile):

1. Remove the (blue) left and right padding of the CheckboxListTile
2. Increase the width of the text area (I've tried sizedbox, containers, etc with no luck)

Answer 1

UPDATE: THERE IS NOT NEED TO USE ListTitleTheme ANYMORE . contentPadding is now one of CheckboxListTile 's properties. We can now remove the default padding like this:

CheckboxListTile(
 contentPadding: EdgeInsets.all(0),
)

Answer 2

Try using the following code:

ListTileTheme(
  contentPadding: EdgeInsets.all(0),
  child: CheckboxListTile(
    secondary: const Icon(Icons.drive_eta),
    title: Text("Your message"),
    onChanged: (bool value) {},
    value: true,
  ),
),

Answer 3

Add

ListTileTheme(
            contentPadding: EdgeInsets.all(0),
        

then

 ListTileTheme(
            contentPadding: EdgeInsets.all(0),
            child: CheckboxListTile(
              activeColor: CustomColors.purple,
              title: Text("title text"),
              value: true,
              onChanged: (newValue) {},
              controlAffinity:
                  ListTileControlAffinity.leading, //  <-- leading Checkbox
            ),
          ),

Answer 4

  contentPadding: EdgeInsets.all(0),

是不错的选择

Answer 5

ListTileTheme(
    horizontalTitleGap: 0,
    child: CheckboxListTile(
      controlAffinity: ListTileControlAffinity.leading,
      title: Text(
        title,
        style: kRegularFontStyle.copyWith(
          fontSize: 16.0.sp,
          color: Theme.of(context).textTheme.subtitle1!.color,
        ),
      ),
      value: isChecked,
      onChanged: onChanged,
      activeColor: kStructuralBlue500,
      checkColor: kWhiteColor,
      checkboxShape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(4.0.r)),
      contentPadding: EdgeInsets.zero,
    ),
  ),

Answer 6

There are couple ways:

1. Create a stack and place the checkboxes with Positioned widget (basically your own variation of CheckboxListTile)
2. Copy the flutter checkbox widget code into your own file ( custom_checkbox.dart ), find the part where they added the padding/ margin, set it to 0. 3)
3. Try out other checkbox packages existing on pub.dev like flare_checkbox or circular_chekbox.

All of those approaches have its advantages and disadvantages as you can imagine.

Edit

I have created for you a custom checkbox list tile, where the padding is much smaller.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          color: Colors.grey,
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: [
            checkboxTile('Charger'),
            checkboxTile('Bag'),
            checkboxTile('Mouse'),
          ]),
        ),
      ),
    );
  }

  Widget checkboxTile(String title) {
    return Row(children: [
      Text(title),
      Checkbox(value: true, onChanged: (v) => null),
    ]);
  }
}

Make sure to convert checkboxTile into a stateless widget if you wanna use that implementation.

click here to see custom checkbox list tile as image