介紹 10 個有用的 Flutter 軟體包
原文 https://genotechies.medium.co...
前言
FLutter 軟體包使您的開發簡單快速。然而，有利有弊。有時候，如果從頭開始開發這個特性將是有益的，因為可定製的軟體包較少。此外，我們還可以看到許多流行的軟體包，它們總是為這個特定功能提供選擇。在這裡，我討論每個基本細節的十個包。然後你就可以決定是否使用它們。我們去找他們每一個人。
正文
qr_flutter
https://pub.flutter-io.cn/pac...
如何新增一個二維碼到你的 Flutter 應用程式。這是最簡單的方法做到這一點。
- 將 qr_flutter 包新增到依賴項中
dependencies:
qr_flutter: ^4.0.0- 並將 qr_flutter 包匯入到檔案中。
- 可以使用 QR Image widget 。
import 'package:flutter/material.dart';
import 'package:qr_flutter/qr_flutter.dart';
void main() => runApp( MyApp());
class MyApp extends StatelessWidget {MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title:Text("QR Code Flutter"),
),
body: Center(
child:QrImage(
data: "Hello",
version: QrVersions.auto,
size: 200,
),
),
),
);
}
}這是輸出。
您可以在掃描程式碼時獲得插入到資料屬性中的輸出。
Flutter Google Maps(google_maps_flutter)
https://pub.flutter-io.cn/pac...
如何使用谷歌 map 在您的 Flutter 應用程式？該軟體包用於透過谷歌 map 資料新增 map 資料。使用這個軟體包，您可以訪問谷歌 map 伺服器， map 顯示，並訪問使用者手勢。此外，您還可以新增 map 標記，建立資訊視窗，使 HTTP 請求谷歌方向，API 的路線資訊，顯示折線和動畫的 map 。對於所有這些，您需要一起使用下面的 flutter 軟體包。
Dio ー這個包用於向 google Directions API 傳送 HTTP 請求以獲取路由資訊
02.Flutter_poliline_points ー這個包用於將折線字串解碼為顯示路由所必需的經緯度點
Google_map_flutter ー這個軟體包用於向使用者顯示 map
然後使用 map ，它需要有一個來自谷歌控制檯的 API 鍵。在這裡，您必須為 ios 啟用 map SDK，為 android 和 Directions API 啟用 map SDK。然後轉到 android 清單檔案並給出 API 金鑰。然後你可以有效地利用谷歌 map 在您的應用程式在您的方式。
Quick Alerts
https://pub.flutter-io.cn/pac...
使用這個軟體包，您可以使用動畫警報對話在您的 Flutter 應用程式，易於使用和定製。而且，從這個包中，您可以獲得預定義的標題和樣式以及預定義的警報樣式。Show() 方法用於顯示和定義警報型別。
下面是示例程式碼。
import 'package:flutter/material.dart';
import 'package:quickalert/quickalert.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'QuickAlert Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
final successAlert = buildButton(
onTap: () {
QuickAlert.show(
context: context,
type: QuickAlertType.success,
text: 'Transaction Completed Successfully!',
autoCloseDuration: const Duration(seconds: 2),
);
},
title: 'Success',
text: 'Transaction Completed Successfully!',
leadingImage: Icon(Icons.add),
);
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
elevation: 1,
centerTitle: true,
backgroundColor: Colors.white,
title: Text(
"QuickAlert Demo",
style: Theme.of(context).textTheme.titleMedium,
),
),
body: ListView(
children: [
const SizedBox(height: 20),
successAlert,
],
),
);
}
Card buildButton({
required onTap,
required title,
required text,
required leadingImage,
}) {
return Card(
shape: const StadiumBorder(),
margin: const EdgeInsets.symmetric(
horizontal: 20,
),
clipBehavior: Clip.antiAlias,
elevation: 1,
child: ListTile(
onTap: onTap,
leading: CircleAvatar(
backgroundColor: Colors.green,
radius: 16,
),
title: Text(title ?? ""),
subtitle: Text(text ?? ""),
trailing: const Icon(
Icons.keyboard_arrow_right_rounded,
),
),
);
}
}這是輸出
可以使用警報對話顯示錯誤警報、警報、資訊警報、確認警報和載入警報，還可以建立自定義警報對話。
mockito
https://pub.flutter-io.cn/pac...
這個包將幫助您進行程式碼重新生成和應用程式的單元測試。你可以在 mockito.pub.dev.com 找到這個包裹。關於如何使用它有很好的文件。如果您不熟悉測試 Flutter 應用程式，強烈推薦使用此軟體包來測試您的應用程式。
Animations
https://pub.flutter-io.cn/pac...
這個軟體包可以讓你輕鬆地新增 Material 動畫到你的應用程式。在這個軟體包中，你可以使用你的應用程式的所有基本動畫，利用普遍期望的效果。此外，如果你願意，你可以新增一些自定義動畫到你的應用程式。
物質運動定義了下列過渡模式:
- container 轉換
- 共享軸
- 淡出
- 消失
Flutter Svg
https://pub.flutter-io.cn/pac...
此包可用於為專案新增 SVG 影像和網路 SVG 影像。您可以透過 flutter_svg.pub.dev.com 獲得這個包。下面的五個用例將幫助您在使用這個包時。
- 您的設計器建立一個向量資產，您希望包括在內，而不需要轉換為 5 種不同的光柵格式解析度。
- 向量繪圖應該是靜態的、非互動的(或者最低限度的)。
- 您希望在執行時從網路源動態載入 SVG。
- 您希望繪製 SVG 資料並將其呈現為影像。
Hooks_Riverpod
https://pub.flutter-io.cn/pac...
此包將處理應用程式中與州相關的所有內容。您可以在編譯時而不是在編譯時捕獲關於狀態的錯誤。它為偵聽/組合物件標識和刪除巢狀。最後，您可以確保程式碼在執行之前是完全可測試的。這是一個包，您可以使用 Hooks、 Riverpord 和 state notifier。你可以在 Hook_Riverpod 包中找到所有的東西。Pub.dev.
Flutter_launcher_icons
https://pub.flutter-io.cn/pac...
這個包是關於應用程式圖示的。如果您使用這個軟體包，您可以在替換圖示時節省大量的時間。您可以從此包中獲得所需的圖形和圖形作為圖示。您可以遵循包文件並使用應用程式圖示所需的步驟。
Firebase UI auth
https://pub.flutter-io.cn/pac...
如果您曾經不得不實現 auth，那麼您可能知道它有多乏味。下次如果你需要給應用程式新增身份驗證，試試 Firebase 身份驗證和 flutter_auth_ui 包，只需要幾行程式碼就可以給你的應用程式新增身份驗證。FirebaseUI for auth 是一個官方的 Firebase 產品，包括 widget 和全螢幕，以簡化實現 auth。
您可以使用登入螢幕 widget 嚮應用程式新增一個頁面，該頁面將帶領使用者完成整個身份驗證流程。首先，在應用程式中新增一個登入路徑，該路徑指向登入螢幕 widget 。接下來，您需要告訴登入螢幕哪些型別的身份驗證提供者是 Firebase 專案使用者，然後螢幕將向螢幕填充適當的表單元素。
如果您只使用電子郵件和密碼登入，那麼您已經完成了。Firebase 身份驗證和 Firebase UI 支援各種其他身份驗證提供商，如 Google 登入、 GitHub 登入、 Apple 登入等。檢視完整列表的包文件。將這些身份驗證提供程式中的任何一個新增到登入螢幕 widget 提供程式配置中，併為其提供特定於提供程式的配置。
如果你正在使用像 Google 登入這樣的授權提供商，你只需要給它你的 Google 登入客戶端 ID，它就會正常工作。FirebaseUIforauth 包包括使用者註冊螢幕、被遺忘的密碼螢幕、使用者配置檔案螢幕等。
Firebase UI widget 是可定製的。它甚至包括 widget 和控制器，允許您為任何受支援的提供程式編寫完全自定義的關閉流。因此，如果你想構建你關心的應用程式部分，讓 Firebase 身份驗證和 Firebase UI 包為你處理身份驗證。有關用於 auth 和所有 Firebase 包的 Firebase UI 的更多資訊，請轉到 pub.dev 獲取原始文件。
mason Package in Flutter
https://pub.flutter-io.cn/pac...
一個由來已久的 Flutter 傳統是執行 Flutter 建立，刪除一切，然後辛苦地複製和貼上在所有的標準樣板。這需要很長時間，非常容易出錯，而且沒有納稅那麼有趣。一定要這樣嗎？新增 Mason，這個軟體包主要是用預定義的磚塊快速組裝新專案或特性。Mason 的工作方式是包含它根據特定於您的專案的值呈現的模板的整個目錄。
例如，假設您正在使用 pubspec.yaml 檔案和一塊關於舒適襪子的泥磚來完成一個新的 flutter 專案。用那塊磚，可能看起來像這樣。如果使用 firebase，它將生成一個 pubspec.yaml 檔案，其中包含 firebase 依賴項。如果您不使用 firebase，那麼這些依賴關係將被跳過。但 Mason 怎麼知道你專案的名字，或者你是否使用了 Firebase？安裝 Mason CLI，就像 Flutter 建立的那樣，但是更加靈活，因為它使用了泥瓦匠和定製磚塊。安裝完成後，你可以執行 Mason make 命名為 brick Mason 會讀取 brick 清單檔案並問你一些問題。在這種情況下，它會希望知道您的專案的名稱，以及您是否正在使用 firebase。
Mason-CLI 支援各種資料型別，包括字串、布林值、數字和列舉。這就只剩下一個問題了。我們如何找到我們想要使用的磚塊的名稱？為此，請訪問 brickhub.dev，檢視世界各地那些已經在上傳自己固執己見的樣板檔案以幫助您節省時間的開發人員可以使用的公開版塊。如果你沒有找到一個你喜歡的，將你首選的 Flutter 專案結構轉換成一塊磚，並上傳它，以節省自己的時間在未來。順便說一句，磚塊可以是任何大小，而不僅僅是整個專案。發現自己每次開始一個新特性時都會建立一些重複的啟動檔案。這塊磚頭也不錯。有了 Mason，你可以比以前更快地寫出應用程式中令人興奮的部分。
結束語
如果本文對你有幫助，請轉發讓更多的朋友閱讀。
也許這個操作只要你 3 秒鐘，對我來說是一個激勵，感謝。
祝你有一個美好的一天~
© 貓哥
本文由mdnice多平臺釋出