Flutter：CheckboxListTile 删除默认填充

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