Flutter开发实战总结(插件篇)

年初由于业务需要，转战Flutter，由于时间有限，基本处于边学边写的状态，也踩了不少坑。此处做下总结，主要是插件使用方面，后续会更新其他内容~

检测网络状态

flutter插件connectivity

import 'package:connectivity/connectivity.dart';

checkConnect() async {
    var connectivityResult = await (Connectivity().checkConnectivity());
    return connectivityResult != ConnectivityResult.none
}

// 实时监听
var subscription = Connectivity().onConnectivityChanged.listen((ConnectivityResult result) {
    print(result);
});

获取设备信息

flutter插件device_info获取设备平台以及设备唯一ID

import 'package:device_info/device_info.dart';

DeviceInfoPlugin deviceInfo = DeviceInfoPlugin();
if (Platform.isIOS) {
    // 获取iOS设备id
    IosDeviceInfo iosInfo = await deviceInfo.iosInfo;
    print(iosInfo.identifierForVendor);
} else if(Platform.isAndroid){
    // 获取android设备id
    AndroidDeviceInfo androidInfo = await deviceInfo.androidInfo;
    print(androidInfo.androidId);
}

全局数据共享Provide的使用

在pubspec.yaml文件引入

provider: ^3.1.0

定义好全局数据结构data.dart

class DataModel with ChangeNotifier {
  String get deviceId => _deviceId;

  // 设置全局设备id
  setDeviceId(id) {
    _deviceId = id;
    notifyListeners();
  }
}

在界面上读取对应的数据

Widget build(BuildContext context) {

    return WillPopScope(
    	// 阻止返回键
        onWillPop: () async {
          return false;
        },
        child: Scaffold(
          appBar: AppBar(
            title: Text('flutter', textScaleFactor: 1,),
            backgroundColor: Colors.black,
          ),
          body: Consumer<DataModel>(
            builder: (context, DataModel model, child) => Stack(
              children: <Widget>[
                // 读取Provide的全局数据
              	Text(model.deviceId)
              ]
            ),
          ),
        ));
        
  }

上面有一个知识点用WillPopScope包裹最外层，设置onWillPop为false可以禁止设备返回键，有些业务场景可以用到。

修改Provide的全局数据

dataModel = Provider.of<DataModel>(context);
dataModel.setDeviceId('007');

相机扫码功能的实现

flutter插件barcode_scan

import 'package:barcode_scan/barcode_scan.dart';

// 扫码
Future scan() async {

  var options = ScanOptions(
    strings: {
      "cancel": 'cancel',
      "flash_on": 'flash_on',
      "flash_off": 'flash_off',
    },
  );
  var result = await BarcodeScanner.scan(options: options);
  // 主动取消不做其他处理
  if(result.type == ResultType.Cancelled) {
    return;
  }
  String barcode = result.rawContent;
  print(barcode);
  
}

通过webview跳转到浏览器

flutter插件url_launcher

import 'package:url_launcher/url_launcher.dart';

Future<void> _launchInBrowser(String url) async {
  if (await canLaunch(url)) {
    await launch(
      url,
      forceSafariVC: false,
      forceWebView: false,
      headers: <String, String>{'my_header_key': 'my_header_value'},
    );
  } else {
    throw 'Could not launch $url';
  }
}

监听键盘事件

flutter插件flutter_keyboard_visibility

import 'package:flutter_keyboard_visibility/flutter_keyboard_visibility.dart';

// 键盘事件
KeyboardVisibility.onChange.listen((bool visible) {
  print('Keyboard visibility update. Is visible: ${visible}');
  setState(() {
    showKeyboard = visible;
  });
});

本地数据存储

flutter插件shared_preferences

// 设置本地数据
SharedPreferences prefs = await SharedPreferences.getInstance();
prefs.setString('account', account);

// 读取本地数据
String account = prefs.get('account');