本篇主要介绍一下,在真正的项目开发中,需要使用到的一些内容。
- 加载本地图片
- 加载网络图片
- 简单数据持久化
- 获取当前设备的信息
1.加载本地图片
就是图中所示,要适配完美点的话,就放置1x、2x、3x的图片都放置的有,并且对应的文件夹要对,Flutter会根据手机分辨率选择适合的图,然后在
yaml
文件中放开asset
,加入对应的图片文件夹目录,如下图所示:在代码中就可以这样使用了:
Image(image: AssetImage('images/box001.png')),
2.加载网络图片
网络图片的加载这里给出3种示例:
Image.network('http://cache.fotoplace.cc/ap2/190521/0/6478737E09CA39170389191133953111.png'),
FadeInImage.memoryNetwork(
placeholder: kTransparentImage,
image: 'http://cache.fotoplace.cc/ap2/190521/0/6478737E09CA39170389191133953111.png',
),
CachedNetworkImage(
imageUrl: "http://cache.fotoplace.cc/ap2/190521/0/6478737E09CA39170389191133953111.png",
placeholder: (context, url) => CircularProgressIndicator(),
errorWidget: (context, url, error) => Icon(Icons.error),
),
Image.network
是系统提供的最基本的网络图片加载
FadeInImage.memoryNetwork
是系统提供的可以淡入淡出效果的加载网络图片
CachedNetworkImage
是一个比较流行的Flutter中可以缓存图片到本地的网络图片加载开源部件
3.简单数据持久化
在Flutter中有一个和iOS的UserDefaults功能一样的东西,那就是shared_preferences
,同时支持Android和ios平台:
save() async{
SharedPreferences prefs = await SharedPreferences.getInstance();
prefs.setString('userName', '阿狸');
}
Future<String> get() async {
var userName;
SharedPreferences prefs = await SharedPreferences.getInstance();
userName = prefs.getString('userName');
return userName;
}
RaisedButton(
color: Colors.blueAccent,
child: Text("存储"),
onPressed: () {
save();
Scaffold.of(context).showSnackBar(
new SnackBar(content: Text("数据存储成功")));
}),
RaisedButton(
color: Colors.blueAccent,
child: Text("读取"),
onPressed: () {
Future<String> userName = get();
userName.then((String userName) {
Scaffold.of(context).showSnackBar(
SnackBar(content: Text("数据获取成功:$userName")));
});
}),
执行看一下效果:
在开发的过程中,我们可以用来存储一些用户的主要常用信息,还是很方便的。
4.获取当前设备的信息
-
device_info
: 获取设备信息
void _getDeviceInfo() async{
DeviceInfoPlugin deviceInfo = new DeviceInfoPlugin();
if(Platform.isIOS){
IosDeviceInfo iosInfo = await deviceInfo.iosInfo;
debugPrint('IOS设备:' + iosInfo.systemName + '>' + iosInfo.systemVersion + '>' + iosInfo.model);
}else if(Platform.isAndroid){
AndroidDeviceInfo androidInfo = await deviceInfo.androidInfo;
print('Android设备' + androidInfo.bootloader + androidInfo.model);
}
}
-
package_info
: 获取App信息
PackageInfo packageInfo = await PackageInfo.fromPlatform();
String appName = packageInfo.appName;
String packageName = packageInfo.packageName;
String appVersion = packageInfo.version;
String appBuildNumber = packageInfo.buildNumber;
获取屏幕宽高(据说第二种在release模式下有返回宽高为0的情况,所以还是第一种靠谱点):
第一种:
final size =MediaQuery.of(context).size;
final width =size.width;
final height =size.height;
第二种:
import 'dart:ui';
final width = window.physicalSize.width;
final height = window.physicalSize.height;
文中所有的代码都可以在Github:BoxJ/Flutter-daydayup中下载,本篇代码的文件夹是boxdemo_008
,欢迎一起交流!