This class is marked as '@immutable', but one or more of its instance fields are not final:

Question

If I am declaring the variables as final then the values(variables) I want to change(on pressed) are in setState(){} so those variables can be changed What to do to prevent this?

Also, why is it written widget.value?

I have tried using static instead of final doesn't work

class BottomCard extends StatefulWidget {

String title;

int value;
@override
_BottomCardState createState() => _BottomCardState(); }

class _BottomCardState extends State<BottomCard> {..... 


....<Widget>[  
        FloatingActionButton(
          elevation: 0,
          child: Icon(FontAwesomeIcons.plus),
          onPressed: () {
            setState(() {
              widget.value++;
            });
          },
          backgroundColor: Color(0xFF47535E),
        ),

Answer 1

If you don't need to get variables (title & value) from outside your widget, you can declare them in the _BottomCardState class and use them as you want, for example:

class BottomCardState extends StatefulWidget {
  @override
  _BottomCardStateState createState() => _BottomCardStateState();
}

class _BottomCardStateState extends State<BottomCardState> {
  int _value;
  String title;

  @override
  void initState() {
    super.initState();
    _value = 0;
    title = "any thing";
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        elevation: 0,
        child: Icon(FontAwesomeIcons.plus),
        onPressed: () {
          setState(() {
            _value++; // increment value here
          });
        },
      ),
    );
  }
}

---

If you need to get variables (value & title) from other class, then you need to:

1. Mark them as final, or
2. Get them from constructor

To access their values in _BottomCardStateState, you can access them using widget._value. They are final so you can't modify them. For example:

class App extends StatelessWidget {
  const App({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: BottomCardState(2,"some thing"),
    );
  }
}

class BottomCardState extends StatefulWidget {
  final int _value;
  final String title;
  BottomCardState(this._value,this.title)

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

class _BottomCardStateState extends State<BottomCardState> {
  int value ;
  @override
  Widget build(BuildContext context) {
    value = widget._value ;
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        elevation: 0,
        child: Icon(FontAwesomeIcons.plus),
        onPressed: () {
          setState(() {
          value++; // increment value here
          });
        },
      ),
    );
  }
}

Answer 2

If I am declaring the variables as final then then the values(variables) i want to change(on pressed) are in set state(){} so those variables can be changed What to do to prevent this?

Extend StatefulWidget.

Also why is it written widget.value?

This means you are accessing value in your StatefulWidget subclass and this value is actually defined in your State class.

---

Full code should look like:

class BottomCardState extends StatefulWidget {
  @override
  _BottomCardStateState createState() => _BottomCardStateState();
}

class _BottomCardStateState extends State<BottomCardState> {
  int _value = 0; // set value here

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        elevation: 0,
        child: Icon(FontAwesomeIcons.plus),
        onPressed: () {
          setState(() {
            _value++; // increment value here
          });
        },
      ),
    );
  }
}

Answer 3

Just added this line top of the error class.

//ignore: must_be_immutable