**Title:** How to Align a Checkbox to the Left on a CheckboxListTile in Flutter
**Introduction:**
When building a Flutter app, you might need to use a `CheckboxListTile` to display a list of checkboxes. By default, a `CheckboxListTile` aligns the checkbox to the right side of the title. But, what if you want to align the checkbox to the left? In this blog post, we’ll show you how to do just that!
**The Problem:**
Let’s say you have the following code to display a list of checkboxes using a `CheckboxListTile`:
“`dart
import ‘package:flutter/material.dart’;
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: ‘Checkbox List’,
home: Scaffold(
body: ListView.builder(
itemCount: 5,
itemBuilder: (context, index) {
return CheckboxListTile(
title: Text(‘Option $index’),
value: true,
);
},
),
),
);
}
}
“`
Running this code will display the checkboxes with the checkbox aligned to the right side of the title. But, what if you want to align it to the left?
**The Solution:**
To align the checkbox to the left, you can use a `Row` widget inside the `CheckboxListTile`. Here’s the updated code:
“`dart
import ‘package:flutter/material.dart’;
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: ‘Checkbox List’,
home: Scaffold(
body: ListView.builder(
itemCount: 5,
itemBuilder: (context, index) {
return CheckboxListTile(
title: Row(
children: [
Checkbox(value: true),
Text(‘Option $index’),
],
),
);
},
),
),
);
}
}
“`
By wrapping the `Checkbox` and the `Text` widget inside a `Row`, we’re telling Flutter to align the checkbox to the left and the text to the right.
**Result:**
Running this updated code will display the checkboxes with the checkbox aligned to the left side of the title:
**Left-aligned checkbox**
Now you can easily add checkboxes to your app with the checkbox aligned to the left.