Images, icons, fonts and themes

Asset images

An asset is a file bundled inside your app: images, icons, fonts, JSON data. Put images in a folder like assets/images/ and declare the folder in pubspec.yaml. Flutter only bundles assets you declare.

flutter:
  uses-material-design: true
  assets:
    - assets/images/
  fonts:
    - family: Poppins
      fonts:
        - asset: assets/fonts/Poppins-Regular.ttf
        - asset: assets/fonts/Poppins-Bold.ttf
          weight: 700

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

Network images

Image.network(
  'https://example.com/products/42.jpg',
  height: 160,
  fit: BoxFit.cover,
  loadingBuilder: (context, child, progress) =>
      progress == null ? child : const Center(child: CircularProgressIndicator()),
  errorBuilder: (context, error, stack) => const Icon(Icons.broken_image, size: 48),
)

BoxFit decides how an image fills its box: cover fills and crops, contain shows the whole image with possible empty space, fill stretches (usually ugly). Large photos waste memory on small widgets; cacheWidth/cacheHeight (or resizing on the server) help (module 9).

Product photos usually come from a server, so most shopping and food apps use network images for content and asset images only for logos, illustrations and empty-state pictures.

Icons

Material icons are built in: Icon(Icons.shopping_cart), Icon(Icons.home, size: 28, color: Colors.teal). Cupertino (iOS-style) icons come from the cupertino_icons package. For custom icons, use SVGs with a package like flutter_svg, or an icon font.

Images often come in different resolutions for different screens. Flutter supports variants in folders such as assets/images/2.0x/logo.png and 3.0x/logo.png; Image.asset picks the best one for the device. For simple logos and icons, SVG files (with the flutter_svg package) stay sharp at every size.

For accessibility, give meaningful images a semanticLabel (for example Image.asset(..., semanticLabel: 'Shop logo')) so screen readers can describe them. Purely decorative images can be excluded from semantics.

Themes

A theme defines colours, text styles and component styles for the whole app in one place. Material 3 is the default design in current Flutter. ColorScheme.fromSeed generates a full, accessible colour scheme from one brand colour.

MaterialApp(
  theme: ThemeData(
    colorScheme: ColorScheme.fromSeed(seedColor: const Color(0xFF00695C)),
    fontFamily: 'Poppins',
  ),
  darkTheme: ThemeData(
    colorScheme: ColorScheme.fromSeed(seedColor: const Color(0xFF00695C), brightness: Brightness.dark),
    fontFamily: 'Poppins',
  ),
  themeMode: ThemeMode.system,          // follow the phone's light/dark setting
  home: const HomePage(),
)

final theme = Theme.of(context);
Text('Today\'s offers', style: theme.textTheme.titleLarge);
Container(color: theme.colorScheme.primaryContainer);

Common mistakes

• "Unable to load asset": the asset is not declared in pubspec.yaml, the path or case is wrong, or you hot reloaded instead of restarting.
• Image.network without errorBuilder: a broken image icon or exception on slow networks.
• Hard-coded Colors.blue everywhere: dark mode and rebranding break.
• Huge images (4000 x 3000) shown in 100-pixel thumbnails: memory and jank.