Flutter 有了谷歌強(qiáng)大后盾加持庄萎，加上跨平臺(tái)的特性，生態(tài)日益豐富淑掌，目前大部分應(yīng)用能夠用到的插件在 pub.flutter-io.cn上都可以找得到榆芦。本篇介紹 Flutter 最為常見的插件谭溉，以避免重復(fù)造輪子和新手少走彎路捕仔。
Dio 網(wǎng)絡(luò)請(qǐng)求框架
提起 Flutter 的網(wǎng)絡(luò)框架匕积，就不得不提 Dio盈罐！Dio作為一個(gè)網(wǎng)絡(luò)框架實(shí)現(xiàn)了全部的網(wǎng)絡(luò)請(qǐng)求，包括 GET闪唆、POST盅粪、PUT、PATCH苞氮、DELETE等，同時(shí)還支持?jǐn)r截器瓤逼，錯(cuò)誤捕獲和文件下載笼吟。借助 Dio，可以快速完成 Flutter App 與后端的數(shù)據(jù)交互霸旗。示例代碼如下
Response response;
var dio = Dio();
response = await dio.get('/test?id=12&name=wendu');
print(response.data.toString());
// Optionally the request above could also be done as
response = await dio.get('/test', queryParameters: {'id': 12, 'name': 'wendu'});
print(response.data.toString());
二維碼生成qr_flutter
/*
* QR.Flutter
* Copyright (c) 2019 the QR.Flutter authors.
* See LICENSE for distribution and usage details.
*/
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'main_screen.dart';
void main() => runApp(ExampleApp());
/// The example application class
class ExampleApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarColor: Colors.white,
statusBarIconBrightness: Brightness.dark,
systemNavigationBarColor: Colors.white,
systemNavigationBarIconBrightness: Brightness.dark,
));
return MaterialApp(
title: 'QR.Flutter',
theme: ThemeData.light(),
debugShowCheckedModeBanner: false,
home: MainScreen(),
);
}
}
url_launcher系統(tǒng)應(yīng)用跳轉(zhuǎn)
在 App 中不可避免會(huì)使用url 跳轉(zhuǎn)到系統(tǒng)瀏覽器或其他應(yīng)用贷帮，這時(shí)候 url_launcher 就派上用場(chǎng)了， 用法十分簡(jiǎn)單：
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';
const _url = 'https://flutter.cn';
void main() => runApp(
const MaterialApp(
home: Material(
child: Center(
child: RaisedButton(
onPressed: _launchURL,
child: Text('Show Flutter homepage'),
),
),
),
),
);
void _launchURL() async =>
await canLaunch(_url) ? await launch(_url) : throw 'Could not launch $_url';
url_launcher支持跳轉(zhuǎn)到系統(tǒng)的瀏覽器打開網(wǎng)頁诱告，跳轉(zhuǎn)撥打電話和發(fā)送短信界面撵枢，在 pub 上流行度為100%，項(xiàng)目地址為：https://pub.flutter-io.cn/packages/url_launcher
工具庫(kù) common_utils 精居，flustars
如果您是純Dart項(xiàng)目锄禽，可以直接引用本庫(kù)，如果您是Flutter項(xiàng)目靴姿，請(qǐng)使用Flutter常用工具類庫(kù) flustars沃但，該庫(kù)依賴于本項(xiàng)目。flustars庫(kù)為大家提供更多的工具類佛吓，例如SpUtil宵晚，ScreenUtil, DirectoryUtil等等
Dart常用工具類庫(kù) common_utils
- TimelineUtil : 時(shí)間軸.
- TimerUtil : 倒計(jì)時(shí)，定時(shí)任務(wù).
- MoneyUtil : 精確轉(zhuǎn)換维雇，元轉(zhuǎn)分淤刃，分轉(zhuǎn)元，支持格式輸出.
- LogUtil : 簡(jiǎn)單封裝打印日志.
- DateUtil : 日期轉(zhuǎn)換格式化輸出.
- RegexUtil : 正則驗(yàn)證手機(jī)號(hào)吱型，身份證逸贾，郵箱等等.
- NumUtil : 保留x位小數(shù), 精確加、減津滞、乘耕陷、除, 防止精度丟失.
- ObjectUtil : 判斷對(duì)象是否為空(String List Map),判斷兩個(gè)List是否相等.
- EncryptUtil : 異或?qū)ΨQ加/解密，md5加密据沈，Base64加/解密.
- TextUtil : 銀行卡號(hào)每隔4位加空格哟沫，每隔3三位加逗號(hào)，隱藏手機(jī)號(hào)等等.
- JsonUtil : 簡(jiǎn)單封裝json字符串轉(zhuǎn)對(duì)象.
Flutter常用工具類庫(kù) flustars
- SpUtil : 單例"同步"SharedPreferences工具類锌介。支持get傳入默認(rèn)值嗜诀，支持存儲(chǔ)對(duì)象猾警，支持存儲(chǔ)對(duì)象數(shù)組。
- ScreenUtil : 屏幕適配隆敢，獲取屏幕寬发皿、高、密度拂蝎，AppBar高穴墅，狀態(tài)欄高度，屏幕方向.
- WidgetUtil : 監(jiān)聽Widget渲染狀態(tài)温自，獲取Widget寬高玄货，在屏幕上的坐標(biāo)，獲取網(wǎng)絡(luò)/本地圖片尺寸.
- ImageUtil : 獲取網(wǎng)絡(luò)/本地圖片尺寸.
- DirectoryUtil : 文件目錄工具類.
- DioUtil : 單例Dio網(wǎng)絡(luò)工具類(已遷移至此處DioUtil)悼泌。
項(xiàng)目地址：https://pub.dev/packages/common_utils
flutter_easyrefresh上下拉刷新
flutter 中上下拉加載數(shù)據(jù)的不二之選松捉，也是國(guó)人開發(fā)的，支持在大部分組件上套用實(shí)現(xiàn)上拉加載或下拉刷新馆里。使用方法也是很簡(jiǎn)單隘世，同時(shí)也支持自定義 header 和 footer。用法如下:
import 'package:flutter_easyrefresh/easy_refresh.dart';
//...
EasyRefresh(
child: ScrollView(),
onRefresh: () async{
....
},
onLoad: () async {
....
},
)
flutter_easyrefresh 在 pub 上的流行度為95%鸠踪，項(xiàng)目地址為：https://pub.flutter-io.cn/packages/flutter_easyrefresh
flutter_swiper 輪播組件
flutter_swiper 是一個(gè)輪播組件丙者，號(hào)稱是 flutter 最佳的輪播組件。flutter_swiper 支持自動(dòng)輪播营密，顯示頁面指示蔓钟，動(dòng)畫時(shí)長(zhǎng)，點(diǎn)擊回調(diào)等多種參數(shù)設(shè)置：使用方式如下：
new Swiper(
itemBuilder: (BuildContext context, int index) {
return new Image.network(
"http://via.placeholder.com/288x188",
fit: BoxFit.fill,
);
},
itemCount: 10,
viewportFraction: 0.8,
scale: 0.9,
)
flutter_swiper 的流行度達(dá)到了99%卵贱，項(xiàng)目地址為：https://pub.flutter-io.cn/packages/flutter_swiper
cached_network_image 網(wǎng)絡(luò)圖片加載緩存
cached_network_image 有點(diǎn)類似iOS的 SDWebImage滥沫，可以緩存已經(jīng)加載過的圖片而無需重復(fù)下載，既提高了加載速度也節(jié)省了網(wǎng)絡(luò)資源請(qǐng)求键俱。同時(shí) cached_network_image 支持占位圖兰绣、加載進(jìn)度和請(qǐng)求失敗的占位組件，可以做到很好的用戶體驗(yàn)编振。
CachedNetworkImage(
imageUrl: "http://via.placeholder.com/350x150",
placeholder: (context, url) => CircularProgressIndicator(),
errorWidget: (context, url, error) => Icon(Icons.error),
),
//......
cached_network_image 流行度達(dá)到了99%缀辩，項(xiàng)目地址為：https://pub.flutter-io.cn/packages/cached_network_image
shared_preferences 本地離線鍵值對(duì)緩存
shared_preferences類似iOS的 NSUserDefaults和安卓的 SharedPreferences，支持App簡(jiǎn)單的鍵值對(duì)離線緩存踪央，對(duì)于離線存儲(chǔ)簡(jiǎn)單的數(shù)據(jù)十分適用臀玄。但是需要注意的是插件的離線寫入操作是異步的，因此并不能保證寫入返回后100%存儲(chǔ)成功畅蹂，因此對(duì)于十分關(guān)鍵的數(shù)據(jù)不建議使用.使用方式如下：
import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
void main() {
runApp(MaterialApp(
home: Scaffold(
body: Center(
child: RaisedButton(
onPressed: _incrementCounter,
child: Text('Increment Counter'),
),
),
),
));
}
_incrementCounter() async {
SharedPreferences prefs = await SharedPreferences.getInstance();
int counter = (prefs.getInt('counter') ?? 0) + 1;
print('Pressed $counter times.');
await prefs.setInt('counter', counter);
}
shared_preferences的流行度為100%健无，項(xiàng)目地址為：https://pub.flutter-io.cn/packages/shared_preferences
image_picker 和 multi_image_pikcer 圖片選擇器
image_picker 和 multi_image_picker 為圖片選擇器，前者支持單張圖片選擇液斜，后者支持多圖選擇累贤，二者均支持相機(jī)或從相冊(cè)選擇圖片叠穆。需要注意的是 multi_image_picker 默認(rèn)語言是英文的，需要自己配置本地語言臼膏。使用方法如下：
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
//......
class _MyHomePageState extends State<MyHomePage> {
File _image;
final picker = ImagePicker();
Future getImage() async {
final pickedFile = await picker.getImage(source: ImageSource.camera);
setState(() {
if (pickedFile != null) {
_image = File(pickedFile.path);
} else {
print('No image selected.');
}
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Image Picker Example'),
),
body: Center(
child: _image == null
? Text('No image selected.')
: Image.file(_image),
),
floatingActionButton: FloatingActionButton(
onPressed: getImage,
tooltip: 'Pick Image',
child: Icon(Icons.add_a_photo),
),
);
}
}
image_picker 項(xiàng)目地址為：https://pub.flutter-io.cn/packages/image_picker硼被，multi_image_picker 項(xiàng)目地址為：https://pub.flutter-io.cn/packages/multi_image_picker。
marquee滾動(dòng)文字組件
遇到文字太長(zhǎng)不想換行也不想截?cái)嗟臅r(shí)候就可以使用 marquee 了渗磅，marquee 在文字超出容器寬度后會(huì)自動(dòng)滾動(dòng)播報(bào)嚷硫。同時(shí)，marquee 支持設(shè)置文字的多種參數(shù)始鱼，如字體仔掸，滾動(dòng)方向，留白风响，滾動(dòng)速度等等嘉汰。
Marquee(
text: 'Some sample text that takes some space.',
style: TextStyle(fontWeight: FontWeight.bold),
scrollAxis: Axis.horizontal,
crossAxisAlignment: CrossAxisAlignment.start,
blankSpace: 20.0,
velocity: 100.0,
pauseAfterRound: Duration(seconds: 1),
startPadding: 10.0,
accelerationDuration: Duration(seconds: 1),
accelerationCurve: Curves.linear,
decelerationDuration: Duration(milliseconds: 500),
decelerationCurve: Curves.easeOut,
)
marquee 的流行度達(dá)到了96%丹禀，項(xiàng)目地址為：https://pub.flutter-io.cn/packages/marquee状勤。
權(quán)限管理 permission_handler
這個(gè)插件提供了一個(gè)跨平臺(tái)（iOS，Android）API來請(qǐng)求權(quán)限并檢查它們的狀態(tài)双泪。您還可以打開設(shè)備的應(yīng)用程序設(shè)置持搜，以便用戶可以授予權(quán)限。使用方式：
var status = await Permission.camera.status;
if (status.isDenied) {
// We didn't ask for permission yet or the permission has been denied before but not permanently.
}
// You can can also directly ask the permission about its status.
if (await Permission.location.isRestricted) {
// The OS restricts access, for example because of parental controls.
}
permission_handler的流行度達(dá)到了99%焙矛。項(xiàng)目地址為：https://pub.dev/packages/permission_handler
