How to set the image and text of the check box margin or padding right in flutter

120

I would use a row instead of the CheckboxListTile:

Row(
    mainAxisAlignment: MainAxisAlignment.end,
    children: <Widget>[
      Image.asset(
        'assets/images/policy_ic.png',
        height: 30,
      ),
      Container(
        margin: EdgeInsets.all(10),
        child: Text(
          'Check privacy & policy',
          style: Theme.of(context).textTheme.headline5,
        ),
      ),
      Checkbox(
          value: timeDilation != 1.0,
          onChanged: (bool value) {
            setState(() {
              timeDilation = value ? 5.0 : 1.0;
            });
          }),
    ],
  )

Edit: Create a custom widget like this:

class CustomTile extends StatefulWidget {
  @override
  _CustomTileState createState() => _CustomTileState();
}
class _CustomTileState extends State<CustomTile> {
  bool value = false;
  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {
        setState(() {
          value = !value;
        });
      },
      child: Row(
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          Icon(Icons.extension),
          Container(
            margin: EdgeInsets.all(10),
            child: Text(
              'Check privacy & policy',
              style: Theme.of(context).textTheme.headline5,
            ),
          ),
          Checkbox(
            value: value,
            onChanged: (bool value) {},
          )
        ],
      ),
    );
  }
}
Share:
120
Mahmoud Harooney
Author by

Mahmoud Harooney

Updated on December 21, 2022

Comments

  • Mahmoud Harooney
    Mahmoud Harooney 10 minutes

    I have a Check box as the below code:

    DelayedAnimation(
                      child: CheckboxListTile(
                        title: const Text('Check privacy & policy'),
                        value: timeDilation != 1.0,
                        onChanged: (bool value) {
                          setState(() {
                            timeDilation = value ? 5.0 : 1.0;
                          });
                        },
                        secondary: Image.asset(
                          'assets/images/policy_ic.png',
                          height: 30,
                        ),
                      ),
                      delay: delayedAmount + 4500,
                    ),
    

    and it's look like the below image:

    cb1

    Now I need to set padding or margin right for the text and image to be like the below image:

    cb2

    I hope some one coul help me to solve this problem.

    • Mahmoud Harooney
      Mahmoud Harooney over 2 years
      @GabrieleMartini where's the answer you post the same question :)
    • GabrieleMartini
      GabrieleMartini over 2 years
      It's automatic comment. Just signalling the duplicated question (the same question is posted twice) :)
  • Mahmoud Harooney
    Mahmoud Harooney over 2 years
    thanks for your help but the problem now, the check box is the only part was clickable... I need all are clickable.. I meant that when click the icon or the text or the check box will be just one item :D
  • Maximilian
    Maximilian over 2 years
    In this example code, _CustomTileState holds if the checkbox is checked or not. The checkbox itself just represents the status.