Download StackFood Multi Restaurant, Food Delivery App with Laravel Admin and Restaurant Panel Buy Full App on $79
Download FlutKit - Flutter UI Kit Most beautiful Flutter UI Kit with 20+ Full App, 450+ Screens. Buy Full Kit on $39
Download Fluxstore Multi Vendor WooCommerce/Dokan Plugin compatible WordPress eCommerce Flutter App. Buy Full App on $79

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.

  # 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/ #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(){

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

class Home extends StatelessWidget{
  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...