How we create Checkboxes in a flutter.

In this blog, we are going to learn about how we create Checkboxes in a flutter. So let’s get started.

It is a widget that is a GUI element that allows the user to choose multiple options from several selections. We can see the checkboxes on the screen as a square box with white space or a tick mark.

It is a widget that is wrapped in ListTiles and the currently selected text is passed into group value.

Read more about the Flutter app development company.

To implement the Checkboxes do follow the steps mentioned below.

1.) Create a Scaffold.

2.) Create the Checkboxes widget as you desire.

3.) Do create a layout that will create the Column widget and put their Listview.

1.) Create a Scaffold. :

Inside Scaffold widgets, it Implements the basic material design visual layout structure. First, initialize the main app as a stateless widget.

This class provides APIs for showing drawers and bottom sheets. We can add the background color inside the scaffold widget.

It also supports special Material Design components, such as Drawers, AppBars, and SnackBars.

  @override
  Widget build(BuildContext context) {
    List<String> _list = [];

    bool? _isFootBallText = false;
    bool? _isCricketText = false;
    bool? _isVolleyBallText = false;
    bool? _isKabaddiText = false;
    bool? _isBaskeballText = false;
    bool? _isBasketBallText = false;
    bool? _isOtherText = false;


    return Scaffold(
      body: Column(
        children: <Widget>[
          Expanded(
            child: ListView(
              children: <Widget>[
                ListTile(
                  title: Text("FootBall"),
                  leading: Checkbox(
                    value: _isFootBallText,
                    onChanged: (bool? value) {
                      setState(() {
                        _isFootBallText = value!;
                        String selectVal = "FootBall";
                        value! ? _list.add(selectVal) : _list.remove(selectVal);
                      });
                    },),),],),),],));
}

@override

Widget build(BuildContext context) {

List<String> _list = [];

bool? _isFootBallText = false;

bool? _isCricketText = false;

bool? _isVolleyBallText = false;

bool? _isKabaddiText = false;

bool? _isBaskeballText = false;

bool? _isBasketBallText = false;

bool? _isOtherText = false;

return Scaffold(

body: Column(

children: <Widget>[

Expanded(

child: ListView(

children: <Widget>[

ListTile(

title: Text("FootBall"),

leading: Checkbox(

value: _isFootBallText,

onChanged: (bool? value) {

setState(() {

_isFootBallText = value!;

String selectVal = "FootBall";

value! ? _list.add(selectVal) : _list.remove(selectVal);

});

},),),],),),],));

}

2.) Create the Checkboxes widget as you desire.

Now, use the Checkboxes widget inside the body of the scaffold widget and place it in the column using the Column widget.

  @override
  Widget build(BuildContext context) {
    List<String> _list = [];

    bool? _isFootBallText = false;
    bool? _isCricketText = false;
    bool? _isVolleyBallText = false;
    bool? _isKabaddiText = false;
    bool? _isBaskeballText = false;
    bool? _isBasketBallText = false;
    bool? _isOtherText = false;


    return Scaffold(
      body: Column(
        children: <Widget>[
          Expanded(
            child: ListView(
              children: <Widget>[
                ListTile(
                  title: Text("FootBall"),
                  leading: Checkbox(
                    value: _isFootBallText,
                    onChanged: (bool? value) {
                      setState(() {
                        _isFootBallText = value!;
                        String selectVal = "FootBall";
                        value! ? _list.add(selectVal) : _list.remove(selectVal);
                      });
                    },),),],),),],)
    );
}

@override

Widget build(BuildContext context) {

List<String> _list = [];

bool? _isFootBallText = false;

bool? _isCricketText = false;

bool? _isVolleyBallText = false;

bool? _isKabaddiText = false;

bool? _isBaskeballText = false;

bool? _isBasketBallText = false;

bool? _isOtherText = false;

return Scaffold(

body: Column(

children: <Widget>[

Expanded(

child: ListView(

children: <Widget>[

ListTile(

title: Text("FootBall"),

leading: Checkbox(

value: _isFootBallText,

onChanged: (bool? value) {

setState(() {

_isFootBallText = value!;

String selectVal = "FootBall";

value! ? _list.add(selectVal) : _list.remove(selectVal);

});

},),),],),),],)

);

}

3.) Do create a layout that will create the Column widget and put their Listview.

Creating a Checkboxes requires creating a class. The CheckboxListTile combines this widget with a ListTile so that you can give the checkbox a label.

By using Checkboxes, The checkbox itself does not maintain any state. When the state of the checkbox changes, the widget calls the onChanged callback.

The checkbox can optionally display three values – true, false, and null – if tristate is true.

The full code is mentioned below.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Checkbox Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    List<String> _list = [];

    bool? _isFootBallText = false;
    bool? _isCricketText = false;
    bool? _isVolleyBallText = false;
    bool? _isKabaddiText = false;
    bool? _isBaskeballText = false;
    bool? _isBasketBallText = false;
    bool? _isOtherText = false;


    return Scaffold(
      body: Column(
        children: <Widget>[
          Expanded(
            child: ListView(
              children: <Widget>[
                ListTile(
                  title: Text("FootBall"),
                  leading: Checkbox(
                    value: _isFootBallText,
                    onChanged: (bool? value) {
                      setState(() {
                        _isFootBallText = value!;
                        String selectVal = "FootBall";
                        value! ? _list.add(selectVal) : _list.remove(selectVal);
                      });
                    },
                  ),
                ),
                ListTile(
                  title: Text("Basketball"),
                  leading: Checkbox(
                    value: _isBaskeballText,
                    onChanged: (bool? value) {
                      setState(() {
                        _isBaskeballText = value!;
                        String selectVal = "Basketball";
                        value! ? _list.add(selectVal) : _list.remove(selectVal);
                      });
                    },
                  ),
                ),
                ListTile(
                  title: Text("Cricket"),
                  leading: Checkbox(
                    value: _isCricketText,
                    onChanged: (value) {
                      setState(() {
                        _isCricketText = value!;
                        String selectVal = "Cricket";
                        value! ? _list.add(selectVal) : _list.remove(selectVal);
                      });
                    },
                  ),
                ),
                ListTile(
                  title: Text("Kabaddi"),
                  leading: Checkbox(
                    value: _isKabaddiText,
                    onChanged: (value) {
                      setState(() {
                        _isKabaddiText = value!;
                        String selectVal = "Kabaddi";
                        value! ? _list.add(selectVal) : _list.remove(selectVal);
                      });
                    },
                  ),
                ),
                ListTile(
                  title: Text("BasketBall"),
                  leading: Checkbox(
                    value: _isBasketBallText,
                    onChanged: (value) {
                      setState(() {
                        _isBasketBallText = value!;
                        String selectVal = "BasketBall";
                        value! ? _list.add(selectVal) : _list.remove(selectVal);
                      });
                    },
                  ),
                ),
                ListTile(
                  title: Text("VolleyBall"),
                  leading: Checkbox(
                    value: _isVolleyBallText,
                    onChanged: (value) {
                      setState(() {
                        _isVolleyBallText = value!;
                        String selectVal = "VolleyBall";
                        value! ? _list.add(selectVal) : _list.remove(selectVal);
                      });
                    },
                  ),
                ),
                ListTile(
                  title: Text("Other Games"),
                  leading: Checkbox(
                    value: _isOtherText,
                    onChanged: (value) {
                      setState(() {
                        _isOtherText = value!;
                        String selectVal = "Other Games";
                        value! ? _list.add(selectVal) : _list.remove(selectVal);
                      });
                    },
                  ),
                ),
              ],
            ),
          ),
          Center(
              child: _list.isEmpty
                  ? Text("")
                  : RichText(
                  text: TextSpan(
                      text: "Selected Games:\n",
                      style: DefaultTextStyle.of(context).style,
                      children: <TextSpan>[
                        TextSpan(
                            text: '${_list.toString()} ',
                            style: TextStyle(fontSize: 16)),
                      ]))),
        ],
      )

    );
  }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

import 'package:flutter/material.dart';

void main() {

runApp(MyApp());

}

class MyApp extends StatelessWidget {

// This widget is the root of your application.

@override

Widget build(BuildContext context) {

return MaterialApp(

theme: ThemeData(

primarySwatch: Colors.blue,

home: MyHomePage(title: 'Checkbox Demo'),

);

}

class MyHomePage extends StatefulWidget {

MyHomePage({Key? key, required this.title}) : super(key: key);

final String title;

@override

_MyHomePageState createState() => _MyHomePageState();

}

class _MyHomePageState extends State<MyHomePage> {

@override

Widget build(BuildContext context) {

List<String> _list = [];

bool? _isFootBallText = false;

bool? _isCricketText = false;

bool? _isVolleyBallText = false;

bool? _isKabaddiText = false;

bool? _isBaskeballText = false;

bool? _isBasketBallText = false;

bool? _isOtherText = false;

return Scaffold(

body: Column(

children: <Widget>[

Expanded(

child: ListView(

children: <Widget>[

ListTile(

title: Text("FootBall"),

leading: Checkbox(

value: _isFootBallText,

onChanged: (bool? value) {

setState(() {

_isFootBallText = value!;

String selectVal = "FootBall";

value! ? _list.add(selectVal) : _list.remove(selectVal);

});

ListTile(

title: Text("Basketball"),

leading: Checkbox(

value: _isBaskeballText,

onChanged: (bool? value) {

setState(() {

_isBaskeballText = value!;

String selectVal = "Basketball";

value! ? _list.add(selectVal) : _list.remove(selectVal);

});

ListTile(

title: Text("Cricket"),

leading: Checkbox(

value: _isCricketText,

onChanged: (value) {

setState(() {

_isCricketText = value!;

String selectVal = "Cricket";

value! ? _list.add(selectVal) : _list.remove(selectVal);

});

ListTile(

title: Text("Kabaddi"),

leading: Checkbox(

value: _isKabaddiText,

onChanged: (value) {

setState(() {

_isKabaddiText = value!;

String selectVal = "Kabaddi";

value! ? _list.add(selectVal) : _list.remove(selectVal);

});

ListTile(

title: Text("BasketBall"),

leading: Checkbox(

value: _isBasketBallText,

onChanged: (value) {

setState(() {

_isBasketBallText = value!;

String selectVal = "BasketBall";

value! ? _list.add(selectVal) : _list.remove(selectVal);

});

ListTile(

title: Text("VolleyBall"),

leading: Checkbox(

value: _isVolleyBallText,

onChanged: (value) {

setState(() {

_isVolleyBallText = value!;

String selectVal = "VolleyBall";

value! ? _list.add(selectVal) : _list.remove(selectVal);

});

ListTile(

title: Text("Other Games"),

leading: Checkbox(

value: _isOtherText,

onChanged: (value) {

setState(() {

_isOtherText = value!;

String selectVal = "Other Games";

value! ? _list.add(selectVal) : _list.remove(selectVal);

});

Center(

child: _list.isEmpty

? Text("")

: RichText(

text: TextSpan(

text: "Selected Games:\n",

style: DefaultTextStyle.of(context).style,

children: <TextSpan>[

TextSpan(

text: '${_list.toString()} ',

style: TextStyle(fontSize: 16)),

]))),

)

);

}

We can now run the app on how to create Checkboxes in a flutter.

Finally, we have implemented the flow of creating Checkboxes in a flutter.

Hope this blog helps you to create Checkboxes in a flutter.

So, I hope it will help you out in understanding and getting a brief idea about it.

You can also check these links.

Another mentioned URL.

For more understanding please can go through this Link:

That’s all, You can enjoy your Checkboxes implementation in a flutter.

Thank you very much.

flutter

Priyanka Kumari 28 April 2023

. . .

How we create Checkboxes in a flutter.

To implement the Checkboxes do follow the steps mentioned below.

1.) Create a Scaffold. :

2.) Create the Checkboxes widget as you desire.

3.) Do create a layout that will create the Column widget and put their Listview.

The full code is mentioned below.

Finally, we have implemented the flow of creating Checkboxes in a flutter.

You can also check these links.

Another mentioned URL.

Leave a Comment Cancel Reply

Message Sent!