Flutter6.加载图片,资源assets、pubspec、 图片
程序员文章站
2022-05-30 09:22:08
...
快捷键的使用
stf StatefulWidget的快捷键 stl StatelessWidget的快捷键
需要加载本地的图片首先需要找到pubspec.yaml 文件项目的静态资源,需要配置到根目录下的pubspec.yaml文件。
以静态图片为例子:
1、在项目的根目录下创建images文件夹,放进一张图片。
2、到 pubspec.yaml 配置一下
assets:
- assets/images/bg1.png
# To add assets to your application, add an assets section, like this:
# assets:
# - images/a_dot_burr.jpeg
# - images/a_dot_ham.jpeg
main.dart
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'dart:typed_data';
import 'package:flutter/services.dart';
import 'package:image_picker/image_picker.dart';
void main() => runApp(MyApp());
//assets/images/bg1.png
class MyApp extends StatelessWidget {
// debugPaintSizeEnable = true;
@override
Widget build(BuildContext context) {
// debugPaintSizeEnabled = true;
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Image示例demo'),
),
body: Center(
child: Column(
children: <Widget>[
//加载网络图片
Image.network(
'https://www.baidu.com/img/bd_logo1.png?where=super',
width: 100.0,
height: 100.0,
),
//加载Assets/images目录下的图片
Image.asset(
'assets/images/bg1.png',
width: 200.0,
height: 200.0,
),
//Memory
MemoryImageWidget(),
//从文件加载图片
FileImageWidget(),
],
),
),
),
);
}
}
//stf StatefulWidget的快捷键 stl StatelessWidget的快捷键
class FileImageWidget extends StatefulWidget {
@override
_FileImageWidgetState createState() => _FileImageWidgetState();
}
class _FileImageWidgetState extends State<FileImageWidget> {
File _image;
Future getImge() async {
var image = await ImagePicker.pickImage(source: ImageSource.gallery);
setState(() {
_image = image;
});
}
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Center(
child: _image == null
? Text('未选择图片!')
: Image.file(
_image,
width: 200.0,
height: 200.0,
),
),
FlatButton(
onPressed: getImge,
child: Text(
'选择图片',
style: TextStyle(
color: Color(0xff0000ff),
),
),
),
],
);
}
}
//stf StatefulWidget快捷键, stl StatelessWidget快捷键
class MemoryImageWidget extends StatefulWidget {
@override
_MemoryImageWidgetState createState() => _MemoryImageWidgetState();
}
class _MemoryImageWidgetState extends State<MemoryImageWidget> {
Uint8List bytes;
@override
void initState() {
super.initState();
rootBundle.load('assets/images/bg1.png').then((data) {
if (mounted) {
setState(() {
//data中取数据
bytes = data.buffer.asUint8List();
});
}
});
}
@override
Widget build(BuildContext context) {
final _decoration = BoxDecoration(
//判断图片是否是空
image: bytes == null ? null : DecorationImage(image: MemoryImage(bytes)),
);
return Container(
width: 100.0,
height: 100.0,
decoration: _decoration,
);
}
}
输出:
其中需要导入image_picker.dart,需要在pubspec.yaml中配置如下:
dependencies:
flutter:
sdk: flutter
# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^0.1.3
image_picker: ^0.5.0+9
dev_dependencies:
flutter_test:
sdk: flutter
上一篇: Dart笔记
下一篇: MATLAB灰度变换
推荐阅读
-
IOS中Weex 加载 .xcassets 中的图片资源的实例详解
-
android读取Assets图片资源保存到SD卡实例
-
android读取Assets图片资源保存到SD卡实例
-
https加载http资源,导致ios手机上的浏览器图片加载问题
-
CocosCreator3D微信小游戏入门RunningBall(四):音效、远程加载图片资源
-
WEEX-EEUI 关于eeui TabBar 在release包下使用assets图片资源无法显示问题
-
Flutter6.加载图片,资源assets、pubspec、 图片
-
electron-vue中加载render文件夹下的图片资源在开发环境下加载失败解决方案(亲测有效!!!)
-
qml加载图片资源的四种方式
-
小程序加载器的实现:按需预加载远程图片资源