AssetImage

Load local images with AssetImage.

What is AssetImage?

AssetImage is the class used to load local images bundled into your app. Image files are placed in the project's assets/ folder and declared in pubspec.yaml. You show the image with either AssetImage(...) or the shortcut Image.asset(...).

Image(
  image: AssetImage('assets/logo.png'),
)

// or the shortcut:
Image.asset('assets/logo.png')

Declaring assets in pubspec.yaml

In pubspec.yaml you add an assets list under the flutter section. If you write a folder path, all files inside are bundled; you can also list individual files. After changes you must do a hot restart; hot reload is not enough.

flutter:
  uses-material-design: true
  assets:
    - assets/
    - assets/icons/

Exercise Show an image with AssetImage

Return an Image widget that shows assets/logo.png using AssetImage. Place it inside a Center in the Scaffold body.

Show example solution

import 'package:flutter/material.dart';

void main() {
  print('AssetImage: assets/logo.png');
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Image(
            image: AssetImage('assets/logo.png'),
          ),
        ),
      ),
    );
  }
}

Test yourself

What is the first step to bundle a local image into the app?
- Place the image in the lib folder
- Put the image in the assets folder and declare it in pubspec.yaml
- Download the image from the internet
- Embed the image inside main.dart
Show answer

Put the image in the assets folder and declare it in pubspec.yaml — Images loaded with AssetImage are bundled into the app package; the file must be placed in the assets folder and declared in pubspec.yaml.

Load an image with AssetImage

Image(
  image: ____,
)

Show answer

Image(
  image: AssetImage('assets/logo.png'),
)

AssetImage parts

assets/ klasörü

Where images are stored
pubspec.yaml

The file where asset paths are declared
Image.asset

Shortcut constructor
hot restart

Required after asset changes

Next lesson: Image.network

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies