1、assets概念
2、指定assets
flutter:
assets:
- assets/bg1.png
- assets/touxiang.jpg

3、assets变体

- 这样引入,那这两个文件都会被包含在assets bundle中。在assets目录下的被认为是 _main asset _(主资源),在pc目录下的被认为是一种变体(variant)。
4、文本的加载
4.1 通过rootBundle对象
import 'dart:async' show Future;
import 'package:flutter/services.dart' show rootBundle;
Future<String> loadAsset() async {
return await rootBundle.loadString("assets/config.json");
}
4.2 通过DefaltAssetBundle
flutter:
uses-material-design: true
assets:
- assets/text/sample.txt
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() async {
WidgetsFlutterBinding.ensureInitialized();
final String data = await rootBundle.loadString('assets/sample.txt');
runApp(MyApp(sampleText: data));
}
5、图片的加载
5.1 声明分辨率相关的图片
- …/image.png
- …/2.0x/image.png
- …/3.0x/image.png
5.2 加载图片
5.2.1 AssetImage
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: Text(widget.title),
),
body: const Stack(
children: [
Positioned.fill(
child: DecoratedBox(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/imgs/bg1.png"),
fit: BoxFit.cover,
),
),
),
),
],
),
);
}
}
- stack:允许在同一个空间内重叠多个子widget;
- Positioned.fill:确保widget填充整个可用空间;
- DecoratedBox:修饰其子widget;
- DecorationImage:DecoratedBox的一部分用来装饰图像;
- AssetImage:从应用资产中加载;
- BoxFit.cover:表示图像被拉伸用来填充整个装饰区域。
5.2.2 AssetImage
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: Text(widget.title),
),
body: const Stack(
children: [
Image.asset(
"assets/imgs/bg1.png",
fit: BoxFit.cover,
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
),
],
),
);
}
}
5.3 加载依赖包中的资源图片
加载图像代码:
- AssetImage(“touxiang/touxiang.png”, package: “touxiang”)
加载图像代码:
- AssetImage(“touxiang/touxiang.png”, package: “touxiang”)
- Image.asset(“touxiang/touxiang.png”, package: “touxiang”)