CODEWITHSUNDEEP
flutterdartcheckboxright-align
Kavishka Rajapakshe
Kavishka Rajapakshe

Reputation: 643

checkboxes wont align to the right

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,

enter image description here

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

enter image description here

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

please help me

Upvotes: 0

Views: 1558

Answers (6)

Sagar Acharya
Sagar Acharya

Reputation: 3767

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.

  1. 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.
  2. 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 Image

Let me know if it works

Thanks.

Upvotes: 0

Tejaswini Dev
Tejaswini Dev

Reputation: 1469

Please refer to below code

enter image description here

enter image description here


 @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;
            });
          },
        ),
      ),
    );
  }

Upvotes: 0

Jim
Jim

Reputation: 7601

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);
        },
      ),
    ],
  ),
);

Upvotes: 1

Ravindra S. Patil
Ravindra S. Patil

Reputation: 14785

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 -> Image

Your result screen With check -> enter image description here

Upvotes: 1

Karan Mehta
Karan Mehta

Reputation: 1541

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) {
          },
        ),
      ],
    ),
  )
);

Upvotes: 0

G H Prakash
G H Prakash

Reputation: 1857

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);
        },
      ),
    ],
  ),
);

Upvotes: 0

Related Questions