YT video:

https://youtu.be/Hxh6nNHSUjo?si=o4a39ckEOmCdpvQ3

We now delete the Text widget inside the body and add Image widget.

Image From Web url:

Image widget has image property, which can be used to specify the image url from the web.

body: Center(
        child: Image(
          image: NetworkImage('<https://plus.unsplash.com/premium_photo-1683910767532-3a25b821f7ae?q=80&w=2008&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D>'),
          opacity: AlwaysStoppedAnimation(0.5),
        ), //Image
//Don't copy this code, brackets not complete

Any image url from the internet can be pasted here.

Image from local file:

It’s very similar to adding font. Create a new directory inside app’s directory. Here we name it assets. Now go to pubspec.yaml file. Scroll a bit to find the syntax for adding image paths, uncomment that. Now add image by: just instead of NetworkImage widget as value of image: property, give AssetImage and inside, give the path.

Fig: new directory inside app folder

Change in pubspec.yaml

  # To add assets to your application, add an assets section, like this:

  assets:
    - assets/img_1.png

OR

If there are many images in assets folder, instead of writing all the image names, we can just write the folder name only:

  # To add assets to your application, add an assets section, like this:

  assets:
    - assets/