🚀 How to Use Images in Flutter? | Complete Guide 🖼️

Introduction:

In this article, we will explore the process of incorporating images into a Flutter application, enhancing its visual appeal and user experience.

How To Use Image From Asset Folder?

• Let’s create a Flutter project by executing below command in terminal.

    flutter create my_image_app
  

• Navigate to the project folder by executing below command.

    cd my_image_app
  

• Open the project in Visual Studio Code.

• Create a folder called asset in project’s root directory and add images to that folder.

• Now open up pubspec.yaml file, add the path of our images under assets section as shown below.

    flutter:
      assets:
        - assets/<filename-with-extension>
  

• If you have multiple images, then just specify the directory name as shown below and save the changes.

    flutter:
      assets:
        - assets/
  

• Open up main.dart file and use Image.asset widget to display the image from asset folder as shown below.

    class MyHomePage extends StatelessWidget {
      const MyHomePage({super.key, required this.title});
  
      final String title;
  
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            backgroundColor: Theme.of(context).colorScheme.inversePrimary,
            title: Text(title),
          ),
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[Image.asset('assets/<filename-with-extension>')],
            ),
          ),
        );
      }
    }
  

• Save the changes and let’s run the application.

• Image will get displayed as shown below.

How To Use Image From Internet?

• Displaying an image from internet is super easy. Instead of Image.asset widget, we use Image.network widget and instead of image path, we use image URL as shown below.

    class MyHomePage extends StatelessWidget {
      const MyHomePage({super.key, required this.title});
  
      final String title;
  
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            backgroundColor: Theme.of(context).colorScheme.inversePrimary,
            title: Text(title),
          ),
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[Image.network('<image-url>')],
            ),
          ),
        );
      }
    }
  

• Save the changes and run the application.

How To Add Filtering Effect To An Image?

The Image widget has various properties that you can use to customize the look of an image. For instance, you can change the width and height of the image, as well as apply a filtering effect.

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Image.asset(
              'assets/<filename-with-extension>',
              width: 400,
              height: 400,
              color: Colors.amber,
              colorBlendMode: BlendMode.darken,
            )
          ],
        ),
      ),
    );
  }
}

Save the changes and let’s run the application. The image will look like this:

I have also created a YouTube video regarding this topic, so if you would like to watch a video tutorial, then please go to https://youtu.be/kTa6cPppI-4.

Conclusion:

In conclusion, using images in a Flutter application is a straightforward process that enhances the visual appeal and user experience. Whether you're using images from the asset folder or fetching them from the internet, Flutter provides flexible widgets like Image.asset and Image.network to make the process seamless. Additionally, Flutter offers various properties to customize images, such as adjusting size and applying filtering effects, allowing developers to create visually engaging applications. By following the steps outlined in this guide, you can effectively incorporate images into your Flutter projects and elevate your app's design. I hope this article helped!

Happy coding!