Using Local Images in Flutter

Updated: February 6, 2023 By: Augustus One comment

The steps below show you how to display local images in Flutter:

1. Create a folder in your project root directory and name it “images” (the name doesn’t matter, you can name it “assets” or whatever name that makes sense).

2. Copy all of the images you will use in your application to the “images” folder:

3. Open the pubspec.yaml file and add an “assets” section with the “images” directory inside the “flutter” section, like so:

    - images/

Note: Specify the directory name with the “/” character at the end to identify images required by your app. For convenience, you don’t have to declare all the image names but keep in mind that only files located directly in the directory are included. To add files located in subdirectories, create an entry per directory.

4. Using images

To use local images in Flutter, we use the Image widget like so:


Full Example:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  Widget build(BuildContext context) {
    return const MaterialApp(
      // Remove the debug banner
      debugShowCheckedModeBanner: false,
      title: 'Flutter Example',
      home: MyHomePage(),

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Example'),
      body: Column(
          // Make sure you write the correct image paths
          children: [
            // simple
            // add some options
              width: 200,
              height: 200,


Note: After adding new images or editing the pubspec.yaml file, you should completely restart your app. A hot reload (r) or a hot restart (R) isn’t enough.

Further reading:

You can also check out our Flutter category page or Dart category page for the latest tutorials and examples.

Notify of
1 Comment
Inline Feedbacks
View all comments
Flutter: Set an image background for a Container | Kindacode
3 years ago

[…] Related article: How to use local images in Flutter […]

Related Articles