Flutter(8)-项目中公共的一些东西

本篇主要介绍一下，在真正的项目开发中，需要使用到的一些内容。

• 加载本地图片
• 加载网络图片
• 简单数据持久化
• 获取当前设备的信息

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，欢迎一起交流!