Home > Back-end >  Trying make a status based on a boolean value to change an icon to tick in Dart
Trying make a status based on a boolean value to change an icon to tick in Dart

Time:08-27

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;
        });
      }),
  ],
);
  }
}

CodePudding user response:

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;
              });
            }),
      ],
    );
  }
}

CodePudding user response:

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;
        });
      }),
  ],
);
  }
}

CodePudding user response:

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