Dart - Only static members can accessed in initializers

Question

I am trying with the following code

class NewItemCreate extends StatefulWidget{

  @override
  NewItemCreateState createState() => new NewItemCreateState();
}

class NewItemCreateState extends State<NewItemCreate>
{

  File _image;
  Future getImage() async {
    var image = await ImagePicker.pickImage(source: ImageSource.camera);
    setState(() {
      _image = image;
    });
    print(_image.path);
  }
  @override
  Widget build(BuildContext context) {

    return Scaffold(
      backgroundColor: Colors.yellow,

        appBar: new AppBar(
          title: new Text("Report"),
          elevation: 5.0,
        ),
      body:
      Center  (
          child: ListView(
            padding: EdgeInsets.only(left: 24.0, right: 24.0),
            shrinkWrap: true,
            children: <Widget>[
              itemImage,
              SizedBox(height: 18.0),
              itemName,
              SizedBox(height: 18.0),
              itemLocation,
              SizedBox(height: 18.0),
              itemLocation,
              SizedBox(height: 18.0),
              itemTime,
              SizedBox(height: 18.0),
              Report,
              SizedBox(height: 38.0),
            ],
          )
      )
    );

  }

  final itemImage =       Padding(
    padding: EdgeInsets.symmetric(vertical: 25.0),
    child: Material(
      borderRadius: BorderRadius.circular(30.0),
      shadowColor: Colors.lightBlueAccent.shade100,
      elevation: 5.0,
      child: MaterialButton(
        minWidth: 200.0,
        height: 300.0,
        onPressed: (){
          getImage();
        },
        color: Colors.lightGreenAccent,
        child:
        new Icon(Icons.add_a_photo, size: 150.0,color: Colors.blue,),
      ),
    ),
  );

There is already a question here, Error: Only static members can be accessed in initializers what does this mean? regarding this very issue, but, should I really be using "SingleTickerProviderStateMixin" for this? Also, is this something to do with singletons? (I am still learning programming)

Error after trying out the below answer:

Answer 1

final itemImage = ...

initializes a class-level field. This code is executed before the constructor is completed and the object fully initialized, therefore accessing this. (implicit or explicit) is forbidden because it can't be guaranteed that what you attempt to access is already initialized.

Creating and caching widgets this way is a bad idea in general anyway. Instead make it a method:

Widget buildItemImage(BuildContext context) => Padding(
    padding: EdgeInsets.symmetric(vertical: 25.0),
    child: Material(
        borderRadius: BorderRadius.circular(30.0),
        shadowColor: Colors.lightBlueAccent.shade100,
        elevation: 5.0,
        child: MaterialButton(
            minWidth: 200.0,
            height: 300.0,
            onPressed: () {
                getImage();
            },
            color: Colors.lightGreenAccent,
            child: new Icon(Icons.add_a_photo, size: 150.0,color: Colors.blue,
        ),
      ),
    ),
);

This way the code is first executed when buildItemImage(context) is called, not when the object instance is created. At this time it is guaranteed to be save to access this..

Answer 2

Try to cut the

Padding(
padding: EdgeInsets.symmetric(vertical: 25.0),
child: Material(
  borderRadius: BorderRadius.circular(30.0),
  shadowColor: Colors.lightBlueAccent.shade100,
  elevation: 5.0,
  child: MaterialButton(
    minWidth: 200.0,
    height: 300.0,
    onPressed: (){
      getImage();
    },
    color: Colors.lightGreenAccent,
    child:
    new Icon(Icons.add_a_photo, size: 150.0,color: Colors.blue,),
  ),
),

); And paste it in children<Widget>[//here] and add a new

body:
  Center  (
      child: ListView(
        padding: EdgeInsets.only(left: 24.0, right: 24.0),
        shrinkWrap: true,
        children: <Widget>[
        ------------/*there it is*/---------------------------
          new Padding(
            padding: EdgeInsets.symmetric(vertical: 25.0),
            child: Material(
              borderRadius: BorderRadius.circular(30.0),
              shadowColor: Colors.lightBlueAccent.shade100,
              elevation: 5.0,
           child: MaterialButton(
              minWidth: 200.0,
              height: 300.0,
              onPressed: (){
                   getImage();
              },
          color: Colors.lightGreenAccent,
          child:
          new Icon(Icons.add_a_photo, size: 150.0,color: 
                     Colors.blue,),
          ),
        ),
     -----------------------------------------------------
          SizedBox(height: 18.0),
          itemName,
          SizedBox(height: 18.0),
          itemLocation,
          SizedBox(height: 18.0),
          itemLocation,
          SizedBox(height: 18.0),
          itemTime,
          SizedBox(height: 18.0),
          Report,
          SizedBox(height: 38.0),
        ],
      )
  )

Hope it's work :)