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

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

貓哥說

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

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

老鐵記得 轉發 ,貓哥會呈現更多 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"),
    )
  );
}
複製程式碼

animations

高質量的 Flutter 動畫預製。該軟體包配備了預先錄製的動畫,以達到預期的效果。動畫可以根據你的內容進行定製,也可以整合到應用程式中以取悅使用者:

Material Motion for Flutter

Material Motion 是一組過渡模式,幫助使用者理解和導航應用程式。目前,這個庫提供了以下轉換模式:

  • Container transform

Container transform 模式旨在促進包含容器的 UI 元素之間的轉換。下面顯示的圖片告訴我們,這個包在兩個 UI 元素之間建立了一個可見的連線。

  • Shared axis

共享軸模式有助於在具有空間或導航關係的 UI 元素之間進行轉換。該模式在 x、 y 和 z 軸上使用共享轉換來加強元素之間的關係。

  • Fade through

淡入模式用於在互不緊密相關的 UI 元素之間進行過渡。

  • Fade

淡入模式用於那些存在於螢幕邊界內的 UI 元素,例如在螢幕中心淡出的對話方塊。

Flutter pulltorefresh

該 Flutter 軟體包整合了 Flutter 滾動部件和下拉重新整理功能。

功能:

  • 當你在視窗中向上滾動時,它會載入,當你向下滾動時,它會重新整理
  • 它最適合所有的滾動小部件,如 GridView 和 ListView
  • 配備了一些常見的指示器
  • 附帶預設指示符和屬性的全域性設定
  • 除了水平和垂直重新整理,它還支援反向 ScrollView
  • 包含更多的更新風格,比如 Behind,Follow,Unfollow 和 Front
  • 支援兩級重新整理

© 貓哥

ducafecat.tech/

github.com/ducafecat

往期

開源

GetX Quick Start

github.com/ducafecat/g…

新聞客戶端

github.com/ducafecat/f…

strapi 手冊譯文

getstrapi.cn

微信討論群 ducafecat

系列集合

譯文

ducafecat.tech/categories/…

開源專案

ducafecat.tech/categories/…

Dart 程式語言基礎

space.bilibili.com/404904528/c…

Flutter 零基礎入門

space.bilibili.com/404904528/c…

Flutter 實戰從零開始 新聞客戶端

space.bilibili.com/404904528/c…

Flutter 元件開發

space.bilibili.com/404904528/c…

Flutter Bloc

space.bilibili.com/404904528/c…

Flutter Getx4

space.bilibili.com/404904528/c…

Docker Yapi

space.bilibili.com/404904528/c…

相關文章