How to Add Image from Assets Folder in Flutter App

In this example, we are going to show you the basic practice to add or insert images from the asset folder in Flutter App. Images are very important for any web and app development for interactive design. See the example below to insert images in your app from asset folder.

Create an assets folder, you can categorize images or any other files using a sub-folder. Copy your images to the respective folders.

# The following section is specific to Flutter.
flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  assets:
    - assets/ #folder indexing, all files will get indexed
    - assets/nature/ #assets subfolder all files indexing
    - assets/nature/nature.jpg #single file indexing
  #   - images/a_dot_ham.jpeg

Be careful about tabs and spacing, you may get the error. Read this article if you get the error message "Unable to load asset": How to solve the "Unable to load asset" error in Flutter.

Image.asset("assets/img.png", width: 170, height: 300),

Here, width and height are optional.

import 'package:flutter/material.dart';

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return  Scaffold(
          appBar: AppBar( 
             title: Text("Asset Image"),
             backgroundColor: Colors.deepOrangeAccent,
          ),
          body: Container(
            padding: EdgeInsets.all(20),
            child: Row(children: [
                Image.asset("assets/img.png", width: 170, height: 300),
                Image.asset("assets/nature/nature.jpg", width:170),

            ])
          )
       );
  }
}