checkboxes wont align to the right

Question

Ive got a custom CheckBox widget where it returns a label and a checkbox field,

@override
Widget build(BuildContext context) {
 return Padding(
  padding: const EdgeInsets.all(16.0),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      Text(widget.label, style: Theme.of(context).textTheme.headline4),
      Checkbox(
        activeColor: LightSeaGreen,
        checkColor: White,
        value: _checkbox,
        onChanged: (value) {
          setState(() {
            _checkbox = !_checkbox;
          });
          widget.onChanged(value);
        },
      ),
    ],
  ),
);

}

So right now,It looks like this,

what I want is for the checkboxes to align to the right like this

Ive tried the Align fuction,Spacer,MainAxisAlignment.spaceBetween but nothing works

please help me

Jim · Answer 1 · 2021-12-03T06:32:13.427

Try Spacer to put space in between:

@override
Widget build(BuildContext context) {
 return Padding(
  padding: const EdgeInsets.all(16.0),
  child: Row(
    children: [
      Text(widget.label, style: Theme.of(context).textTheme.headline4),
      Spacer(),
      Checkbox(
        activeColor: LightSeaGreen,
        checkColor: White,
        value: _checkbox,
        onChanged: (value) {
          setState(() {
            _checkbox = !_checkbox;
          });
          widget.onChanged(value);
        },
      ),
    ],
  ),
);

score 1 · Answer 2 · answered Dec 03 '21 at 05:06

Try below code hope its helpful to you. you can used Spacer() widget for that and I think MainAxisAlignment.spaceBetween is also working

Refer CheckBox documentation here

Refer Spacer class here

Refer Layoutes here

Declare bool variable:

bool isChecked = false;

Your Widget:

 Padding(
      padding: const EdgeInsets.all(16.0),
      child: Row(
        //mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text('widget.label',
              style: Theme.of(context).textTheme.headline4),
          Spacer(),
          Checkbox(
            activeColor: Colors.green,
            checkColor: Colors.white,
            value: isChecked,
            onChanged: (bool? value) {
              setState(() {
                isChecked = value!;
              });
            },
          ),
        ],
      ),
    ),

Your result screen Without check ->

Your result screen With check ->

Karan Mehta · Answer 3 · 2021-12-03T04:38:22.057

0

Try this

@override
Widget build(BuildContext context) {
 return Scaffold(
  body:
  Padding(
    padding: const EdgeInsets.all(16.0),
    child: Row(
      children: [
        Expanded(child:Text("Text", style:Theme.of(context).textTheme.headline4)),
        Checkbox(
          activeColor: Colors.red,
          checkColor: Colors.blue,
          value: false,
          onChanged: (value) {
          },
        ),
      ],
    ),
  )
);

edited Dec 03 '21 at 04:38

answered Dec 03 '21 at 04:27

Karan Mehta

1,442
13
32

I get this error RenderFlex children have non-zero flex but incoming width constraints are unbounded. – Kavishka Rajapakshe Dec 03 '21 at 04:34
Updated my answer, Check now – Karan Mehta Dec 03 '21 at 04:38
now in the ui the checkbox aint visible at all , an it says right overflowed by infinity pixels – Kavishka Rajapakshe Dec 03 '21 at 04:44
Replace your whole build method with this and check, not just inner code – Karan Mehta Dec 03 '21 at 04:44
thats how I did it .This is the error I get "RenderCustomMultiChildLayoutBox object was given an infinite size during layout." – Kavishka Rajapakshe Dec 03 '21 at 04:52
I have checked it and it works completely fine I request you to create one new screen and then replace whole build method in that. – Karan Mehta Dec 03 '21 at 04:57

score 0 · Answer 4 · answered Dec 03 '21 at 04:32

Add this line and try mainAxisSize: MainAxisSize.max

@override
Widget build(BuildContext context) {
 return Padding(
  padding: const EdgeInsets.all(16.0),
  child: Row(
    mainAxisSize: MainAxisSize.max
    children: [
      Text(widget.label, style: Theme.of(context).textTheme.headline4),
      Checkbox(
        activeColor: LightSeaGreen,
        checkColor: White,
        value: _checkbox,
        onChanged: (value) {
          setState(() {
            _checkbox = !_checkbox;
          });
          widget.onChanged(value);
        },
      ),
    ],
  ),
);

still wont align – Kavishka Rajapakshe Dec 03 '21 at 04:38 — Kavishka Rajapakshe, Dec 03 '21 at 04:38

Tejaswini Dev · Answer 5 · 2021-12-03T07:59:02.963

Please refer to below code


 @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: CheckboxListTile(
          title: const Text(
            'label',
            style: TextStyle(
              color: Colors.black,
            ),
          ),
          autofocus: false,
          activeColor: Colors.blue,
          checkColor: Colors.white,
          selected: _checkbox,
          value: _checkbox,
          onChanged: (bool value) {
            setState(() {
              _checkbox = value;
            });
          },
        ),
      ),
    );
  }

score 0 · Answer 6 · answered Dec 03 '21 at 09:32

So from what i see people have answered you use the spacer that can one solution. But Just from my thinking I would suggest you.

So initially what you do is Add the container as a parent to this widget and give a color and check if the color is just covering the child widget. It means that the space between parameter would not work because it is expanding as max as parent widget.
So to use the max width you can use a MediaQuery or use the Layoutbuilder widget to get the device width and height

I have Added an Example below how this works.

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sample',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String label = "NVD";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          SizedBox(
            height: 40,
          ),
          
          // this is when the parent has a full width
          Container(// consider container as parent 
            width: MediaQuery.of(context).size.height,
            color: Colors.red,
            child: Padding(
              padding: const EdgeInsets.all(16.0),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text(label, style: Theme.of(context).textTheme.headline4),
                      Checkbox(
                        activeColor: Colors.grey,
                        checkColor: Colors.white,
                        value: true,
                        onChanged: (value) {},
                      ),
                    ],
                  ),
                  Container(
                    color: Colors.blue,
                    height: 10,
                  )
                ],
              ),
            ),
          ),
          SizedBox(
            height: 40,
          ),
          
          // this is when the below container which is parent and has 
          // specific width due to which child is will adjust accordingly.
          Container(
            width: 200,
            color: Colors.blue,
            child: Padding(
              padding: const EdgeInsets.all(16.0),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text(label, style: Theme.of(context).textTheme.headline4),
                      Checkbox(
                        activeColor: Colors.grey,
                        checkColor: Colors.white,
                        value: true,
                        onChanged: (value) {},
                      ),
                    ],
                  ),
                  Container(
                    color: Colors.red,
                    height: 10,
                  )
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Image for the code implentation

Let me know if it works

Thanks.

checkboxes wont align to the right

6 Answers6