在Flutter中,各開發人員提供了對共享軟體包的支持,這使我們能夠輕鬆構建應用程式。它可以避免開發人員從頭開始開發。我們可能使用它們來請求網絡(HTTP),API集成以及使用第三方平台。在本文中,我會列出21個Flutter軟體包以簡化Flutter的開發,一起來看一下(這些都在以下網站列出):
https://pub.dev/
這是一個用於在iOS和Android開發環境中的文件系統上定位文件的Flutter插件包
代碼示例:
Directory tempDir = await getTemporaryDirectory();
String tempPath = tempDir.path;
Directory appDocDir = await getApplicationDocumentsDirectory();
String appDocPath = appDocDir.path;
這是一個Flutter插件,用於在移動平台中啟動URL。它主要支持iOS和Android開發平台。要使用url_launcher,請在pubspec.yaml文件中添加為依賴項。
代碼示例:
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';
void main() {
runApp(Scaffold(
body: Center(
child: RaisedButton(
onPressed: _launchURL,
child: Text('...'),
),
),
));
}
_launchURL() async {
const url = '...';
if (await canLaunch(url)) {
await launch(url);
} else {
throw '...';
}
}
Image_picker是一用於在iOS和Android庫中選擇圖像,用戶也可以拍攝新圖像的flutter插件
代碼示例:
import 'package:image_picker/image_picker.dart';
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State {
File _image;
Future getImage() async {
var image = await ImagePicker.pickImage(source: ImageSource.camera);
setState(() {
_image = image;
});
}
@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),
),
);
}
}
SQLite插件,支持iOS和Android開發平台
import 『package: sqflite/sqflite.dart;
// 使用getDatabasePath獲取路徑
var databasesPath = await getDatabasesPath();
String path = join(databasesPath, 'demo.db');
// 刪除資料庫
await deleteDatabase(path);
// 打開資料庫
Database database = await openDatabase(path, version: 1,
onCreate: (Database db, int version) async {
// 創建資料庫時,也要創建表
await db.execute(
'CREATE TABLE Test (id INTEGER PRIMARY KEY, name TEXT, value INTEGER, num REAL)');
});
這是一個用於顯示緩存目錄中保存的來自網際網路的圖像的Flutter插件
代碼示例:
CachedNetworkImage(
imageUrl: "http://via.placeholder.com/350x150",
placeholder: (context, url) => new CircularProgressIndicator(),
errorWidget: (context, url, error) => new Icon(Icons.error),
),
Image(image: new CachedNetworkImageProvider(url))
用於在iOS和Android應用程式上集成Google地圖。對於Android或iOS,請在應用清單中指定API密鑰,如下所示:
android/app/src/main/AndroidManifest.xml:
--
ios/Runner/AppDelegate.m:
代碼示例:
ios/Runner/AppDelegate.m:
#include "AppDelegate.h"
#include "GeneratedPlug-inRegistrant.h"
#import "GoogleMaps/GoogleMaps.h"
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application
didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
[GMSServices provideAPIKey:@"YOUR KEY HERE"];
[GeneratedPlug-inRegistrant registerWithRegistry:self];
return [super application:application didFinishLaunchingWithOptions:launchOptions];
}
@end
這些是用於將數據模型從父窗口小部件傳遞到其後代的實用程序集。更新模型時,它將重建自己的子代
/**
創建一個擁有一些視圖狀態的類計數器從0開始,可以遞增。注意:它必須從Model擴展。
*/
class CounterModel extends Model {
int _counter = 0;
int get counter => _counter;
void increment() {
// 首先,增加計數器
_counter++;
// 然後通知所有偵聽器。
notifyListeners();
}
}
class CounterApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new ScopedModel(
model: new CounterModel(),
child: new Column(children: [
new ScopedModelDescendant(
builder: (context, child, model) => new Text('${model.counter}'),
),
new Text("Another widget that doesn't depend on the CounterModel")
])
);
}
}
這是一個為小部件構建的依賴項注入系統。
代碼示例:
小部件包裝到包中的提供程序小部件中,然後將其傳遞給變量,以便所有新的提供程序都可以訪問變量
Provider.value(
value: 'Hello World!',
child: MaterialApp(
home: Home(),
)
)
Provider.value(
value: 'Hello World',
child: Consumer(
builder: (context, value, child) => Text(value),
),
);
Provider.value(
value: foo,
child: Provider.value(
value: bar,
child: Provider.value(
value: baz,
child: someWidget,
)
)
)
這是用於Firebase雲存儲API的flutter插件,它是功能強大,簡單且經濟高效的對象存儲服務,適用於Android和iOS。要使用此插件,pubspec.yaml文件中將添加firebase_ storgage為依賴項,此插件仍在開發中,某些API可能尚不可用。
這是一個允許flutter與本機Webview進行通信flutter插件。下面是一個使用flutter導航啟動全屏Webview的示例。當頁面加載時,hidden和initialChild可用於顯示其他內容。
new MaterialApp(
routes: {
"/": (_) => new WebviewScaffold(
url: "https://...",
appBar: new AppBar(
title: new Text("Widget webview"),
),
),
},
);
這是一個提供用於在Android和iOS上查詢應用程式包信息的API的插件
Import 'package: package_info/package_info.dart';
PackageInfo packageInfo = await PackageInfo.fromPlatform();
String appName = packageInfo.appName;
String packageName = packageInfo.packageName;
String version = packageInfo.version;
String buildNumber = packageInfo.buildNumber;
用於提供有關設備的詳細信息,例如品牌,型號以及Android或iOS版本的插件。它提供有關手頭設備的當前信息。
Import 'package:device_info/device_info.dart';
DeviceInfoPlugin deviceInfo = DeviceInfoPlugin();
AndroidDeviceInfo androidInfo = await deviceInfo.androidInfo;
print('Running on ${androidInfo.model}');
IosDeviceInfo iosInfo = await deviceInfo.iosInfo;
print('Running on ${iosInfo.utsname.machine}');
一個Flutter小部件,它簡化了業務邏輯組件設計模式的實現。這是一個需要Bloc和Builder功能的Flutter小部件。BlocBuilder負責根據新狀態下的響應來構建窗口小部件。BlockBuilder與streamBuilder相似,但由於其簡單的API,因此所需的代碼量更少。例:
BlocBuilder(
bloc: BlocA(),
builder: (context, state) {
//根據BlocA的狀態返回小部件
}
)
可在iOS和Android上提供Webview小部件。WKWwebview在iOS上支持webview,而webView在Android上支持webview
可處理iOS Android上的實時位置。它還提供性能和電池優化設置。
import 'package:location/location.dart';
var currentLocation = LocationData;
var location = new Location();
try {
currentLocation = await location.getLocation();
} on PlatformException catch (e) {
if (e.code == 'PERMISSION_DENIED') {
error = 'Permission denied';
}
currentLocation = null;
}
var location = new Location();
location.onLocationChanged().listen((LocationData currentLocation) {
print(currentLocation.latitude);
print(currentLocation.longitude);
});
它是一組loading加載器,這些loading隨著抖動而動起來,以便在加載過程繼續進行時為用戶提供漂亮的外觀。
SpinKitFadingCircle(
itemBuilder: (_, int index) {
return DecoratedBox(
decoration: BoxDecoration(
color: index.isEven ? Colors.red : Colors.green,
),
);
},
);
用於在Android和iOS中同時播放多個音頻文件。
audioplayers: ^0.13.0
AudioPlayer audioPlayer = AudioPlayer ();
AudioPlayer audioPlayer = AudioPlayer (mode: playermode.LOW_LATENCY);
它是適用於iOS和Android的Flutter插件,支持裁剪圖片。
允許Flutter應用發現網絡連接並進行相應配置。該插件具有區分蜂窩連接和WiFi連接的能力。
import 'package:connectivity/connectivity.dart';
var connectivityResult = await (Connectivity().checkConnectivity());
if (connectivityResult == ConnectivityResult.mobile) {
//我已連接到行動網路
} else if (connectivityResult == ConnectivityResult.wifi) {
//我已連接到WIFI
}
提供了一種在flutter項目中添加閃爍效果的簡便方法。
SizedBox(
width: 200.0,
height: 100.0,
child: Shimmer.fromColors(
baseColor: Colors.red,
highlightColor: Colors.yellow,
child: Text(
'Shimmer',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 40.0,
fontWeight:
FontWeight.bold,
),
),
),
);
用於通過共享對話框共享來自flutter應用程式的內容。它包裝了Android上的ACTION_SEND intent和iOS上的UIActivityViewController。
import 'package:share/share.dart';
Share.share(check out my website https://....com');
Flutter軟體包使我們能夠快速構建應用程式,並節省寶貴的時間來構建產品,大大提升了工作效率。