If user clicks on any of the checkbox then a textformfield should be displayed below the checkbox to enter the unit configuration.
For example when user clicks on a checkbox 1BHK then a textformfield should be visible under it and if he clicks on 2 BHK then a textformfield should be visible under it and so on.
Here is my code:
import 'package:flutter/material.dart';
class CheckBoxes extends StatefulWidget {
const CheckBoxes({Key? key}) : super(key: key);
@override
State<CheckBoxes> createState() => _CheckBoxesState();
}
class _CheckBoxesState extends State<CheckBoxes> {
static List<String> selectedOptions = [];
List<CheckboxListTile>? bhkOptions;
@override
void initState() {
super.initState();
selectedOptions = [];
}
@override
Widget build(BuildContext context) {
bhkOptions = [
CheckboxListTile(
title: Text('1 BHK'),
value: selectedOptions.contains('1 BHK'),
onChanged: (bool? value) {
setState(() {
if (value!) {
selectedOptions.add('1 BHK');
} else {
selectedOptions.remove('1 BHK');
}
});
},
),
CheckboxListTile(
title: Text('2 BHK'),
value: selectedOptions.contains('2 BHK'),
onChanged: (bool? value) {
setState(() {
if (value!) {
selectedOptions.add('2 BHK');
} else {
selectedOptions.remove('2 BHK');
}
});
},
),
CheckboxListTile(
title: Text('3 BHK'),
value: selectedOptions.contains('3 BHK'),
onChanged: (bool? value) {
setState(() {
if (value!) {
selectedOptions.add('3 BHK');
} else {
selectedOptions.remove('3 BHK');
}
});
},
),
CheckboxListTile(
title: Text('4 BHK'),
value: selectedOptions.contains('4 BHK'),
onChanged: (bool? value) {
setState(() {
if (value!) {
selectedOptions.add('4 BHK');
} else {
selectedOptions.remove('4 BHK');
}
});
},
),
CheckboxListTile(
title: Text('5+ BHK'),
value: selectedOptions.contains('5+ BHK'),
onChanged: (bool? value) {
setState(() {
if (value!) {
selectedOptions.add('5+ BHK');
} else {
selectedOptions.remove('5+ BHK');
}
});
},
),
];
return Column(
children: bhkOptions!,
);
}
}
>Solution :
As suggested in https://api.flutter.dev/flutter/material/CheckboxListTile-class.html (below the headline "CheckboxListTile isn’t exactly what I want") you can create a custom checkbox widget. The class CheckBoxTile doesn’t contain properties to set a child widget below the checkbox.
The following code snippets implements a custom checkbox class MyCustomCheckbox. The TextFormField is the second item in a column and is only shown if the value property of MyCustomCheckbox isn’t null. Which exactly means that the checkbox is selected. The first item of the column includes the checkbox label and the checkbox itself.
class MyCustomCheckbox extends StatelessWidget {
const MyCustomCheckbox({
super.key,
required this.text,
required this.value,
required this.onChanged,
this.padding = const EdgeInsets.symmetric(vertical: 8, horizontal: 16)
});
final Text text;
final EdgeInsets padding;
final bool value;
final ValueChanged<bool> onChanged;
@override
Widget build(BuildContext context) {
return InkWell(
onTap: () {
onChanged(!value);
},
child: Padding(
padding: padding,
child: Column(
children: [
Row(
children: <Widget>[
Expanded(child: text),
Checkbox(
value: value,
onChanged: (bool? newValue) {
onChanged(newValue!);
},
),
],
),
value
//.........................................
//HERE IS THE TextFormField WIDGET
//.........................................
? TextFormField(
decoration: const InputDecoration(
icon: Icon(Icons.arrow_right),
labelText: 'You\'ve selected this option, please specify...',
)
)
//SizedBox is just an empty placeholder
: const SizedBox()
],
),
),
);
}
}
class CheckBoxes extends StatefulWidget {
const CheckBoxes({Key? key}) : super(key: key);
@override
State<CheckBoxes> createState() => _CheckBoxesState();
}
class _CheckBoxesState extends State<CheckBoxes> {
static List<String> selectedOptions = [];
List<MyCustomCheckbox>? bhkOptions;
@override
void initState() {
super.initState();
selectedOptions = [];
}
@override
Widget build(BuildContext context) {
bhkOptions = [
MyCustomCheckbox(
text: const Text('1 BHK'),
value: selectedOptions.contains('1 BHK'),
onChanged: (bool? value) {
setState(() {
if (value!) {
selectedOptions.add('1 BHK');
} else {
selectedOptions.remove('1 BHK');
}
});
},
),
MyCustomCheckbox(
text: const Text('2 BHK'),
value: selectedOptions.contains('2 BHK'),
onChanged: (bool? value) {
setState(() {
if (value!) {
selectedOptions.add('2 BHK');
} else {
selectedOptions.remove('2 BHK');
}
});
},
),
MyCustomCheckbox(
text: const Text('3 BHK'),
value: selectedOptions.contains('3 BHK'),
onChanged: (bool? value) {
setState(() {
if (value!) {
selectedOptions.add('3 BHK');
} else {
selectedOptions.remove('3 BHK');
}
});
},
),
MyCustomCheckbox(
text: const Text('4 BHK'),
value: selectedOptions.contains('4 BHK'),
onChanged: (bool? value) {
setState(() {
if (value!) {
selectedOptions.add('4 BHK');
} else {
selectedOptions.remove('4 BHK');
}
});
},
),
MyCustomCheckbox(
text: const Text('5+ BHK'),
value: selectedOptions.contains('5+ BHK'),
onChanged: (bool? value) {
setState(() {
if (value!) {
selectedOptions.add('5+ BHK');
} else {
selectedOptions.remove('5+ BHK');
}
});
},
),
];
return Column(
children: bhkOptions!,
);
}
}
