10 個 Flutter 元件推薦 - 2

今天，我們再次推薦 package。我們主要處理使用者介面和圖示包，所以... 讓我們去和愉快的閱讀！

原文

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

正文

swipe_to

https://pub.dev/packages/swip...

如果你想給任何小工具新增簡單的滑動手勢，滑動到是一個很好的軟體包。這個軟體包的優點是使用者不必點選動作，但是當滑動時動作會立即執行。

這裡有一個例子可以更好地理解它:

但是... ... 我怎樣才能將這個令人難以置信的包整合到我的程式碼中呢？

好吧，這很簡單:

SwipeTo(
    child: Container(
        padding: const EdgeInsets.symmetric(vertical: 10.0, horizontal: 8.0),
        child: text('?? Swipe me Left | YOU |Swipe me right ??'),
    ),
    onLeftSwipe: () {.
        print('Callback from Swipe To Left');
    },
    onRightSwipe: () {
        print('Callback from Swipe To Right');
    },
),

看，一點都不難，對吧？

rename

https://pub.dev/packages/rename

當然，你希望你的應用程式在釋出之前有一個很酷的名字。但是，讓我們面對現實吧，如果您為每個平臺手動執行這個過程，那麼這個過程可能會非常痛苦。

這就是為什麼存在著重新命名。這個包允許你在幾秒鐘內在任何平臺上重新命名你的應用程式。以下是它的工作原理:

1. 在命令列中執行這個命令:

pub global activate rename

2. 現在執行這兩個命令:

pub global run rename --bundleId com.myDomain.myApp
pub global run rename --appname "MyApp"

這兩個命令的第一個設定你的應用程式的 BundleId。這是你的領域，只不過是倒過來的。如果你沒有域名，把它設定成你的名字或者你公司的名字。但無論如何，如果這個域名沒有被佔用，那將是有利的。

第二個命令正確地重新命名應用程式。你會在你的主螢幕上看到這個名字，在 iOS 和 Android 或者其他平臺上。

你可以隨心所欲地更改名字。

還有更多的可能性，比如只為一個特定的平臺重新命名一個應用程式。

Hidable

https://pub.dev/packages/hidable

Hidable 可以讓你在使用者滾動時隱藏任何視窗小部件。這對於很多事情都是非常有用的，所以現在我們來看看如何實現這個包:

1. 首先，建立一個 ScrollController。

final ScrollController scrollController = ScrollController();

2。現在將 scrollController 作為控制器新增到可滾動的小部件中。下面是一個 ListView 的例子:

ListView.separated(
// General scroll controller which makes bridge between// This ListView and Hidable widget.
  controller: scrollController,
  itemCount: colors.length,
  itemBuilder: (_, i) => container(
     height: 50,
     color: colors[i].withOpacity(.6),
  ),
  separatorBuilder: (_, __) =>const SizedBox(height: 10),
),

3。第三步，也是最後一步，用 Hidable widget 包裝任何元件。在小部件中，指定 scrollController 作為控制器。可租用小部件還有一些其他屬性。我們現在使用 AppBar 來完成這個過程。

Hidable(
  controller: scrollController,
  wOpacity:true,// As default it's true.
  size: 56,// As default it's 56.
  child: BottomNavigationBar(...),
),

就是這樣。現在你已經成功地實現了可租用小工具！

Flutter Sticky Header

有時候你在應用程式中滾動，然後突然間類別卡在螢幕頂部，這意味著你總是知道你在哪裡。你有沒有想過在 Flutter 是怎麼工作的？不是嗎？好吧，那麼無論如何還是閱讀這一部分，因為它非常有趣

如果你還在讀，我會給你詳細展示我的意思:

我想我們現在都知道我的意思了。

但是我如何在 Flutter 中實現這個呢？嗯，非常簡單: 帶有 flutter/sticky/header 包。這個軟體包可以很容易地為你的應用程式新增這樣一個偉大的功能。讓我來告訴你如何在程式碼中實現它:

SliverStickyHeader(
  header: Container(
    height: 60.0,
    color: Colors.lightBlue,
    padding: EdgeInsets.symmetric(horizontal: 16.0),
    alignment: Alignment.centerLeft,
    child: Text(
      'Header #0',
      style:const TextStyle(color: Colors.white),
    ),
  ),
  sliver: SliverList(
    delegate: SliverChildBuilderDelegate(
      (context, i) => ListTile(
            leading: CircleAvatar(
              child: Text('0'),
            ),
            title: Text('List tile #$i'),
          ),
      childCount: 4,
    ),
  ),
);

但是還有其他方法可以實現類似的東西，比如使用 sliversticheader.builder。

Preload Page View

每個人都知道 PageViews。它們非常方便，甚至可以在 TikTok 上找到(如果它是用 Flutter 建造的)。但是如果你在 PageView 上有來自伺服器的內容呢。當使用者進入一個頁面後，載入的內容卻要花費很長的時間，這是不好的。這個問題通過預載入 \_ 頁面檢視來解決。正如它的名字所說，你可以使用這個包來預載入任意數量的頁面，這樣你就不會有永恆的載入螢幕。這個小部件的實現非常簡單，工作原理幾乎和一般的 PageView 小部件一樣:

@override
  Widget build(BuildContext context) {
    return new PreloadPageView.builder(
      itemCount: ..,
      itemBuilder: ..,
      onPageChanged: { (int position) { ...},
      .....
      preloadPagesCount: 3,
      controller: PreloadPageController(),
    );
  }

其實也沒那麼難。

Phosphor Icons

http://phosphoricons.com/

正如開頭提到的，我們當然想談談圖示庫。相信我，這個圖示圖書館真是太棒了。在我看來，這些是迄今為止我見過的最好的圖示。最棒的是， phosphoricons.com 上有 5364 個圖示，有各種各樣的變化。

當然，這只是網站的一個截圖。

https://pub.dev/packages/phos...

但是... 這整件事和 Flutter 現在有什麼關係？有一個官方支援的 Flutter 軟體包，它包含了所有磷圖示。

在 Flutter 中實現圖示非常簡單:

Icon(
  PhosphorIcons.pencil,// Pencil Icon
),

就是這樣，現在你的應用程式中有了一個漂亮的鉛筆圖示。

Sliding Clipped Nav Bar

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

到目前為止，它幾乎是一個儀式，我提出了我的 10 個 Flutter 技巧文章導航 Pub 包。今天這篇文章提到了滑動滑塊導航欄。這個軟體包為你提供了一個讓你的應用程式對使用者來說更有趣的好方法。由於其令人難以置信的簡單的執行和美麗的設計，它是最好的導航 Pub 包之一。

但是... ... 說夠了，導航欄和這個包裝看起來怎麼樣？

我想你很清楚我為什麼這麼喜歡這個包裹。有這麼多的定製可能性和實現非常簡單:

return Scaffold(
      body: PageView(
      physics: NeverScrollableScrollPhysics(),
      controller: controller,
...
      ),
      bottomNavigationBar: SlidingClippedNavBar(
        backgroundColor: Colors.white,
        onButtonPressed: (index) {
          setState(() {
            selectedIndex = index;
          });
          controller.animateToPage(selectedIndex,
              duration:const Duration(milliseconds: 400),
              curve: Curves.easeOutQuad);
        },
        iconSize: 30,
        activeColor: Color(0xFF01579B),
        selectedIndex: selectedIndex,
        barItems: [
          BarItem(
            icon: Icons.event,
            title: 'Events',
          ),
          BarItem(
            icon: Icons.search_rounded,
            title: 'Search',
          ),
/// Add more BarItem if you want
        ],
      ),
    );

是的，就是這樣。你不需要做其他的事情。這個軟體包的 README 檔案非常詳細，使您可以非常容易地開始進入軟體包。

Battery plus

https://pub.dev/packages/batt...

Battery_plus 是一個由 Flutter 社群支援的軟體包，它可以提供關於電池狀態的各種資訊。它非常容易使用，並且可以用於許多應用程式:

// Import package
import 'package:battery_plus/battery_plus.dart';
// Instantiate it
var battery = Battery();
// Access current battery level
print(await battery.batteryLevel);
// Be informed when the state (full, charging, discharging) changes
battery.onBatteryStateChanged.listen((BatteryState state) {
// Do something with new state
});

Freezed

http://pub.dev/packages/freezed

也許你已經聽說過這個包被凍結了，但是如果沒有，我現在就向你解釋(因為它非常有用)。

現在我們假設您已經在 Flutter 中建立了一個資料類。正如您可能已經注意到的，這裡有大量的鍋爐程式碼，檢視這些程式碼令人不快。這就是為什麼冰凍被創造出來。使用這個包，您可以建立具有多種可能性的資料類，只需要很少的樣板程式碼。

我不會在這裡向您展示如何實現 Freezed，但是 README 檔案非常棒。

end.

祝你今天愉快！

© 貓哥

• 微信 ducafecat
• 部落格 ducafecat.tech
• github
• bilibili