Flutter decrease space between checkbox and it's title

Question

I am using CheckboxListTile in this way:

ListTileTheme(
  contentPadding: EdgeInsets.only(right: 20.0),
  child: CheckboxListTile(
    controlAffinity: ListTileControlAffinity.leading,
    value: false,
    onChanged: (value) {},
    title: Text(
      "افزودن به فهرست پرکاربردها"
    ),
  ),
),

and it's result :

How can I decrease space between checkbox and it's title?

Answer 1

In CheckBoxListTile, it is probably difficult to achieve what you want. However, there is always a workaround for that, and this is using Row(). Also, we will using FlatButton() to get the same effect.

The catch here is, in FlatButton(), you just have to do the same thing as onChanged in Checkbox()

Solution

     bool _myBool = false;

     Container(
        child: FlatButton(
          // here toggle the bool value so that when you click 
          // on the whole item, it will reflect changes in Checkbox
          onPressed: () => setState(() => _myBool = !_myBool),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              SizedBox(
                height: 24.0,
                width: 24.0,
                child: Checkbox(
                  value: _myBool,
                  onChanged: (value){
                     setState(() => _myBool = value);
                  }
                )
              ),
              // You can play with the width to adjust your
              // desired spacing
              SizedBox(width: 10.0),
              Text("افزودن به فهرست پرکاربردها")
            ]
          )
        )
      )

Result

And if you want the Checkbox() to be at the right, you can just switch the places of Text() and Checkbox(). Rest will remain the same.