Selecting a single CheckboxListTile item selects multiple ones?

user_10598297 0
Viewed 86

On the code below, selecting "Option A" automatically selects "Option B" aswell.

This code is basically a copy paste from CheckboxListTile class documentation example, twice.

class Alergias extends StatefulWidget {
  @override
  _AlergiasState createState() => _AlergiasState();
}

class _AlergiasState extends State<Alergias> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
    ...
      body: Column(
          CheckboxListTile(
            title: const Text("Option A"),
            value: timeDilation != 1.0,
            controlAffinity: ListTileControlAffinity.leading,
            onChanged: (bool value) {
              setState(() {
                timeDilation = value ? 2.0 : 1.0;
              });
            },
          ),
          CheckboxListTile(
            title: const Text("Option B"),
            value: timeDilation != 1.0,
            controlAffinity: ListTileControlAffinity.leading,
            onChanged: (bool value) {
              setState(() {
                timeDilation = value ? 2.0 : 1.0;
              });
            },
          ),
        ],
      ),
    );
  }
}

I don't understand why this happens or if it has something to do with the StatefulWidget State. Can anyone help me?

dart flutter widget
2 Answers

The problem is arising due to the Same timeDilation variable used in both the CheckboxListTile. Check out the code below,

import 'package:flutter/material.dart';

import 'package:flutter/scheduler.dart' show timeDilation;

void main() => runApp(MyApp());

/// This Widget is the main application widget.
class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: Center(
          child: MyStatefulWidget(),
        ),
      ),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  MyStatefulWidget({Key key}) : super(key: key);

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

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  var value1 = timeDilation.abs();
  var value2 = timeDilation.abs();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children : <Widget>[
          CheckboxListTile(
            title: const Text("Option A"),
            value: value1 != 1.0,
            controlAffinity: ListTileControlAffinity.leading,
            onChanged: (bool value) {
              setState(() {
                value1 = value ? 2.0 : 1.0;
              });
            },
          ),
          CheckboxListTile(
            title: const Text("Option B"),
            value: value2 != 1.0,
            controlAffinity: ListTileControlAffinity.leading,
            onChanged: (bool value) {
              setState(() {
                value2 = value ? 2.0 : 1.0;
              });
            },
          ),
        ],
      ),
    );
  }
}
user_125921050

It seems like you are new to Flutter. Welcome to the Flutter community! The reason why both of your CheckBoxListTile are selecting at the same time is that because you are using the same value for both of them. You've set the value of the CheckBoxListTile to timeDilation, changing the value of timeDilation will result to selecting both CheckBoxListTile at once.
If you only have to options, I would suggest using a boolean to hold the value:

bool _first;
CheckboxListTile(
            title: const Text("Option B"),
            value: _first??false,
            controlAffinity: ListTileControlAffinity.leading,
            onChanged: (bool value) {
              setState(() {
                _first=true;
              });
            },
          ),
CheckboxListTile(
            title: const Text("Option B"),
            value: _first??true?false:true,
            controlAffinity: ListTileControlAffinity.leading,
            onChanged: (bool value) {
              setState(() {
                _first=false;
              });
            },
          ),
user_95227320
Related