fonts:
- family: Roboto
fonts:
- asset: assets/fonts/Roboto-Regular.ttf
- family: OpenSans
fonts:
- asset: assets/fonts/OpenSans-Bold.ttf
weight: 700 # 指定字体的粗细
**步骤 3: 运行 `flutter pub get`**
在终端中运行 `flutter pub get`,确保 Flutter 能够识别并打包这些资源。
**步骤 4: 在 Flutter 应用中使用资源**
```dart
import 'package:flutter/material.dart';
class AssetsExampleScreen extends StatelessWidget {
const AssetsExampleScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('资源管理示例'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
// 使用图片资源
Image.asset(
'assets/images/logo.png',
width: 150,
height: 150,
),
const SizedBox(height: 20),
// 使用背景图片
Container(
width: 300,
height: 200,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/images/background.jpg'),
fit: BoxFit.cover,
),
),
child: const Center(
child: Text(
'背景图片',
style: TextStyle(
color: Colors.white,
fontSize: 24,
fontWeight: FontWeight.bold,
),
),
),
),
const SizedBox(height: 20),
// 使用自定义字体
const Text(
'Hello, Roboto Font!',
style: TextStyle(
fontFamily: 'Roboto',
fontSize: 30,
color: Colors.blue,
),
),
const SizedBox(height: 10),
const Text(
'Hello, OpenSans Bold!',
style: TextStyle(
fontFamily: 'OpenSans',
fontWeight: FontWeight.bold, // 对应 pubspec.yaml 中设置的 weight
fontSize: 28,
color: Colors.purple,
),
),
],
),
),
);
}
}
void main() {
runApp(const MaterialApp(home: AssetsExampleScreen()));
}
案例分析:
assets: 部分:在 pubspec.yaml 中,我们通过 assets: 关键字声明了项目使用的图片资源。你可以声明单个文件(如 assets/images/logo.png),也可以声明整个目录(如 assets/images/),这样该目录下的所有文件都会被包含在应用包中。fonts: 部分:通过 fonts: 关键字声明了自定义字体。每个字体家族 (family) 可以包含多个字体文件 (asset),并可以指定字体的粗细 (weight) 和样式 (style)。Image.asset('assets/images/logo.png'):在 Flutter 代码中,使用 Image.asset Widget 来加载和显示声明在 pubspec.yaml 中的图片资源。路径必须与 pubspec.yaml 中声明的路径一致。AssetImage('assets/images/background.jpg'):当图片作为 DecorationImage 的一部分时,使用 AssetImage 来引用图片资源。TextStyle(fontFamily: 'Roboto'):在 Text Widget 的 style 属性中,通过 fontFamily 来指定使用自定义字体。如果字体有不同的粗细或样式,可以通过 fontWeight 和 fontStyle 来进一步指定。这个案例清晰地展示了 pubspec.yaml 在 Flutter 项目中的重要性,它不仅管理了外部依赖,还负责声明和打包项目所需的各种资源。正确配置 pubspec.yaml 是构建完整 Flutter 应用不可或缺的一部分。