Reputation: 5932

Flutter decrease space between checkbox and it's title

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?

Upvotes: 11

Answers (6)

SUDESH KUMARA

Reputation: 1312

Add horizontalTitleGap: 0, to ListTileTheme.

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

Before :

After:

Upvotes: 13

Mohamed BEN HALIMA

Reputation: 13

You can wrap your title text widget with Align one like the example of code below:

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

Upvotes: 0

shivaprasad naik

Reputation: 31

This helped me Add this inside ListTileTheme horizontalTitleGap: 0,

Upvotes: 3

saif aly

Reputation: 585

use Transform.translate

Transform.translate(
                          offset: const Offset(-20, 0),
                         child: childWidget(),
)

Complete Example

Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 8.0),
                      child: CheckboxListTile(
                        value: isChecked,
                        controlAffinity: ListTileControlAffinity.leading,
                        contentPadding: EdgeInsets.zero,
                        title: Transform.translate(
                          offset: const Offset(-20, 0),
                          child: RichText(
                            text: TextSpan(
                              text: S.of(context).iAgreeWith,
                              style: TextStyle(
                                  color: Theme.of(context).hintColor,
                                  fontWeight: FontWeight.w400),
                              children: <TextSpan>[
                                TextSpan(
                                  text: S.of(context).terms,
                                  style: TextStyle(
                                      decoration: TextDecoration.underline,
                                      color: Theme.of(context).hintColor,
                                      fontWeight: FontWeight.w400),
                                  recognizer: TapGestureRecognizer()
                                    ..onTap = () {
                                      // Single tapped.

                                      Navigator.push(
                                          context,
                                          MaterialPageRoute(
                                            builder: (context) => WebView(
                                              url:
                                                  ksportsCornerWebsitePolicyUrl,
                                              title: S.of(context).termsCap,
                                            ),
                                          ));
                                    },
                                ),
                                TextSpan(
                                    text: " " + S.of(context).and + " ",
                                    style: TextStyle(
                                        color: Theme.of(context).hintColor,
                                        fontWeight: FontWeight.w400)),
                                TextSpan(
                                  text: S.of(context).privacyPolicy,
                                  style: TextStyle(
                                      decoration: TextDecoration.underline,
                                      color: Theme.of(context).hintColor,
                                      //fontSize: 14.0.sp,
                                      fontWeight: FontWeight.w400),
                                  recognizer: TapGestureRecognizer()
                                    ..onTap = () {
                                      // Single tapped.

                                      Navigator.push(
                                          context,
                                          MaterialPageRoute(
                                            builder: (context) => WebView(
                                              url:
                                                  ksportsCornerWebsitePolicyUrl,
                                              title: S
                                                  .of(context)
                                                  .privacyPolicyCaps,
                                            ),
                                          ));
                                    },
                                ),
                              ],
                            ),
                          ),
                        ),
                        activeColor: Theme.of(context).hintColor,
                        checkColor: Theme.of(context).cursorColor,
                        onChanged: (value) {
                          isChecked = !isChecked;
                          setState(() {});
                        },
                      ),
                    ),

Upvotes: 29

Alok

Reputation: 8998

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.

Upvotes: 10

ng5002

Reputation: 493

Try replacing the ListTileTheme with this:

Padding(
  padding: EdgeInsets.only(right: 20.0),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.end,
    children: <Widget>[
      Text(
        "افزودن به فهرست پرکاربردها"
      ),
      SizedBox(
        width: /* The spacing in between the checkbox and text */ 20,
      ),
      Checkbox(
        value: false,
        onChanged: (value) {},
      ),
    ],
  ),
),

Upvotes: 0

Flutter decrease space between checkbox and it&#39;s title

Answers (6)

Solution

Result

Related Questions

Flutter decrease space between checkbox and it's title