Flutter Images Assets and Fonts

Pictures and typefaces give an app its personality. A banner image, a logo, and a custom font turn a plain screen into a branded experience. Flutter loads images from three places: files bundled inside the app, the internet, and the device storage. Each source has its own widget and its own rules.

Asset Images

Assets are files packed into the app at build time. They load instantly and work without an internet connection. Registration takes two steps: place the file in a folder, and list the folder in pubspec.yaml.

  my_app/
  ├── assets/
  │   └── images/
  │       ├── logo.png
  │       └── banner.jpg
  └── pubspec.yaml

flutter:
  assets:
    - assets/images/

A trailing slash registers every file in the folder. Indentation matters in this file, and a wrong number of spaces breaks the build.

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

Stop the app and run it again after you change the asset list. Hot reload does not pick up new asset entries.

Network Images

Use Image.network for pictures stored on a server. Flutter downloads the file and keeps it in a memory cache for the session.

Image.network(
  'https://example.com/photo.jpg',
  loadingBuilder: (context, child, progress) {
    if (progress == null) {
      return child;
    }
    return Center(child: CircularProgressIndicator());
  },
  errorBuilder: (context, error, stackTrace) {
    return Icon(Icons.broken_image);
  },
)

The loadingBuilder shows a spinner during download. The errorBuilder shows a fallback when the link fails. Network pictures fail in real life more often than developers expect, so always supply an error widget.

Fitting an Image into a Box

The fit property controls how a picture fills its space.

BoxFit Value	Behavior
cover	Fills the box and crops the extra
contain	Shows the whole picture with empty margins
fill	Stretches the picture and distorts it
fitWidth	Matches the box width
none	Keeps the original size

  cover               contain             fill
  ┌─────────┐         ┌─────────┐         ┌─────────┐
  │█████████│         │         │         │█████████│
  │█████████│         │ ███████ │         │█████████│
  │█████████│         │         │         │█████████│
  └─────────┘         └─────────┘         └─────────┘
  crops edges         margins appear      distorts shape

Choose cover for banners and avatars. Choose contain for product photos that need to stay complete.

Rounded Images

ClipRRect(
  borderRadius: BorderRadius.circular(16),
  child: Image.asset('assets/images/banner.jpg'),
)

CircleAvatar(
  radius: 40,
  backgroundImage: AssetImage('assets/images/logo.png'),
)

Different Screen Densities

Phones pack different numbers of pixels into the same physical space. Flutter picks the best file when you provide folders named for each density.

  assets/images/logo.png        ← 1x
  assets/images/2.0x/logo.png   ← 2x
  assets/images/3.0x/logo.png   ← 3x

Write the code once with the base name, and Flutter selects the matching file for the device.

Vector Graphics

SVG files stay sharp at every size and often weigh less than PNG files. The flutter_svg package displays them.

flutter pub add flutter_svg

SvgPicture.asset('assets/images/icon.svg', width: 48)

Built-In Icons

The Icons class holds hundreds of Material icons that need no files. Set the size and color properties to match your design.

Custom Fonts

A font file carries the shape of every letter. Download a font that permits free app use, place the file in a folder, and register it.

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

Apply the font to a single widget or the whole app:

Text('Welcome', style: TextStyle(fontFamily: 'Lora', fontSize: 24))

MaterialApp(
  theme: ThemeData(fontFamily: 'Lora'),
  home: HomeScreen(),
)

The google_fonts Package

This package downloads fonts from the Google Fonts library at runtime, which removes the manual file work. For production apps, bundle the font files inside the app for faster loading and offline use.

Licensing and Ownership

Every image and font has an owner. Use only files you created, bought with proper rights, or received under a license that allows your use. Free libraries publish their license terms, and some require credit to the author. Keep a note of the source and license for each file. Apps that use unlicensed material risk removal from app stores and legal trouble.

Keeping Apps Light

• Compress pictures before adding them. A 5 MB photo inside a thumbnail wastes memory.
• Prefer WebP or JPEG for photos and PNG or SVG for icons and logos.
• Set cacheWidth on large images shown at small sizes.
• Delete unused assets before release.

Practice Ideas

Build a profile card with a circular avatar, a banner, and a name in a custom font. Load the avatar from the network with a loading spinner and an error icon. Test the fallback by turning on airplane mode.