Trying make a status based on a boolean value to change an icon to tick in Dart

Viewed 40

Need to make a status based on a boolean value to change an icon to tick if it is true and do nothing if its false. Tried to make logic but something not working well. Please help.

class OrderStatusBar extends StatefulWidget {
  const OrderStatusBar( {Key? key, required this.title, required this.status}) : super(key: key);
  final String title;
  final bool status;
  @override
  State<OrderStatusBar> createState() => _OrderStatusBarState();
}

class _OrderStatusBarState extends State<OrderStatusBar> {
  @override
  Widget build(BuildContext context) {




return Row(
  children: [
    Text('${widget.title}'),

     IconButton(
      icon: true
          ? Icon(Icons.favorite_border)
          : Icon(
              Icons.favorite,
            ),
      onPressed: () {
        setState(() {
          // Here we changing the icon.
          var status = !true;
        });
      }),
  ],
);
  }
}
4 Answers
class _OrderStatusBarState extends State<OrderStatusBar> {      
bool _favoriteStatus = widget.status;
                        
         @override
          Widget build(BuildContext context) {
            return Row(
              children: <Widget>[
                Text('${widget.title}'),
                IconButton(
                    icon: _favoriteStatus ? const Icon(Icons.favorite) : const Icon(Icons.favorite_border),
                    onPressed: () {
                      setState(() {
                        _favoriteStatus = !_favoriteStatus;
                      });
                    }),
              ],
            );
          }
        
}

Since you are getting the status in stateful widget, you can use it as widget.status and check using ternary operator ? :

Example

class OrderStatusBar extends StatefulWidget {
  const OrderStatusBar( {Key? key, required this.title, required this.status}) : super(key: key);
  final String title;
  final bool status;
  @override
  State<OrderStatusBar> createState() => _OrderStatusBarState();
}

class _OrderStatusBarState extends State<OrderStatusBar> {  

late bool status;

@override
void initState() {
  status = widget.status;
  super.initState();
}   
                
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        Text('${widget.title}'),
        IconButton(
            icon: Icon(status ? Icons.favorite : Icons.favorite_border),
            onPressed: () {
              setState(() {
                status = !status;
              });
            }),
      ],
    );
  }
}
class OrderStatusBar extends StatefulWidget {
  const OrderStatusBar( {Key? key, required this.title, required this.status}) : super(key: key);
  final String title;
  final bool status;
  @override
  State<OrderStatusBar> createState() => _OrderStatusBarState();
}

class _OrderStatusBarState extends State<OrderStatusBar> {

bool initialStatus=widget.status;
  @override
  Widget build(BuildContext context) {




return Row(
  children: [
    Text('${widget.title}'),

     IconButton(
      icon: initialStatus
          ? Icon(Icons.favorite_border)
          : Icon(
              Icons.favorite,
            ),
      onPressed: () {
        setState(() {
          // Here we changing the icon.
           initialStatus = !initialStatus;
        });
      }),
  ],
);
  }
}

You need to store the status in your state widget and toggle the boolean when clicking on the icon.

Also, you can access the fields of the widget from its state through the widget property of the state.

class OrderStatusBar extends StatefulWidget {
  const OrderStatusBar({Key? key, required this.title, required this.status}) : super(key: key);
  final String title;
  final bool status;

  @override
  State<OrderStatusBar> createState() => _OrderStatusBarState();
}

class _OrderStatusBarState extends State<OrderStatusBar> {
  late bool status;

  @override
  void initState() {
    super.initState();
    status = widget.status; // you will need to implement the initState() function as the `widget`
                            // property cannot be accessed during the instance initialization
  }

  @override
  Widget build(BuildContext context) {
    return Row(children: [
      Text(widget.title),
      IconButton(
          icon: status ? const Icon(Icons.favorite_border) : const Icon(Icons.favorite),
          onPressed: () {
            setState(() {
              status = !status; // here we toggle the status field of the state widget
            });
          })
    ]);
  }
}
Related