如何在有状态小部件 flutter 中使用 static 构造函数？

Question

I want to make a clickable iconButton with a different boolean value init.

get the IconButton code:

Row(
 children: [
  CheckIcon(isCheck: true,),
  CheckIcon(isCheck: false,),
  CheckIcon(isCheck: true,),
 ],
),

IconButton Code:

import 'package:flutter/material.dart';

class CheckIcon extends StatefulWidget {
  static bool? isCheck;

  //the error is hire
  const CheckIcon({
    Key? key,
    // I can't initialize the static boolean in constructor
  }) : super(key: key);

  @override
  State<CheckIcon> createState() => _CheckIconState();
}

class _CheckIconState extends State<CheckIcon> {
  @override
  Widget build(BuildContext context) {
    return IconButton(
      splashRadius: 18.0,
      icon: Icon(
        CheckIcon.isCheck!
            ? Icons.check_circle_rounded
            : Icons.check_circle_outline_rounded,
        color: Colors.lightBlue,
        size: 20,
      ),
      onPressed: () {
        setState(() {
          CheckIcon.isCheck = !CheckIcon.isCheck!;
        });
      },
    );
  }
}

How to initialize the static boolean in the constructor stateful widget in flutter?

I hope you have the idea to share, cheers... thanks

Answer 1

Why use static ? Static field is shared across all instances, you won't have different states.

Instead use State field and change it in setState method:

class CheckIcon extends StatefulWidget {
  final bool isCheck;

  const CheckIcon({
    Key? key,
    required this.isCheck, // here we set first value
  }) : super(key: key);

  @override
  State<CheckIcon> createState() => _CheckIconState();
}

class _CheckIconState extends State<CheckIcon> {
  late bool checked = widget.isCheck; // here we set first value and then change it in setState

  @override
  Widget build(BuildContext context) {
    return IconButton(
      splashRadius: 18.0,
      icon: Icon(
        checked
            ? Icons.check_circle_rounded
            : Icons.check_circle_outline_rounded,
        color: Colors.lightBlue,
        size: 20,
      ),
      onPressed: () {
        setState(() {
          checked = !checked;
        });
      },
    );
  }
}

Answer 2

Youu can't pass the static in construction please refer to the below doc.

https://dart.dev/tools/diagnostic-messages?utm_source=dartdev&utm_medium=redir&utm_id=diagcode&utm_content=initializer_for_static_field#initializer_for_static_field

instead you can use this if it's okay in your case.

 // ignore: must_be_immutable
 class CheckIcon extends StatefulWidget {
   bool isCheck;
 
   CheckIcon({
     Key? key,
     required this.isCheck,
   }) : super(key: key);
 
   @override
   State<CheckIcon> createState() => _CheckIconState();
 }
 
 class _CheckIconState extends State<CheckIcon> {
   @override
   Widget build(BuildContext context) {
     return IconButton(
       splashRadius: 18.0,
       icon: Icon(
         widget.isCheck ? Icons.check_circle_rounded : Icons.check_circle_outline_rounded,
         color: Colors.lightBlue,
         size: 20,
       ),
       onPressed: () {
         setState(() {
           widget.isCheck = !widget.isCheck;
         });
       },
     );
   }
 }

Answer 3

You cant use a static variable in constructor. You can do it like the following

class CheckIcon extends StatefulWidget {
  final bool? isCheck;


  const CheckIcon({
    Key? key,
required this.isCheck
  }) : super(key: key);

  @override
  State<CheckIcon> createState() => _CheckIconState();
}

class _CheckIconState extends State<CheckIcon> {
  @override
  Widget build(BuildContext context) {
    return IconButton(
      splashRadius: 18.0,
      icon: Icon(
        CheckIcon.isCheck!
            ? Icons.check_circle_rounded
            : Icons.check_circle_outline_rounded,
        color: Colors.lightBlue,
        size: 20,
      ),
      onPressed: () {
        setState(() {
          widget.isCheck = !widget.isCheck!;
        });
      },
    );
  }
}