App starts off with a default image background, user can choose another image from settings page and then that image object is passed on to the main page.

Image type is passed but somehow I feel like I’m being forced to switch between Image type to string of image and still getting errors anyway.

Can someone please advise me if there is a better way of doing this.

Error: Expected a value of type ‘String’, but got one of type ‘Image’

void main() {
  runApp(MyApp(image: Image.asset('assets/fresco-headshot.jpg'))); //default image
}

class MyApp extends StatelessWidget {
  const MyApp({super.key, required this.image});
 final Image image;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(image: image), //Expected a value of type 'String', but got one of type 'Image'. But image type image is passed and expected. Why does it need to be a string?
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key, required this.image}) : super(key: key);
final Image image;
  @override
  Widget build(BuildContext context) {
    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: SystemUiOverlayStyle.light,
      child: Scaffold(
        appBar: AppBar(
          actions: [
            IconButton(
              onPressed: () {
                Navigator.push(context,
                    MaterialPageRoute(builder: (context) => const SettingsPage()));
              },
              tooltip: 'Grid of tasks',
              icon: const Icon(Icons.search),
            ),
          ],
        ),
        body: Center(
          child: Padding(
            padding: const EdgeInsets.all(32.0),
            child: AspectRatio(
              aspectRatio: 0.85,
              child: Stack(
                children: [
                  Positioned(
                      child: Image(image: AssetImage(image as String)) ,
                  ),
                  const Positioned(child: Stopwatch()),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

>Solution :

The issue with your code is that you are trying to pass an object of type Image as a String to the AssetImage constructor. Instead, you should pass the asset path as a String to the constructor.

One way to solve this is to change the type of image in MyApp and MyHomePage from Image to String, and pass the asset path as a String when creating an instance of MyApp. You can then use the AssetImage constructor to create an image widget in MyHomePage using the asset path.

Here’s an updated version of your code with these changes:

void main() {
  runApp(MyApp(imagePath: 'assets/fresco-headshot.jpg')); //default image
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key, required this.imagePath}) : super(key: key);
  final String imagePath;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(imagePath: imagePath),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key, required this.imagePath}) : super(key: key);
  final String imagePath;

  @override
  Widget build(BuildContext context) {
    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: SystemUiOverlayStyle.light,
      child: Scaffold(
        appBar: AppBar(
          actions: [
            IconButton(
              onPressed: () {
                Navigator.push(context,
                    MaterialPageRoute(builder: (context) => const SettingsPage()));
              },
              tooltip: 'Grid of tasks',
              icon: const Icon(Icons.search),
            ),
          ],
        ),
        body: Center(
          child: Padding(
            padding: const EdgeInsets.all(32.0),
            child: AspectRatio(
              aspectRatio: 0.85,
              child: Stack(
                children: [
                  Positioned(
                    child: Image(image: AssetImage(imagePath)),
                  ),
                  const Positioned(child: Stopwatch()),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

In this updated code, MyApp now takes a String parameter imagePath instead of an Image parameter. The same parameter is then passed to MyHomePage, where it is used to create an AssetImage widget.