How can I make the switches, which have their own StatelessWidget Class toggle when clicked?

Question

I am trying to make two switches toggle between on and off when they are clicked. I created a StatelessWidget class for the design of the switches. However, when I use this, and call the class in my User interface class, the switches do not change state. How can I update my code to allow for there to be a change?

import 'package:flutter/material.dart';

class NotificationItem extends StatelessWidget {
  NotificationItem(
      {@required this.title,
      @required this.pushStatus,
      @required this.emailStatus});

  String title;
  bool pushStatus;
  bool emailStatus;

  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        Expanded(
          child: Padding(
            padding: EdgeInsets.all(20),
            child: Text(
              title,
              style: TextStyle(
                  fontFamily: kFontFamilyNormal,
                  fontSize: 17,
                  color: AppColor.text,
                  fontWeight: FontWeight.w500),
            ),
          ),
        ),
        Expanded(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              Switch(
                value: emailStatus,
                onChanged: (value) {
                  emailStatus = value;
                  print(emailStatus);
                },
                activeTrackColor: AppColor.primaryColorDark,
                activeColor: AppColor.white,
              ),
              Switch(
                value: pushStatus,
                onChanged: (value) {
                  pushStatus = value;
                  print(pushStatus);
                },
                activeTrackColor: AppColor.primaryColorDark,
                activeColor: AppColor.white,
              ),
            ],
          ),
        ),
      ],
    );
  }
}

and the following code is how I am calling it:

NotificationItem(
                title: 'New messages',
                emailStatus: emailStatus,
                pushStatus: pushStatus,
              )

Answer 1

Since you are changing state, it has to be a StatefulWidget. Like so:

class NotificationItem extends StatefulWidget {
  const NotificationItem({
    Key key,
    @required this.title,
    @required this.pushStatus,
    @required this.emailStatus,
  });
  final String title;
  final bool pushStatus;
  final bool emailStatus;

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

class _NotificationItemState extends State<NotificationItem> {
  String _title;
  bool _pushStatus;
  bool _emailStatus;
  
  void initState() {
    super.initState();
    _title = widget.title;
    _pushStatus = widget.pushStatus;
    _emailStatus = widget.emailStatus;
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        Expanded(
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: Text(
              _title,
            ),
          ),
        ),
        Expanded(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              Switch(
                value: _emailStatus,
                onChanged: (value) {
                  setState(() => _emailStatus = value);
                  print(_emailStatus);
                },
              ),
              Switch(
                value: _pushStatus,
                onChanged: (value) {
                  setState(() => _pushStatus = value);
                  print(_pushStatus);
                },
              ),
            ],
          ),
        ),
      ],
    );
  }
}