Working with dynamic Checkboxes in Flutter

Last updated on January 16, 2022 A Goodman Loading... 4 comments

This tutorial walks you through a complete example of using dynamic checkboxes in Flutter.


Which widgets you should use?

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);

  Widget build(BuildContext context) {
    return const MaterialApp(
      // Hide the debug banner
      debugShowCheckedModeBanner: false,
      title: '',
      home: HomePage(),

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  _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}

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(''),
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.all(20),
              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
                children: {
              return CheckboxListTile(
                  value: hobby["isChecked"],
                  title: Text(hobby["name"]),
                  onChanged: (newValue) {
                    setState(() {
                      hobby["isChecked"] = newValue;

            // Display the result here
            const SizedBox(height: 10),
            const Divider(),
            const SizedBox(height: 10),
              children: {
                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();

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:

You can also check out our Flutter category page or Dart category page for the latest tutorials and examples.

Notify of
Inline Feedbacks
View all comments
Fathima Shafana
Fathima Shafana
8 months ago

In this example list is predefined. How to use checkboxlisttile where list is created dynamically.

1 year ago

Hi, thanks for all. really good.
Can we have and choose more chexboxes in the same line (A-B-C-D)

Related Articles