How to Insert Image from Asset 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 Assets Folder in your Project Directory:

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

Index Asset and Image Folder in pubspec.yaml file.

# 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. 

Now Add Image Widget into your App Structure:

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

Here, width and height are optional.

Full Dart Code Example:

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),

            ])
          )
       );
  }
}

Output Screenshot:

In this way, you can insert images in your app from the asset folder.

No any Comments on this Article


Please Wait...