Flutter 常用插件匯總
DIO網(wǎng)絡(luò)請求框架
提起 Flutter 的網(wǎng)絡(luò)框架,就不得不提 DIO,而且令人自豪的是 DIO 是國人開發(fā)的哦!DIO 作為一個(gè)網(wǎng)絡(luò)框架實(shí)現(xiàn)了全部的網(wǎng)絡(luò)請求,包括 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());
DIO最新版本為4.0,在github 上有近萬個(gè) Star,流行指數(shù)達(dá)到了99%,項(xiàng)目地址為:pub.flutter-io.cn/packages/di…
url_launcher系統(tǒng)應(yīng)用跳轉(zhuǎn)
在 App 中不可避免會(huì)使用url 跳轉(zhuǎn)到系統(tǒng)瀏覽器或其他應(yīng)用,這時(shí)候 url_launcher 就派上用場了, 用法十分簡單:
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)目地址為:pub.flutter-io.cn/packages/ur…
flutter_easyrefresh上下拉刷新
flutter 中上下拉加載數(shù)據(jù)的不二之選,也是國人開發(fā)的,支持在大部分組件上套用實(shí)現(xiàn)上拉加載或下拉刷新。使用方法也是很簡單,同時(shí)也支持自定義 header 和 footer。
import 'package:flutter_easyrefresh/easy_refresh.dart';
//...
EasyRefresh(
child: ScrollView(),
onRefresh: () async{
....
},
onLoad: () async {
....
},
)
flutter_easyrefresh 在 pub 上的流行度為95%,項(xiàng)目地址為:pub.flutter-io.cn/packages/fl…
flutter_swiper 輪播組件
flutter_swiper 是一個(gè)輪播組件,號(hào)稱是 flutter 最佳的輪播組件。flutter_swiper 支持自動(dòng)輪播,顯示頁面指示,動(dòng)畫時(shí)長,點(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)目地址為:pub.flutter-io.cn/packages/fl…
catcher 異常捕獲
catcher 是一個(gè) flutter 的全局異常捕獲插件,可以自動(dòng)捕捉到系統(tǒng)的異常,并且可以指定異常上報(bào)地址自動(dòng)將運(yùn)行錯(cuò)誤上報(bào)給服務(wù)端,從而方便開發(fā)者跟蹤程序的 Bug 進(jìn)而進(jìn)行修復(fù)。
import 'package:flutter/material.dart';
import 'package:catcher/catcher.dart';
main() {
/// STEP 1. Create catcher configuration.
/// Debug configuration with dialog report mode and console handler. It will show dialog and once user accepts it, error will be shown /// in console.
CatcherOptions debugOptions =
CatcherOptions(DialogReportMode(), [ConsoleHandler()]);
/// Release configuration. Same as above, but once user accepts dialog, user will be prompted to send email with crash to support.
CatcherOptions releaseOptions = CatcherOptions(DialogReportMode(), [
EmailManualHandler(["support@email.com"])
]);
/// STEP 2. Pass your root widget (MyApp) along with Catcher configuration:
Catcher(rootWidget: MyApp(), debugConfig: debugOptions, releaseConfig: releaseOptions);
}
catcher 的流行度達(dá)到了95%,項(xiàng)目地址為:pub.flutter-io.cn/packages/ca…
cached_network_image 網(wǎng)絡(luò)圖片加載緩存
cached_network_image 有點(diǎn)類似iOS的 SDWebImage,可以緩存已經(jīng)加載過的圖片而無需重復(fù)下載,既提高了加載速度也節(jié)省了網(wǎng)絡(luò)資源請求。同時(shí) cached_network_image 支持占位圖、加載進(jìn)度和請求失敗的占位組件,可以做到很好的用戶體驗(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)目地址為:pub.flutter-io.cn/packages/ca…
shared_preferences 本地離線鍵值對緩存
shared_preferences類似iOS的 NSUserDefaults和安卓的 SharedPreferences,支持App簡單的鍵值對離線緩存,對于離線存儲(chǔ)簡單的數(shù)據(jù)十分適用。但是需要注意的是插件的離線寫入操作是異步的,因此并不能保證寫入返回后100%存儲(chǔ)成功,因此對于十分關(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)目地址為:pub.flutter-io.cn/packages/sh…
image_picker 和 multi_image_pikcer 圖片選擇器
image_picker 和 multi_image_picker 為圖片選擇器,前者支持單張圖片選擇,后者支持多圖選擇,二者均支持相機(jī)或從相冊選擇圖片。需要注意的是 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)目地址為:pub.flutter-io.cn/packages/im…,multi_image_picker 項(xiàng)目地址為:pub.flutter-io.cn/packages/mu…。
marquee滾動(dò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)目地址為:pub.flutter-io.cn/packages/ma…。
sqflite 本地?cái)?shù)據(jù)庫訪問
sqflite 從名字就知道它是用于手機(jī)端 sqlite 數(shù)據(jù)庫訪問的工具,支持 sqlite 數(shù)據(jù)庫的全部增改刪查操作,同時(shí)還支持事務(wù)和批量操作。SQL 的操作支持直接執(zhí)行SQL 語句,也支持模板語法。
// Get a location using getDatabasesPath
var databasesPath = await getDatabasesPath();
String path = join(databasesPath, 'demo.db');
// Delete the database
await deleteDatabase(path);
// open the database
Database database = await openDatabase(path, version: 1,
onCreate: (Database db, int version) async {
// When creating the db, create the table
await db.execute(
'CREATE TABLE Test (id INTEGER PRIMARY KEY, name TEXT, value INTEGER, num REAL)');
});
// Insert some records in a transaction
await database.transaction((txn) async {
int id1 = await txn.rawInsert(
'INSERT INTO Test(name, value, num) VALUES("some name", 1234, 456.789)');
print('inserted1: $id1');
int id2 = await txn.rawInsert(
'INSERT INTO Test(name, value, num) VALUES(?, ?, ?)',
['another name', 12345678, 3.1416]);
print('inserted2: $id2');
});
// Update some record
int count = await database.rawUpdate(
'UPDATE Test SET name = ?, value = ? WHERE name = ?',
['updated name', '9876', 'some name']);
print('updated: $count');
// Get the records
List<Map> list = await database.rawQuery('SELECT * FROM Test');
List<Map> expectedList = [
{'name': 'updated name', 'id': 1, 'value': 9876, 'num': 456.789},
{'name': 'another name', 'id': 2, 'value': 12345678, 'num': 3.1416}
];
print(list);
print(expectedList);
assert(const DeepCollectionEquality().equals(list, expectedList));
// Count the records
count = Sqflite
.firstIntValue(await database.rawQuery('SELECT COUNT(*) FROM Test'));
assert(count == 2);
// Delete a record
count = await database
.rawDelete('DELETE FROM Test WHERE name = ?', ['another name']);
assert(count == 1);
// Close the database
await database.close();
sqflite 流行度達(dá)到了100%,如果為了應(yīng)用中更好地維護(hù)最好是再封裝一層,項(xiàng)目地址為:pub.flutter-io.cn/packages/sq…。
以上就是Flutter 常用插件匯總的詳細(xì)內(nèi)容,更多關(guān)于Flutter 常用插件的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
Android中通過RxJava進(jìn)行響應(yīng)式程序設(shè)計(jì)的入門指南
響應(yīng)式編程在Android中的運(yùn)用是非常犀利的,比如在異常處理和調(diào)度器方面,這里我們將從生命周期等方面來講解Android中通過RxJava進(jìn)行響應(yīng)式程序設(shè)計(jì)的入門指南:2016-06-06
外層豎向ScrollView,里層橫向ScrollView滑動(dòng)沖突的解決方法
下面小編就為大家?guī)硪黄鈱迂Q向ScrollView,里層橫向ScrollView滑動(dòng)沖突的解決方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-04-04
Android實(shí)現(xiàn)外部喚起應(yīng)用跳轉(zhuǎn)指定頁面的方法
這篇文章主要給大家介紹了關(guān)于Android實(shí)現(xiàn)外部喚起應(yīng)用跳轉(zhuǎn)指定頁面的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12
Android 截取手機(jī)屏幕兩種實(shí)現(xiàn)方法
這篇文章主要介紹了Android 截取手機(jī)屏幕兩種實(shí)現(xiàn)方法的相關(guān)資料,需要的朋友可以參考下2017-05-05
Android使用自定義View繪制漸隱漸現(xiàn)動(dòng)畫
這篇文章主要介紹了Android使用自定義View繪制漸隱漸現(xiàn)動(dòng)畫效果的相關(guān)內(nèi)容,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-09-09
使用CMake構(gòu)建OpenCV項(xiàng)目過程解析
這篇文章主要介紹了使用CMake構(gòu)建OpenCV項(xiàng)目過程解析,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-11-11

