Selecting a single CheckboxListTile item selects multiple ones? - flutter

Question

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?

Answer 1

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;
});
},
),
],
),
);
}
}

Answer 2

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