譯 10 個 Flutter 元件推薦

譯 10 個 Flutter 元件推薦 – 4

原文

https://tomicriedel.medium.co...

正文

今天我們又要處理軟體包了。我們主要處理的是資料庫上的軟體包，所以... ... 讓我們一起去閱讀吧！

Hive

Hive 是最好的資料庫包之一。作為一個開發者，它提供了很多可能性，對你很有幫助。要知道的最重要的一點是，Hive 是一個 NoSQL 資料庫。另一個非常重要的一點是，你有非常強大的加密內建。沒有多少資料庫包有這個功能，這使得 Hive 更加特殊。哦，還忘了說: 它有很好的文件。底線: 為您的下一個應用程式，你需要一個 NoSQL 資料庫，蜂巢絕對應該包括在內！你可以通過 Reso Coder 或 Johannes Milke 的教程來學習 Hive:

sqflite

http://pub.dev/packages/sqflite

是一個基於 SQLite 原理的 Android，iOS 和 macOS 的資料庫系統。因此，簡單地說，如果您想在 SQL 表中儲存資料，這是正確的包。

你可以通過 Johannes Milke 的教程或者 Flutter in the Package of the Week 系列的教程來學習如何使用這個軟體包:

Moor

http://pub.dev/packages/moor

Moor 是一個基於 SQLite 的資料庫系統，使用 Dart 編寫，可以在任何平臺上使用。它比較知名的 sqflite 軟體包有許多優點。然而，由於它是相對未知的，所以很難找到問題的解決方案。你可以使用 Reso Coder 的系列教程來學習 Moor:

Flutter Slidable

http://pub.dev/packages/flutt...

Flutter 滑動是一個包，允許您建立滑動列表專案。這也是可能的 Flutter 沒有一個包，但這個包提供了一個很好的動畫選擇。讓我們來看一下動畫:

Behind Motion

幕後動作

Drawer Motion

抽屜運動

Scoll Motion

Stretch Motion \!

伸展運動！

老實說，這看起來已經很不錯了。好訊息是，你甚至不需要學習很多東西就可以將這個軟體包應用到你的應用程式中。您可以很容易地瞭解如何在 README 中包含這些小部件。

Just Audio

http://pub.dev/packages/just_...

你一直想開發一個音樂應用程式。那麼音訊就是你想要的東西。我認為這張圖片說明了這個軟體包能做什麼:

在下面的程式碼示例中，我們只關注如何載入音訊檔案。

final player = AudioPlayer();  
var duration = await player.setUrl('https://foo.com/bar.mp3');  
var duration = await player.setFilePath('/path/to/file.mp3');  
var duration = await player.setAsset('path/to/asset.mp3');

Agora RTC Engine

https://pub.dev/packages/agor...

也許你們中的一些人以前聽說過 Agora，但是我仍然會解釋你可以在你的應用程式中使用 Agora 做什麼。也許你想開發一個帶有視訊功能的通訊軟體或者一個純視訊通話軟體。你很快就會遇到問題。在沒有其他幫助的情況下，自己打視訊電話是非常困難的。這就是 Agora 的用武之地。您可以使用 Agora 輕鬆建立視訊通話，而不需要了解後端的很多資訊。整個事情是很容易的 agora_rtc_engine 包。

現在你肯定想知道如何在你的應用程式中實現這個功能。塔達斯 · 佩特拉為此製作了一個非常好的視訊。

Flutter Typeahead

https://pub.dev/packages/flut...

這個軟體包為 Flutter 提供了一個簡單的自動完成小工具，同樣也不難實現:

TypeAheadField(  
  textFieldConfiguration: TextFieldConfiguration(  
    autofocus:true,  
    style: DefaultTextStyle.of(context).style.copyWith(  
      fontStyle: FontStyle.italic  
    ),  
    decoration: InputDecoration(  
      border: OutlineInputBorder()  
    )  
  ),  
  suggestionsCallback: (pattern)async {  
returnawait BackendService.getSuggestions(pattern);  
  },  
  itemBuilder: (context, suggestion) {  
return ListTile(  
      leading: Icon(Icons.shopping_cart),  
      title: Text(suggestion['name']),  
      subtitle: Text('${suggestion['price']}'),  
    );  
  },  
  onSuggestionSelected: (suggestion) {  
    Navigator.of(context).push(MaterialPageRoute(  
      builder: (context) => ProductPage(product: suggestion)  
    ));  
  },  
)

下面是一個例子:

Sliding up panel

https://pub.dev/packages/slid...

滑動皮膚使得 SlidingUpPanel 的實現變得容易，下面是一個很好的例子:

下面是一個如何實現這個皮膚的例子，你肯定會注意到它非常簡單:

return Scaffold(  
    appBar: AppBar(  
      title: Text("SlidingUpPanelExample"),  
    ),  
    body: SlidingUpPanel(  
      panel: Center(  
        child: Text("This is the sliding Widget"),  
      ),  
      body: Center(  
        child: Text("This is the Widget behind the sliding panel"),  
      ),  
    ),  
  );

Pull to Refresh

https://pub.dev/packages/pull...

可以隨時改變的程式資料嗎？或者你正在構建一個社交媒體應用程式，只是想重新整理使用者的 feed？然後，pull_to_refresh 包應該可以幫助您。

正如您所看到的，這個軟體包有許多用途。

README 非常詳細，因此您將很容易理解如何實現這個包。

Convex Bottom Bar

http://pub.dev/packages/conve...

又到了引入底線的時候了。這次是凸形的底條。有了這個包，你可以建立令人印象深刻的底部 Pub ，一定會吸引使用者的眼球！

看看有多少種方法可以實現這個底線:

再見，祝你有愉快的一天！

譯 10 個 Flutter 元件推薦 – 4