How to Align Checkbox to Left on CheckboxListTile in Flutter

By default, the checkbox inside CheckboxListTile is aligned to the right side. In this example, we are going to show you how to align the checkbox at the left of CheckboxListTile in Flutter. See the example:

CheckboxListTile(
  controlAffinity: ListTileControlAffinity.leading,
)

You can set controlAffinity:ListTileControlAffinity.leading to align the checkbox to the left of CheckboxListTile:

CheckboxListTile( //checkbox positioned at left
  value: false,
  controlAffinity: ListTileControlAffinity.leading,
  onChanged: (bool? value) {  

  },
  title: Text("Do you really want to learn Flutter?"),
)

import 'package:flutter/material.dart';

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget{
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> { 

  bool?  check2 = true, check3 = false;
  //true for checked checkbox, flase for unchecked one
  
  @override
  Widget build(BuildContext context) { 


    return  Scaffold(
          appBar: AppBar(
            title: Text("Checkbox with CheckboxListTile"),
            backgroundColor: Colors.redAccent
          ),
          body: Container(
            padding: EdgeInsets.only(top:20, left:20, right:20),
            alignment: Alignment.topLeft,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [  

                  CheckboxListTile( //checkbox positioned at right
                    value: check2,
                    onChanged: (bool? value) {  
                        setState(() {
                            check2 = value;
                        });
                    },
                    title: Text("Do you really want to build Mobile App?"),
                  ),

                  CheckboxListTile( //checkbox positioned at left
                    value: check3,
                    controlAffinity: ListTileControlAffinity.leading,
                    onChanged: (bool? value) {  
                        setState(() {
                            check3 = value;
                        });
                    },
                    title: Text("Do you really want to learn Flutter?"),
                  ),

            ],)
          )
       );
  }
}