Flutter: Passing image between pages

Question

I have here a draft from my application as a demo, I'm trying to pass an image from one page to another but that's not the problem the receiving page (CandyJar) can be accessed from two pages the homepage and imagepage. Imagepage pass the cake image(AssetImage('images/cake.png')) to the Candyjar page & the homepage just navigating to CandyJar page; my question here when navigating from home page I want it to show mysterybox image (AssetImage('images/mystrybox.png') unless the Cake image has been already passed through from Image page then it will show the cake image. I know the decription is confusing but I'm trying to be as descriptive as possible & here is the code sample for the three pages to clarify more

HomePage:

    void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        RaisedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => CandyJar(),
              ),
            );
          },
          child: Text('Got to candy jar page'),
        ),
        SizedBox(
          height: 40.0,
        ),
        RaisedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => ImagePage(),
              ),
            );
          },
          child: Text('Go to Image page'),
        )
      ],
    );
  }
}

CandyJar Page

 class CandyJar extends StatefulWidget {
  CandyJar({
    this.cakeImage,
  });
  final ImageProvider cakeImage;
  @override
  _CandyJarState createState() => _CandyJarState();
}

class _CandyJarState extends State<CandyJar> {
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.all(25.0),
      padding: EdgeInsets.all(10.0),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(25.0),
        color: Colors.white30,
      ),
      child: Image(
//image: AssetImage('images/mysterybox.png'), Show this Image when navigating from Homepage unless the Cake image has been already passed through from Image page then it will show the cake image.
        image: widget.cakeImage,
        height: 70.0,
        width: 70.0,
      ),
    );
  }
}

Imagepage:

    class ImagePage extends StatefulWidget {
  @override
  _ImagePageState createState() => _ImagePageState();
}

class _ImagePageState extends State<ImagePage> {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Image(
          image: AssetImage('images/cake.png'),
        ),
        RaisedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => CandyJar(
                  cakeImage: AssetImage('images/cake.png'),
                ),
              ),
            );
          },
          child: Text(
              'Pass cake image to Candy Jar Page & replace the mysterybox image'),
        ),
      ],
    );
  }
}

Thank you very much in advance any help with this question would be much appreciated :D

Answer 1

So basically you can do something as shown below:

widget.cakeImage ?? AssetImage('images/mysterybox.png')

The "??" means that if widget.cakeImage is null then shown the default image otherwise show the image passed in widget.cakeImage