Flutter 5個必備的桌面外掛包將包含在你的下一個版本中

會煮咖啡的貓發表於2021-06-04

Flutter

貓哥說

看到這張圖，也許你和我一樣嚮往著寧靜的生活。

今天推薦文章中，感覺字型、動畫、下拉外掛還是很有用的，估計你都用上了。

老鐵記得轉發，貓哥會呈現更多 Flutter 好文~~~~

微信 flutter 研修群 ducafecat

原文

medium.com/fddevops/5-…

參考

正文

是 Google 在 2018 年開發的一個軟體開發工具包。自成立以來，它獲得了業界的廣泛讚譽。使它脫穎而出的是其簡單易學的編碼語言省道，簡單醒目的小部件設計，以及跨平臺的開發能力。

Flutter 繼續作出巨大的改進，現在是一個穩定的產品都 Flutter 網路和移動。雖然 Flutter Desktop Desktop 仍處於 alpha 階段，但隨著開發人員繼續將其用於桌面應用程式開發，您可以期待在未來幾個月內得到大量增強。在本文中，我們將向您介紹在下一個版本中必須包含的 5 個桌面軟體包。

為什麼桌面仍然有意義？

如果你相信桌面應用程式的時代已經結束，那麼你將是一個很好的公司。畢竟，移動應用程式的開發和使用仍在繼續飛速增長，人們的注意力主要集中在移動應用的未來。

儘管如此，許多使用者還是喜歡在更大的螢幕上檢視應用程式，即使它不是桌面應用程式。桌面使用者可以檢視更多的資訊，方便地導航，並且可以花更多的時間在應用程式上。

跨平臺開發的興起

在過去的幾年裡，對本地開發人員的需求已經有了顯著的下降。DRY (不要重複自己)長期以來一直是開發人員的聖盃。JsNode 有“承諾”(沒有雙關語的意思) ，然後 Xamarin 作為一個跨開發工具可以在多種平臺上使用。本地開發中缺少這個特性。

Flego 是第一個跨平臺開發工具，現在稱為 React Native。Flutter 是一個跨平臺的開發工具，它配備了 UI 呈現元件、導航、測試和大量的庫。Flutter 引擎包含了開發人員構建和部署他們的應用程式所需的所有特性。

由於這些新的發展，許多人都認為 Flutter 有可能為桌面開發取代 electron。

Flutter 引擎

Flutter 團隊的目標是構建一個跨平臺的 UI 工具包，以實現程式碼的可重用性。這就導致了 Flutter 發動機的發展。從技術的角度來看，Flutter 引擎把畫素的螢幕上，當他們是必要的。Flutter 發動機是 Flutter 快速、高質量輸出的基石。

Flutter 新的面向桌面的 alpha 版本允許更多的鍵盤輸入、滑鼠控制和大螢幕顯示。

用於 Flutter 的桌面外掛

在 Windows、 Mac 和 Linux 作業系統上，有大量的桌面軟體包可以使用。下面是這些軟體包的一個快速概述。

Provider 5.0.0 (Null Safety)

pub.dev/packages/pr…

它是一個包裝器，圍繞著一個可繼承的 widget，使它可重用且易於使用。你可以在程式碼中使用 Provider 而不是手動編寫 Inheritedwidget，你會得到以下好處:

簡化資源分配
延遲載入
一個顯著減少樣板和使一個新的類每次
使用者友好的開發工具
在程式碼中使用 IngeritedWidget 的最可靠的方法
為類提供更多的可伸縮性

Google_fonts

pub.dev/packages/go…

這並不奇怪。這個 Flutter 軟體包可以讓你在 Flutter 應用程式中使用 977 字型中的任何一種以及它們的變體，這些字型都來自 fonts.google.com。

開始使用 google 字型

使用 google 字型包,。或者。Otf 檔案不需要儲存在 assets 資料夾中，可以在 pubspec 中對映。它們可以在執行時通過 HTTP 命令檢索一次，並且可以快取在應用程式的系統中。這個包是專門為減少應用程式包的大小而設計的。使用 google_fonts 包，開發人員可以選擇預繫結字型，然後使用相同的 API 在 HTTP 上選擇字型。

Flutter Photo View

pub.dev/packages/ph…

一個簡單的可縮放的用於 flutter 的影像/內容小部件。PhotoView 允許使用者縮放圖片，迎合使用者的捏、旋轉和拖動手勢。

它還可以用於顯示影像中的任何小部件，如 Container、 Text 或 SVG。雖然 PhotoView Flutter 軟體包很容易使用，但是通過它的選項和控制器它是非常可定製的。

如何安裝？

在 pubspec.yaml 檔案中新增 photo_view 作為依賴項

dependencies:
  photo_view: ^0.11.1
複製程式碼

匯入照片檢視:

import 'package:photo_view/photo_view.dart';
複製程式碼

非常基本的用法

@override
Widget build(BuildContext context) {
  return Container(
    child: PhotoView(
      imageProvider: AssetImage("assets/large-image.jpg"),
    )
  );
}
複製程式碼