Home > OS >  How to make a container as a check box in Flutter and make sure it doesn't deselect
How to make a container as a check box in Flutter and make sure it doesn't deselect

Time:01-26

I have used a package enter image description here

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(),
            ],
          ),
        ),
      ),
    );
  }
}
  •  Tags:  
  • Related