Working with dynamic Checkboxes in Flutter

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

Summary

Which widgets you should use?Advertisements

• 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

AdvertisementsThe 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:Advertisements

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.