149 lines
2.9 KiB
Markdown
149 lines
2.9 KiB
Markdown
---
|
|
name: features-assets
|
|
description: 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`.
|
|
|
|
```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
|
|
|
|
```dart
|
|
// 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
|
|
|
|
```dart
|
|
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
|
|
|
|
```dart
|
|
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
|
|
|
|
```dart
|
|
// Using AssetImage
|
|
final imageProvider = AssetImage('assets/images/logo.png');
|
|
Image(image: imageProvider)
|
|
|
|
// Precache asset image
|
|
precacheImage(
|
|
AssetImage('assets/images/logo.png'),
|
|
context,
|
|
);
|
|
```
|
|
|
|
## Custom Fonts
|
|
|
|
```dart
|
|
Text(
|
|
'Custom Font',
|
|
style: TextStyle(
|
|
fontFamily: 'CustomFont',
|
|
fontSize: 24,
|
|
fontWeight: FontWeight.bold,
|
|
),
|
|
)
|
|
```
|
|
|
|
## Asset Bundle
|
|
|
|
Access assets programmatically.
|
|
|
|
```dart
|
|
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.
|
|
|
|
```dart
|
|
// 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
|
|
|
|
<!--
|
|
Source references:
|
|
- https://docs.flutter.dev/development/ui/assets-and-images
|
|
- https://docs.flutter.dev/development/ui/assets-and-images#bundling-of-assets
|
|
-->
|