Pre-caching in Flutter and Flutter Web

Pre-caching helps avoid jank, loading flashes, font swaps, and delayed first renders.

The key rule:

Pre-cache only what the user will likely see in the next 1 to 2 screens.

Do not pre-cache the whole app. That can slow startup and waste memory.

---

1. Google Fonts

Runtime Google Fonts preloading

Use GoogleFonts.pendingFonts() to load the font variants before showing text.

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

class ExampleSimple extends StatefulWidget {
  const ExampleSimple({super.key});

  @override
  State<ExampleSimple> createState() => _ExampleSimpleState();
}

class _ExampleSimpleState extends State<ExampleSimple> {
  late final Future<List<void>> googleFontsPending;

  @override
  void initState() {
    super.initState();

    googleFontsPending = GoogleFonts.pendingFonts([
      GoogleFonts.poppins(),
      GoogleFonts.montserrat(fontStyle: FontStyle.italic),
    ]);
  }

  @override
  Widget build(BuildContext context) {
    final pushButtonTextStyle = GoogleFonts.poppins(
      textStyle: Theme.of(context).textTheme.headlineMedium,
    );

    final counterTextStyle = GoogleFonts.montserrat(
      fontStyle: FontStyle.italic,
      textStyle: Theme.of(context).textTheme.displayLarge,
    );

    return FutureBuilder<List<void>>(
      future: googleFontsPending,
      builder: (context, snapshot) {
        if (snapshot.connectionState != ConnectionState.done) {
          return const SizedBox();
        }

        return Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'You have pushed the button this many times:',
              style: pushButtonTextStyle,
            ),
            Text(
              '0',
              style: counterTextStyle,
            ),
          ],
        );
      },
    );
  }
}

Production recommendation

For production and offline support, prefer bundling critical fonts as assets.

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

Use it in the app theme:

MaterialApp(
  theme: ThemeData(
    fontFamily: 'AppFont',
  ),
)

---

2. Asset images

Use precacheImage for images that appear soon.

@override
void didChangeDependencies() {
  super.didChangeDependencies();

  precacheImage(
    const AssetImage('assets/images/header.png'),
    context,
  );
}

Then use the image normally:

Image.asset('assets/images/header.png')

---

3. Network images

Use precacheImage with NetworkImage.

@override
void didChangeDependencies() {
  super.didChangeDependencies();

  precacheImage(
    const NetworkImage('https://example.com/image.png'),
    context,
  );
}

Then use it normally:

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

Important: precacheImage warms Flutter’s in-memory image cache. It does not provide long-term offline caching.

For disk caching, use a package like cached_network_image:

dependencies:
  cached_network_image: ^latest

Example:

CachedNetworkImage(
  imageUrl: 'https://example.com/image.png',
)

---

4. Multiple image preloading

@override
void didChangeDependencies() {
  super.didChangeDependencies();

  final images = <ImageProvider>[
    const AssetImage('assets/images/header.png'),
    const AssetImage('assets/images/avatar.png'),
    const NetworkImage('https://example.com/banner.png'),
  ];

  for (final image in images) {
    precacheImage(image, context);
  }
}

---

5. Waiting until images are ready

precacheImage returns a Future<void>, so you can wait before rendering the real UI.

late Future<void> _preloadImagesFuture;

@override
void didChangeDependencies() {
  super.didChangeDependencies();

  _preloadImagesFuture = Future.wait([
    precacheImage(
      const AssetImage('assets/images/header.png'),
      context,
    ),
    precacheImage(
      const NetworkImage('https://example.com/banner.png'),
      context,
    ),
  ]);
}

@override
Widget build(BuildContext context) {
  return FutureBuilder<void>(
    future: _preloadImagesFuture,
    builder: (context, snapshot) {
      if (snapshot.connectionState != ConnectionState.done) {
        return const CircularProgressIndicator();
      }

      return Column(
        children: [
          Image.asset('assets/images/header.png'),
          Image.network('https://example.com/banner.png'),
        ],
      );
    },
  );
}

[!NOTE] Use didChangeDependencies, not initState, when you need context for precacheImage.

---

6. What should normally be pre-cached on app start?

Good candidates:

• App logo
• First screen hero image
• First visible background image
• Current user avatar
• First visible card/list images
• Main font variants
• Small local config files
• Translations needed for first paint
• First API request
• Lottie/Rive animation shown immediately

Bad candidates:

• All product images
• All gallery images
• All remote feed images
• All icons in the app
• All route images
• Every image from every screen
• Large animations not shown immediately

---

7. Practical app-start preloader

class AppPreloader {
  const AppPreloader();

  Future<void> preload(BuildContext context) async {
    await Future.wait([
      _precacheImages(context),
      _loadCriticalAssets(),
      _warmUpInitialData(),
    ]);
  }

  Future<void> _precacheImages(BuildContext context) {
    return Future.wait([
      precacheImage(
        const AssetImage('assets/images/home_hero.png'),
        context,
      ),
      precacheImage(
        const AssetImage('assets/images/logo.png'),
        context,
      ),
    ]);
  }

  Future<void> _loadCriticalAssets() async {
    await rootBundle.loadString('assets/config/app_config.json');
  }

  Future<void> _warmUpInitialData() async {
    // Example:
    // await userRepository.getCurrentUser();
  }
}

Usage:

late Future<void> _preloadFuture;

@override
void didChangeDependencies() {
  super.didChangeDependencies();

  _preloadFuture = const AppPreloader().preload(context);
}

With FutureBuilder:

@override
Widget build(BuildContext context) {
  return FutureBuilder<void>(
    future: _preloadFuture,
    builder: (context, snapshot) {
      if (snapshot.connectionState != ConnectionState.done) {
        return const SplashScreen();
      }

      return const HomeScreen();
    },
  );
}

---

8. Local JSON / config preloading

Useful for feature flags, local app config, mock data, translations, or onboarding content.

import 'package:flutter/services.dart';

final configJson = await rootBundle.loadString(
  'assets/config/app_config.json',
);

Example:

class AppConfigLoader {
  Future<String> load() {
    return rootBundle.loadString('assets/config/app_config.json');
  }
}

---

9. Initial API request warm-up

This is not pre-caching in the Flutter image-cache sense, but it is often the most useful startup optimization.

final userFuture = userRepository.getCurrentUser();
final dashboardFuture = dashboardRepository.getDashboard();

Example:

class StartupData {
  const StartupData({
    required this.user,
    required this.dashboard,
  });

  final User user;
  final Dashboard dashboard;
}

Future<StartupData> loadStartupData() async {
  final results = await Future.wait([
    userRepository.getCurrentUser(),
    dashboardRepository.getDashboard(),
  ]);

  return StartupData(
    user: results[0] as User,
    dashboard: results[1] as Dashboard,
  );
}

---

10. Lottie preloading

If the animation appears immediately, preload it.

final composition = await AssetLottie(
  'assets/animations/success.json',
).load();

Use this only for animations shown early. Avoid preloading many large animations on app start.

---

11. Rive preloading

Rather than triggering the asset load during a build (which causes jank), preload the RiveFile byte data in advance:

import 'package:flutter/services.dart';
import 'package:rive/rive.dart';

// Preload the RiveFile
final data = await rootBundle.load('assets/animations/character.riv');
final riveFile = RiveFile.import(data);

// Display using direct constructor to avoid initialization delays:
RiveAnimation.direct(riveFile);

This ensures that the animation renders immediately upon widget mount.

---

12. Shader warm-up

Most apps do not need this. It can help if you have:

• Heavy custom painting
• Complex transitions
• Known animation jank
• Older rendering paths

Basic shape:

class CustomShaderWarmUp extends ShaderWarmUp {
  @override
  void warmUpOnCanvas(Canvas canvas) {
    final paint = Paint();

    canvas.drawRect(
      const Rect.fromLTWH(0, 0, 100, 100),
      paint,
    );
  }
}

Then set it before runApp:

void main() {
  PaintingBinding.instance.shaderWarmUp = CustomShaderWarmUp();

  runApp(const MyApp());
}

Use this only when profiling shows shader compilation jank.

---

13. Flutter Web: different mindset

On Flutter Web, think less:

• Pre-cache everything in memory

Think more:

• Make the browser download key files early
• Warm Flutter cache only for first-screen assets
• Avoid surprise font fallback downloads
• Avoid loading huge assets before first paint

---

14. Flutter Web image preload

For critical first-screen images, use both browser preload and Flutter precacheImage.

In web/index.html:

<link
  rel="preload"
  href="assets/assets/images/home_hero.png"
  as="image"
>

In Flutter:

await precacheImage(
  const AssetImage('assets/images/home_hero.png'),
  context,
);

Why both?

• HTML preload starts the browser download earlier.
• precacheImage warms Flutter's image cache.

---

15. Flutter Web network image preload

In web/index.html:

<link
  rel="preload"
  href="https://example.com/banner.png"
  as="image"
>

In Flutter:

await precacheImage(
  const NetworkImage('https://example.com/banner.png'),
  context,
);

Only do this for images the user is almost guaranteed to see.

---

16. Flutter Web font preload

Declare the font in pubspec.yaml:

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

Preload the critical font in web/index.html:

<link
  rel="preload"
  href="assets/assets/fonts/AppFont-Regular.ttf"
  as="font"
  type="font/ttf"
  crossorigin
>

Use it in Flutter:

ThemeData(
  fontFamily: 'AppFont',
)

Usually preload:

• Regular
• Bold
• Maybe medium

Avoid preloading every weight and italic variant unless the first screen needs them.

---

17. Flutter Web and emojis

Emojis can trigger font fallback work.

Example:

Text('Welcome 👋 🎉')

On web, this can cause:

• Extra font download
• Delayed render
• Fallback font swap
• Blank boxes
• Different emoji style across platforms

---

18. Option 1: avoid emojis on first paint

Simple and effective:

Text('Welcome')

Then show emojis after the app has loaded:

Text('Welcome 👋')

This is often the best option if emojis are decorative.

---

19. Option 2: bundle and preload an emoji font

Add the font to pubspec.yaml:

flutter:
  fonts:
    - family: NotoColorEmoji
      fonts:
        - asset: assets/fonts/NotoColorEmoji.ttf

Preload it in web/index.html:

<link
  rel="preload"
  href="assets/assets/fonts/NotoColorEmoji.ttf"
  as="font"
  type="font/ttf"
  crossorigin
>

Use it where needed:

const Text(
  '👋 🎉 ❤️',
  style: TextStyle(
    fontFamily: 'NotoColorEmoji',
  ),
)

Important:

• Emoji fonts can be large.
• Do not bundle a huge emoji font unless emojis are important to your product.

---

20. When emoji preloading makes sense

Good cases:

• Chat app
• Reactions
• Comments
• Social UI
• Emoji picker
• Emoji-heavy onboarding
• Brand uses emoji heavily

Bad cases:

• One decorative emoji on the welcome screen
• Random emoji in a button
• Rare emoji usage deep in the app

Rule:

• If emojis are decorative, delay them or remove them from first paint.
• If emojis are core to the product, use a known emoji rendering strategy.

---

21. Flutter Web renderer files

Flutter Web startup can also include renderer assets, for example CanvasKit or Skwasm files.

Usually, you do not preload these from Dart. You configure the renderer through Flutter Web initialization.

Example in web bootstrap:

_flutter.loader.load({
  config: {
    renderer: 'canvaskit',
  },
});

Other configs can include things like:

_flutter.loader.load({
  config: {
    renderer: 'canvaskit',
    canvasKitBaseUrl: '/canvaskit/',
  },
});

Most apps should let Flutter manage this unless there is a clear hosting or performance reason to change it.

---

22. Practical Flutter Web startup list

Usually preload:

• App font regular/bold
• Logo
• First hero image
• First visible background image
• Critical above-the-fold asset images
• Emoji font only if emojis are core to first paint
• Small config needed immediately

Usually avoid:

• All emoji fonts
• All product images
• All route images
• All remote avatars
• Large Lottie/Rive files not shown immediately
• Every font weight
• Every image in assets

---

23. Suggested folder structure

assets/
  images/
    logo.png
    home_hero.png
    onboarding_hero.png

  fonts/
    AppFont-Regular.ttf
    AppFont-Bold.ttf
    NotoColorEmoji.ttf

  config/
    app_config.json

  animations/
    success.json
    character.riv

---

24. Example pubspec.yaml

flutter:
  assets:
    - assets/images/
    - assets/config/
    - assets/animations/

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

    - family: NotoColorEmoji
      fonts:
        - asset: assets/fonts/NotoColorEmoji.ttf

---

25. Example web/index.html preload block

<!-- App fonts -->
<link
  rel="preload"
  href="assets/assets/fonts/AppFont-Regular.ttf"
  as="font"
  type="font/ttf"
  crossorigin
>

<link
  rel="preload"
  href="assets/assets/fonts/AppFont-Bold.ttf"
  as="font"
  type="font/ttf"
  crossorigin
>

<!-- Only if emojis are critical to first paint -->
<link
  rel="preload"
  href="assets/assets/fonts/NotoColorEmoji.ttf"
  as="font"
  type="font/ttf"
  crossorigin
>

<!-- Critical images -->
<link
  rel="preload"
  href="assets/assets/images/logo.png"
  as="image"
>

<link
  rel="preload"
  href="assets/assets/images/home_hero.png"
  as="image"
>

[!NOTE] Flutter web asset URLs often include assets/assets/... because Flutter serves declared assets under the assets/ path, while your asset path also starts with assets/.

For example:

• Flutter asset: assets/images/logo.png
• Web URL: assets/assets/images/logo.png

---

26. Complete startup example

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:google_fonts/google_fonts.dart';

class AppStartupPreloader {
  const AppStartupPreloader();

  Future<void> preload(BuildContext context) async {
    await Future.wait([
      _preloadFonts(),
      _preloadImages(context),
      _preloadLocalConfig(),
      _preloadStartupData(),
    ]);
  }

  Future<void> _preloadFonts() {
    return GoogleFonts.pendingFonts([
      GoogleFonts.inter(),
      GoogleFonts.inter(fontWeight: FontWeight.w700),
    ]);
  }

  Future<void> _preloadImages(BuildContext context) {
    return Future.wait([
      precacheImage(
        const AssetImage('assets/images/logo.png'),
        context,
      ),
      precacheImage(
        const AssetImage('assets/images/home_hero.png'),
        context,
      ),
    ]);
  }

  Future<void> _preloadLocalConfig() async {
    await rootBundle.loadString('assets/config/app_config.json');
  }

  Future<void> _preloadStartupData() async {
    // Start your critical first API calls here.
    //
    // Example:
    // await userRepository.getCurrentUser();
    // await dashboardRepository.getDashboard();
  }
}

Usage:

class StartupGate extends StatefulWidget {
  const StartupGate({super.key});

  @override
  State<StartupGate> createState() => _StartupGateState();
}

class _StartupGateState extends State<StartupGate> {
  Future<void>? _startupFuture;

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();

    _startupFuture ??= const AppStartupPreloader().preload(context);
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<void>(
      future: _startupFuture,
      builder: (context, snapshot) {
        if (snapshot.connectionState != ConnectionState.done) {
          return const SplashScreen();
        }

        return const HomeScreen();
      },
    );
  }
}

---

27. Final rule of thumb

Pre-cache this:

• What the user sees immediately.
• What the user will almost certainly see next.
• What would cause visible jank if it loads late.

Do not pre-cache this:

• Everything.
• Large files that may never be used.
• Remote images far below the fold.
• Decorative emoji/font assets that are not critical.

For Flutter Web specifically:

• Use HTML preload for critical browser downloads.
• Use Flutter precacheImage for Flutter image cache.
• Bundle critical fonts.
• Avoid emoji font fallback on first paint.
• Delay decorative emojis.

---

References

• Flutter API: precacheImage
• Flutter Web: Bootstrapping & Initialization
• Flutter Web: WebAssembly (Wasm) Compilation
• Flutter Performance: Shader Compilation Jank
• Flutter API: ShaderWarmUp Class
• MDN Web Docs: Preloading content with rel="preload"
• pub.dev: google_fonts Package
• pub.dev: lottie Package
• pub.dev: rive Package