skills/flutter/references/features-assets.md

name	description
features-assets	Flutter assets and resources - asset management, pubspec.yaml, asset loading, and resource handling

Assets and Resources

Flutter provides ways to bundle and access assets in your app.

pubspec.yaml Configuration

Configure assets in pubspec.yaml.

flutter:
  assets:
    - assets/images/
    - assets/icons/
    - assets/data/config.json
    - assets/fonts/
  
  fonts:
    - family: CustomFont
      fonts:
        - asset: assets/fonts/CustomFont-Regular.ttf
        - asset: assets/fonts/CustomFont-Bold.ttf
          weight: 700

Loading Images

// Asset image
Image.asset('assets/images/logo.png')

// With package
Image.asset('assets/images/logo.png', package: 'my_package')

// With width and height
Image.asset(
  'assets/images/logo.png',
  width: 100,
  height: 100,
)

Loading Text Files

import 'package:flutter/services.dart';

Future<String> loadAsset() async {
  return await rootBundle.loadString('assets/data/config.json');
}

// Usage
final config = await loadAsset();
final jsonData = jsonDecode(config);

Loading Binary Files

import 'package:flutter/services.dart';

Future<ByteData> loadBinaryAsset() async {
  return await rootBundle.load('assets/data/file.bin');
}

// Usage
final data = await loadBinaryAsset();
final bytes = data.buffer.asUint8List();

Asset Images in Code

// Using AssetImage
final imageProvider = AssetImage('assets/images/logo.png');
Image(image: imageProvider)

// Precache asset image
precacheImage(
  AssetImage('assets/images/logo.png'),
  context,
);

Custom Fonts

Text(
  'Custom Font',
  style: TextStyle(
    fontFamily: 'CustomFont',
    fontSize: 24,
    fontWeight: FontWeight.bold,
  ),
)

Asset Bundle

Access assets programmatically.

import 'package:flutter/services.dart';

// Load string
final String data = await rootBundle.loadString('assets/data/file.txt');

// Load binary
final ByteData bytes = await rootBundle.load('assets/data/file.bin');

// Check if asset exists
final bool exists = await rootBundle.load('assets/data/file.txt') != null;

Asset Variants

Flutter automatically selects appropriate asset variants.

// Automatically selects based on device pixel ratio
Image.asset('assets/images/logo.png')
// Tries: logo.png, logo@2x.png, logo@3x.png

// For different locales
Image.asset('assets/images/flag.png')
// Tries: flag.png, flag_en.png, flag_zh.png

Key Points

• Configure assets in pubspec.yaml
• Use Image.asset() for images
• Use rootBundle.loadString() for text files
• Use rootBundle.load() for binary files
• Flutter automatically selects asset variants
• Use precacheImage() to preload images
• Assets are bundled with the app
• Use package parameter for package assets