CodePudding user response:
There are two (2) solutions to this, you can use a stateful widget for each container OR use an object that holds the value, and map it to a list, this will be the best solution, so you can easily send the selected values back to the API.
You can run both on DartPad
Solution1: With Stateful CheckContainers Here
class CheckContainer extends StatefulWidget {
const CheckContainer({Key? key, this.title = ''}) : super(key: key);
final String title;
@override
State<StatefulWidget> createState() {
return _CheckContainerState();
}
}
class _CheckContainerState extends State<CheckContainer> {
bool isChecked = false;
@override
Widget build(BuildContext context) {
return InkWell(
splashColor: Colors.cyanAccent,
onTap: () {
setState(() {
isChecked = !isChecked;
});
},
child: Container(
padding: const EdgeInsets.all(12),
color: isChecked ? Colors.blue : Colors.white,
child: Text(
widget.title,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 14,
color: isChecked ? Colors.white : Colors.black,
),
),
),
);
}
}
class Amenties extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
backgroundColor: Colors.transparent,
appBar: AppBar(
title: const Text("Sunflower"),
),
body: Center(
child: Wrap(
spacing: 5.0,
runSpacing: 5.0,
children: const [
CheckContainer(title: 'Gas Cooker'),
CheckContainer(title: 'Washing Machine'),
CheckContainer(title: 'Wifi'),
CheckContainer(title: 'Television'),
CheckContainer(title: 'Water Heater'),
],
),
),
),
);
}
Solution2: Map the CheckContainerModel Here
class CheckContainerModel {
final String title;
bool isCheck;
CheckContainerModel({required this.title, this.isCheck = false});
CheckContainerModel copyWith({String? title, bool? isCheck}) {
return CheckContainerModel(
title: title ?? this.title,
isCheck: isCheck ?? this.isCheck,
);
}
}
class Amenities extends StatefulWidget {
const Amenities({Key? key}) : super(key: key);
@override
State<StatefulWidget> createState() {
return _AmenitiesState();
}
}
class _AmenitiesState extends State<Amenities> {
List<CheckContainerModel> checkContainers = [
CheckContainerModel(title: 'Gas Cooker', isCheck: false),
CheckContainerModel(title: 'Washing Machine', isCheck: false),
CheckContainerModel(title: 'Wifi', isCheck: false),
CheckContainerModel(title: 'Television', isCheck: false),
CheckContainerModel(title: 'Water Heater', isCheck: false),
];
void onCheckTap(CheckContainerModel container) {
final index = checkContainers.indexWhere(
(element) => element.title == container.title,
);
bool previousIsCheck = checkContainers[index].isCheck;
checkContainers[index].isCheck = !previousIsCheck;
setState(() {});
}
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
backgroundColor: Colors.transparent,
appBar: AppBar(
title: const Text("Sunflower"),
),
body: Center(
child: Wrap(
spacing: 5.0,
runSpacing: 5.0,
children: [
...checkContainers.map((container) {
return InkWell(
splashColor: Colors.cyanAccent,
onTap: () => onCheckTap(container),
child: Container(
padding: const EdgeInsets.all(12),
color: container.isCheck ? Colors.blue : Colors.white,
child: Text(
container.title,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 14,
color: container.isCheck ? Colors.white : Colors.black,
),
),
),
);
}).toList(),
],
),
),
),
);
}
}

