Assets and Pub.dev Packages in Flutter

Assets are files that we bundle alongside our application to use at runtime.

In Flutter, we typically refer to images, icons, fonts, JSON files, or any static resource we want to include inside the App. They don’t come from the internet, they don’t depend on an API, and they don’t appear out of thin air: you have to declare them.

assets/
  images/
    logo.png
    avatar.png
  data/
    config.json

Declaring assets in pubspec.yaml

The pubspec.yaml file is where Flutter looks for project dependencies and resources. To add assets, we use the flutter section.

flutter:
  assets:
    - assets/images/logo.png
    - assets/images/avatar.png
    - assets/data/config.json

We can also declare an entire folder:

flutter:
  assets:
    - assets/images/

Using images in the interface

Once the image is declared, we can use it with Image.asset.

Image.asset(
  'assets/images/logo.png',
  width: 120,
)

This loads the image from the application package, without making any network requests.

If the image comes from the internet, then we use Image.network:

Image.network('https://example.com/avatar.png')

The difference is important. Image.asset is for local resources and Image.network is for remote resources.

Adding custom fonts

Fonts are also assets. First, we place them in a folder, for example:

assets/
  fonts/
    Montserrat-Regular.ttf
    Montserrat-Bold.ttf

Then we declare them in pubspec.yaml:

flutter:
  fonts:
    - family: Montserrat
      fonts:
        - asset: assets/fonts/Montserrat-Regular.ttf
        - asset: assets/fonts/Montserrat-Bold.ttf
          weight: 700

And now we can use them from the application theme:

MaterialApp(
  theme: ThemeData(
    fontFamily: 'Montserrat',
  ),
  home: const HomeScreen(),
)

The Pub.dev repository

Pub.dev is the official package repository for Dart and Flutter.

If you want to use HTTP, persistence, icons, maps, sensors, or almost any other function, it’s normal to look for a package there. Pub.dev displays the documentation, score, compatibility, and activity of the package.

Adding a package

The most convenient way is to use the terminal:

flutter pub add package_name

For example, to add http:

flutter pub add http

This modifies the pubspec.yaml and adds the dependency with a compatible version.

Then we import it in Dart:

import 'package:http/http.dart' as http;