cant define a const constructor for a class with non final fields Flutter

According to error, just remove the const keyword from Constructor and you are good to go. The Following code should remove the error :

class ContainerButtonState extends State<ContainerButton> {
  final ButtonType buttonType;
  CustomButton({Key key, this.buttonType}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(21),
      color: Color(0xfff4f5f9),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          Flexible(
            child: CustomButton(buttonType: ButtonType.download),
          ),
          Flexible(
            child: CustomButton(buttonType: ButtonType.share),
          ),
          Flexible(
            child: CustomButton(buttonType: ButtonType.problem),
          ),
        ],
      ),
    );
  }
}

can't define a const constructor for a class with non final fields

const constructors are used so that the class attributes do not change. By not adding the final you are allowing that variable to change after declaration.

constant constructor can't call non-constant super constructor of State

In this case, the class State does not have a const constructor (see the api). Extending a class that does not have a const constructor does not allow the class extending it to have a const constructor.

When talking about inheritance in Dart, you can only make extending classes less restrictive but not more. If you were to make a const constructor, you would make the class ContainerButtonState more restrictive than the State<T> class. If you want to learn more about Dart's inheritance, here you have the api.

I hope I've been clear!

Replace const CustomButton({Key key, this.buttonType}) with const ContainerButton({Key key, this.buttonType}) And you have to place it outside the statefull class

Here is the final code :

class ContainerButton extends StatefulWidget {
   final ButtonType buttonType;
  const ContainerButton({Key key, this.buttonType}) : super(key: key);
  @override
  ContainerButtonState createState() => ContainerButtonState();
}

class ContainerButtonState extends State<ContainerButton> {
 
    @override
    Widget build(BuildContext context) {
      return Container(
        padding: EdgeInsets.all(21),
        color: Color(0xfff4f5f9),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            Flexible(
              child: CustomButton(buttonType: ButtonType.download),
            ),
            Flexible(
              child: CustomButton(buttonType: ButtonType.share),
            ),
            Flexible(
              child: CustomButton(buttonType: ButtonType.problem),
            ),
          ],
        ),
      );
    }
  }

----- QUICK SOLUTION -----

remove "const" keyword from

const CustomButton({Key key, this.buttonType}) : super(key: key);

so this would look like

CustomButton({Key key, this.buttonType}) : super(key: key);

---- DETAILED ANSWER -----

let's break down the question

const constructor means the constructor for which you can't change value

final means single-assignment: a final variable or field must have an initializer. Once assigned a value, a final variable's value cannot be changed

non final fields are something that you want to change in the future. like your counter(that increase by one or any you want).

The Problem in Your code is HERE

const CustomButton({Key key, this.buttonType}) : super(key: key);

remove "const" keyword from

const CustomButton({Key key, this.buttonType}) : super(key: key);

MODIFIED CODE

class ContainerButton extends StatefulWidget {
  @override
  ContainerButtonState createState() => ContainerButtonState();
}

class ContainerButtonState extends State<ContainerButton> {
  final ButtonType buttonType;
  CustomButton({Key key, this.buttonType}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(21),
      color: Color(0xfff4f5f9),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          Flexible(
            child: CustomButton(buttonType: ButtonType.download),
          ),
          Flexible(
            child: CustomButton(buttonType: ButtonType.share),
          ),
          Flexible(
            child: CustomButton(buttonType: ButtonType.problem),
          ),
        ],
      ),
    );
  }
}