How to include images in your Flutter app

Suragch
Suragch
Jun 5 · 2 min read

This is a repost of an answer I wrote on Stack Overflow.

I originally wrote this answer when I was learning how to add images to my Flutter project. Check out the documentation, but in case you need a little more step-by-step help, keep reading.

1. Create an assets/images folder

assets/images folder
  • This should be located in the root of your project, in the same folder as your pubspec.yaml file.
  • In Android Studio you can right click in the Project view
  • You don’t have to call it assets or images. You don't even need to make images a subfolder. Whatever name you use, though, is what you will register in the pubspec.yaml file.

2. Add your image to the new folder

  • You can just copy your image into assets/images. The relative path of lake.jpg, for example, would be assets/images/lake.jpg.

3. Register the assets folder in pubspec.yaml

  • Open the pubspec.yaml file that is in the root of your project.
  • Add an assets subsection to the flutter section like this:
flutter:   
assets:
- assets/images/lake.jpg
  • If you have multiple images that you want to include then you can leave off the file name and just use the directory name (include the final /):
flutter:
assets:
- assets/images/

4. Use the image in code

  • Get the asset in an Image widget with Image.asset('assets/images/lake.jpg').
  • The entire main.dart file is here:
import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Image from assets"),
),
body: Image.asset('assets/images/lake.jpg'), // <-- image
),
);
}
}

5. Restart your app

When making changes to pubspec.yaml I find that I often need to completely stop my app and restart it again, especially when adding assets. Otherwise I get a crash.

Running the app now you should have something like this:

Further reading

  • See the documentation for how to do things like provide alternate images for different densities.

Suragch

Written by

Suragch

An Android and iOS developer who has transitioned to Flutter.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade