Working with dynamic Checkboxes in Flutter
( 373 Articles)

This tutorial walks you through a complete example of using dynamic checkboxes in Flutter.
Table of Contents
Summary
Which widgets you should use?
- CheckBox: A material design checkbox
- CheckboxListTile: A checkbox with a label (we’ll use this one)
Example Preview
We’ll make a small Flutter app that displays a list of checkboxes based on a list of available hobbies (these things are hard-coded but you can fetch your own data from an API or a database). The user can choose their hobbies and the results will be reflected immediately on the screen.
No more talking, let’s dive into the code.
The Code
1. Create a new Flutter project:
flutter create kindacode_example
The project name is totally up to you.
2. Remove all the default code in the lib/main.dart file and add the following:
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const MaterialApp(
// Hide the debug banner
debugShowCheckedModeBanner: false,
title: 'Kindacode.com',
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
// Generate a list of available hobbies here
List<Map> availableHobbies = [
{"name": "Foobball", "isChecked": false},
{"name": "Baseball", "isChecked": false},
{
"name": "Video Games",
"isChecked": false,
},
{"name": "Readding Books", "isChecked": false},
{"name": "Surfling The Internet", "isChecked": false}
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Kindacode.com'),
),
body: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.all(20),
child:
Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
const Text(
'Choose your hobbies:',
style: TextStyle(fontSize: 24),
),
const SizedBox(height: 10),
const Divider(),
const SizedBox(height: 10),
// The checkboxes will be here
Column(
children: availableHobbies.map((hobby) {
return CheckboxListTile(
value: hobby["isChecked"],
title: Text(hobby["name"]),
onChanged: (newValue) {
setState(() {
hobby["isChecked"] = newValue;
});
});
}).toList()),
// Display the result here
const SizedBox(height: 10),
const Divider(),
const SizedBox(height: 10),
Wrap(
children: availableHobbies.map((hobby) {
if (hobby["isChecked"] == true) {
return Card(
elevation: 3,
color: Colors.amber,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(hobby["name"]),
),
);
}
return Container();
}).toList(),
)
]),
),
),
);
}
}
3. Launch the app by executing:
flutter run
Wrap Up
We’ve made a simple mobile app to learn about implementing multiple dynamic checkboxes and the CheckboxListTile widget in Flutter. If you’d like to explore more new things in Flutter and Dart, take a look at the following articles:
- Flutter: “I agree to terms” checkbox example
- Flutter: ExpansionPanelList and ExpansionPanelList.radio examples
- 2 Ways to Create Flipping Card Animation in Flutter
- Flutter and Firestore Database: CRUD example (null safety)
- Flutter: How to Make Spinning Animation without Plugins
You can also check out our Flutter category page or Dart category page for the latest tutorials and examples.
In this example list is predefined. How to use checkboxlisttile where list is created dynamically.
You can take a look at these: Using GetX (Get) for State Management in Flutter, Flutter Autocomplete example, Flutter AnimatedList – Tutorial and Examples.
Hi, thanks for all. really good.
Can we have and choose more chexboxes in the same line (A-B-C-D)
Yes, we can do that by using Row. I guess you wanna make a Quiz app 🙂