在原生開發(fā)中, Android 使用 Gradle 來(lái)管理依賴, iOS 用 Cocoapods 來(lái)管理依賴,Node 中通過(guò) npm來(lái)管理依賴。 Flutter 使用配置文件 pubspec.yaml (位于項(xiàng)目根目錄)來(lái)管理第三方依賴包。
茅箭網(wǎng)站制作公司哪家好,找創(chuàng)新互聯(lián)!從網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、響應(yīng)式網(wǎng)站設(shè)計(jì)等網(wǎng)站項(xiàng)目制作,到程序開發(fā),運(yùn)營(yíng)維護(hù)。創(chuàng)新互聯(lián)于2013年創(chuàng)立到現(xiàn)在10年的時(shí)間,我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn),來(lái)保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)。
Pub 是Google官方的Dart Packages倉(cāng)庫(kù),類似于node中的npm倉(cāng)庫(kù),android中的jcenter,我們可以在上面查找我們需要的包和插件,也可以向pub發(fā)布我們的包和插件。
Pub工具 包含管理Package、部署Package和部署命令行應(yīng)用的命令。
如果使用的是Flutter SDK,不要直接使用pub命令。而是使用flutter pub命令,如下:
命令pub get/upgrade/outdated 屬于管理Package的依賴關(guān)系
用于檢索當(dāng)前 Package 所依賴的其它 Package。如果 pubspec.lock 文件已經(jīng)存在,則根據(jù)該文件中保存的依賴項(xiàng)版本獲取對(duì)應(yīng)的依賴項(xiàng)。如有必要,將會(huì)創(chuàng)建或更新該文件。
更新 package 依賴
當(dāng)你添加一個(gè) package 后首次運(yùn)行 flutter pub get, Flutter 將會(huì)保存在 pubspec.lock lockfile 中找到的具體 package 版本。這將確保當(dāng)你或者團(tuán)隊(duì)中其他開發(fā)者運(yùn)行 flutter pub get 后能得到相同版本的 package。
如果你想升級(jí)到 package 的最新版本,比如使用 package 的最新特性,請(qǐng)運(yùn)行 flutter pub upgrade 。這將檢索你在 pubspec.yaml 文件中指定的版本約束所允許的最高可用版本。
案例
在flutter項(xiàng)目中導(dǎo)入hive包,在pubspec.yaml文件中添加配置:
執(zhí)行flutter pub get,可以在 pubspec.lock 中看到 hive 版本是2.1.0,這是因?yàn)槟壳癶ive的最新版本是2.1.0,配置“^”表示向最新版本兼容,具體可查看Package版本管理( ),所以再執(zhí)行flutter pub upgrade 可以看到版本還是2.1.0,這個(gè)時(shí)候會(huì)發(fā)現(xiàn)pub get和 pub upgrade 效果一樣。
但是未來(lái)如果 hive 發(fā)布了2.2.0版本,這個(gè)時(shí)候使用flutter pub get在pubspec.lock中看到hive版本依舊是2.1.0,而執(zhí)行flutter pub upgrade 后在pubspec.lock中看到hive版本就是2.2.0。
現(xiàn)在先在flutter 項(xiàng)目的pubspec.yaml文件添加配置,指定hive版本是2.0.5,如下:
這個(gè)時(shí)候執(zhí)行flutter pub get后,可以在pubspec.lock的文件中看到hive版本是2.0.5,如果這個(gè)時(shí)候更改配置為 hive: ^2.0.5,再執(zhí)行flutter pub get就會(huì)發(fā)現(xiàn)在pubspec.lock的文件中看到hive版本還是2.0.5,這個(gè)時(shí)候可以執(zhí)行flutter pub outdated查看依賴的每個(gè) package,如下圖,
可以看到,Upgrable項(xiàng)hive版本號(hào)為2.1.0,執(zhí)行flutter pub upgrade 后可以看到在pubspec.lock的文件中看到hive版本是2.1.0
在pubspec.yaml文件添加配置:
lxx_package_demo信息如下圖:
執(zhí)行flutter pub get后在pubspec.lock中看到flutter_log版本是0.0.1
現(xiàn)在修改lxx_package_demo版本號(hào)為0.0.2,再執(zhí)行flutter pub get
會(huì)發(fā)現(xiàn)版本會(huì)及時(shí)更新為0.0.2,這個(gè)時(shí)候執(zhí)行flutter pub get/upgrade效果一樣
參考文檔:
Flutter支持穩(wěn)定的桌面設(shè)備開發(fā)已經(jīng)一段時(shí)間了,不得不說(shuō),F(xiàn)lutter多平臺(tái)支持的特性真的很香。我本人并沒(méi)有任何桌面開發(fā)的經(jīng)驗(yàn),但仍然使用Flutter開發(fā)出了一個(gè)桌面版小程序,功能很簡(jiǎn)單,就是對(duì)輸入的json做格式化處理和轉(zhuǎn)模型。
話不多說(shuō),先來(lái)看看實(shí)際效果。 項(xiàng)目源碼地址
開發(fā)環(huán)境如下:
Flutter : 2.8.1
Dart : 2.15.1
IDE : VSCode
JSON作為我們?nèi)粘i_發(fā)工作中經(jīng)常要打交道的一種數(shù)據(jù)格式,它共有6種數(shù)據(jù)類型: null , num , string , object , array , bool 。我們勢(shì)必對(duì)它又愛(ài)又恨。愛(ài)他因?yàn)樗鳛閿?shù)據(jù)處理的一種格式確實(shí)非常方便簡(jiǎn)潔。但是在我們做Flutter開發(fā)中,又需要接觸到j(luò)son解析時(shí),就會(huì)感覺(jué)非常棘手,因?yàn)閒lutter沒(méi)有反射,導(dǎo)致json轉(zhuǎn)模型這塊需要手寫那繁雜的映射關(guān)系。就像下面這樣子。
數(shù)據(jù)量少還能接受,一旦量大,那么光手寫這個(gè)解析方法都能讓你懷疑人生。更何況手寫還有出錯(cuò)的可能。好在官方有個(gè)工具**json_serializable**可以自動(dòng)生成這塊轉(zhuǎn)換代碼,也解決了flutter界json轉(zhuǎn)模型的空缺。當(dāng)然,業(yè)界也有專門解析json的網(wǎng)站,可以自動(dòng)生成dart代碼,使用者在生成后復(fù)制進(jìn)項(xiàng)目中即可,也是非常方便的。
本項(xiàng)目以json解析為切入點(diǎn),和大家一起來(lái)看下flutter是如何開發(fā)桌面應(yīng)用的。
要讓我們的flutter項(xiàng)目支持桌面設(shè)備。我們首先需要修改下flutter的設(shè)置。如下,讓我們的項(xiàng)目支持 windows 和 macos 系統(tǒng)。
接下來(lái)使用 flutter create 命令創(chuàng)建我們的模版工程。
創(chuàng)建完項(xiàng)目后,我們就可以 run 起來(lái)了。
先來(lái)看下整體界面,界面四塊,分別為功能模塊、文件選擇模塊、輸入模塊、輸出模塊。
我們?cè)谛陆ㄒ粋€(gè)桌面應(yīng)用時(shí),默認(rèn)的模版又一個(gè)Appbar,此時(shí)應(yīng)用可以用鼠標(biāo)拖拽移動(dòng),放大縮小,還可以縮到很小。但是,我們一旦去掉這個(gè)導(dǎo)航欄,那么窗口就不能用鼠標(biāo)拖動(dòng)了,并且我們往往不希望用戶將我們的窗口縮放的很小,這會(huì)導(dǎo)致頁(yè)面異常,一些重要信息都展示不全。因此這里需要借助第三方組件 bitsdojo_window 。通過(guò) bitsdojo_window ,我們可以實(shí)現(xiàn)窗口的定制化,拖動(dòng),最小尺寸,最大尺寸,窗口邊框,窗口頂部放大、縮小、關(guān)閉的按鈕等。
通過(guò) InkWell 組件,可以捕捉到手勢(shì)、鼠標(biāo)、觸控筆的移動(dòng)和停留位置
這個(gè)功能是鼠標(biāo)移動(dòng)后的UI交互界面。要在窗口上顯示一個(gè)提示框,可以使用 Overlay 。需要注意的是,由于在 Overlay 上的 text 的根結(jié)點(diǎn)不是 Material 風(fēng)格的組件,因此會(huì)出現(xiàn)黃色的下劃線。因此一定要用 Material 包一下 text 。并且你必須給創(chuàng)建的 OverlayEntry 一個(gè)位置,否則它將全屏顯示。
讀取說(shuō)表拖拽的文件一開始想嘗試使用 InkWell 組件,但是這個(gè)組件無(wú)法識(shí)別拖拽中的鼠標(biāo),并且也無(wú)法從中拿到文件信息。因此放棄。后來(lái)從文章《Flutter-2天寫個(gè)桌面端APP》中發(fā)現(xiàn)一個(gè)可讀取拖拽文件的組件 desktop_drop ,能滿足要求。
使用開源組件 file_picker ,選完圖片后的操作和拖拽選擇圖片后的操作一致。
Textfield 如果要顯示富文本,那么需要自定義 TextEditingController 。并重寫 buildTextSpan 方法。
在做導(dǎo)出功能時(shí)遇到下列報(bào)錯(cuò),保存提示為沒(méi)有權(quán)限訪問(wèn)對(duì)應(yīng)目錄下的文件。
通過(guò)Apple的開發(fā)文檔找到有關(guān)權(quán)限問(wèn)題的說(shuō)明。其中有個(gè)授權(quán)私鑰的key為 com.apple.security.files.downloads.read-write ,表示 對(duì)用戶的下載文件夾的讀/寫訪問(wèn)權(quán)限 。那么,使用Xcode打開Flutter項(xiàng)目中的mac應(yīng)用,修改工程目錄下的 DebugProfile.entitlements 文件,向 entitlements 文件中添加 com.apple.security.files.downloads.read-write ,并將值設(shè)置為YES,保存后重啟Flutter項(xiàng)目。發(fā)現(xiàn)已經(jīng)可以向下載目錄中讀寫文件了。
當(dāng)然,這是正常操作。還有個(gè)騷操作就是關(guān)閉系統(tǒng)的沙盒機(jī)制。將 entitlements 文件的 App Sandbox 設(shè)置為NO。這樣我們就可以訪問(wèn)任意路徑了。當(dāng)然關(guān)閉應(yīng)用的沙盒也就相當(dāng)于關(guān)閉了應(yīng)用的防護(hù)機(jī)制,因此這個(gè)選項(xiàng)慎用。
原文地址:
在用Flutter 開發(fā)windows和linux跨平臺(tái)應(yīng)用的時(shí)候,如何設(shè)置默認(rèn)窗口大小呢?
flutter沒(méi)有提供統(tǒng)一的api,所以默認(rèn)的窗口大小是1280x720.
如果我們想要改成自己想要的默認(rèn)窗口大小呢?比如我想要設(shè)置為:512像素寬, 926像素高
我該怎么做呢?
請(qǐng)看我的教程。
首先你確保你已經(jīng)為項(xiàng)目創(chuàng)建了windows和Linux的支持。
目前Flutter 為windows和linux提供的是托管式運(yùn)行的主程序,可以理解為一個(gè)殼子,這個(gè)殼子就是用cpp寫的,平臺(tái)原生的window 窗口。
所以我們可以打開相應(yīng)的cpp源代碼,設(shè)置默認(rèn)窗口大小。
這里先講windows和linux,因?yàn)閙ac 平臺(tái)跟windows和linux不一樣,后面單獨(dú)給大家講解。
我們看圖。
源代碼路徑位于:
windows/runner/main.cpp
找到
第一個(gè)參數(shù)是寬度,單位是px,第二個(gè)是高度,單位是px
修改后重新運(yùn)行生效。
源代碼路徑位于:
linux/my_application.cc
找到
方法的第一個(gè)數(shù)字是寬度,第二個(gè)是高度,單位也是px像素。
修改后,重新運(yùn)行生效。
現(xiàn)在,你已經(jīng)學(xué)會(huì)了如何設(shè)置初始窗口大小了。
Dart的 IO 庫(kù)包含了文件讀寫的相關(guān)類,它屬于 Dart 語(yǔ)法標(biāo)準(zhǔn)的一部分,所以通過(guò) Dart IO 庫(kù),無(wú)論是 Dart VM 下的腳本還是 Flutter,都是通過(guò) Dart IO 庫(kù)來(lái)操作文件的,不過(guò)和 Dart VM 相比,F(xiàn)lutter 有一個(gè)重要差異是文件系統(tǒng)路徑不同,這是因?yàn)镈art VM 是運(yùn)行在 PC 或服務(wù)器操作系統(tǒng)下,而 Flutter 是運(yùn)行在移動(dòng)操作系統(tǒng)中,他們的文件系統(tǒng)會(huì)有一些差異。
Android 和 iOS 的應(yīng)用存儲(chǔ)目錄不同, PathProvider 插件提供了一種平臺(tái)透明的方式來(lái)訪問(wèn)設(shè)備文件系統(tǒng)上的常用位置。該類當(dāng)前支持訪問(wèn)兩個(gè)文件系統(tǒng)位置:
File代表一個(gè)整體的文件,他有三個(gè)構(gòu)造函數(shù),分別是:
文件讀取本身有兩種形式,一種是文本,一種是二進(jìn)制。
2.2.1 讀取文本內(nèi)容
如果是文本文件,F(xiàn)ile提供了readAsString、readAsLines、readAsStringSync、readAsLinesSync方法,讀取文本內(nèi)容
readAsString 一次性讀取所有文本
readAsLines 一行行的讀取文本
結(jié)果返回的是一個(gè)List,list中表示文件每行的內(nèi)容
readAsStringSync、readAsLinesSync同步讀取文本
2.2.2 讀取二進(jìn)制內(nèi)容
如果文件是二進(jìn)制,那么可以使用readAsBytes或者同步的方法readAsBytesSync:
dart中表示二進(jìn)制有一個(gè)專門的類型叫做Uint8List,他實(shí)際上表示的是一個(gè)int的List。
上面提到的讀取方式,都是一次性讀取整個(gè)文件,缺點(diǎn)就是如果文件太大的話,可能造成內(nèi)存空間的壓力。
所以File為我們提供了另外一種讀取文件的方法,流的形式來(lái)讀取文件.
示例
dart提供了open和openSync兩個(gè)方法來(lái)進(jìn)行隨機(jī)文件讀寫:
寫入和文件讀取一樣,可以一次性寫入或者獲得一個(gè)寫入句柄,然后再寫入。
一次性寫入的方法有四種,分別對(duì)應(yīng)字符串和二進(jìn)制
句柄形式可以調(diào)用openWrite方法,返回一個(gè)IOSink對(duì)象,然后通過(guò)這個(gè)對(duì)象進(jìn)行寫入:
默認(rèn)情況下寫入是會(huì)覆蓋整個(gè)文件的,但是可以通過(guò)下面的方式來(lái)更改寫入模式:
雖然dart中所有的異常都是運(yùn)行時(shí)異常,但是和java一樣,要想手動(dòng)處理文件讀寫中的異常,則可以使用try,catch:
我們還是以計(jì)數(shù)器為例,實(shí)現(xiàn)在應(yīng)用退出重啟后可以恢復(fù)點(diǎn)擊次數(shù)。 這里,我們使用文件來(lái)保存數(shù)據(jù):
1.引入PathProvider插件;在pubspec.yaml文件中添加如下聲明:
執(zhí)行 flutter pub get
2.實(shí)現(xiàn)如下
參考:
一年半前玩過(guò)flutter,忘光光...現(xiàn)在是時(shí)候重新拾取了。~
啟動(dòng)頁(yè)一般只放圖片或者加幾行文字。
1、創(chuàng)建好flutter項(xiàng)目之后,在lib文件下面新建launch.dart或xx.dart.
2、在根目錄下新建images文件夾,如已有直接放入圖片
3、flutter_yijiake.iml中加入注入該圖片,并注意空格
4、在根目錄下的test/widget_test.dart中更改默認(rèn)的啟動(dòng)頁(yè)為當(dāng)前的啟動(dòng)頁(yè)路徑
5、最后重新設(shè)置啟動(dòng)時(shí)的頁(yè)面
6、非常簡(jiǎn)單的啟動(dòng)頁(yè)面放logo圖片
值得一說(shuō)的是,flutter框架的UI組件需要已new 組件的形式展開。
對(duì)于初學(xué)flutter的朋友來(lái)說(shuō),要知道,flutter的UI萬(wàn)物皆Widget。
flutter所寫的頁(yè)面的結(jié)構(gòu)可以被看成套娃,一層套一層,一層套一層,一層套一層。。。。。。
Flutter Widget采用現(xiàn)代響應(yīng)式框架構(gòu)建,這是從 React 中獲得的靈感,中心思想是用widget構(gòu)建你的UI。 Widget描述了他們的視圖在給定其當(dāng)前配置和狀態(tài)時(shí)應(yīng)該看起來(lái)像什么。當(dāng)widget的狀態(tài)發(fā)生變化時(shí),widget會(huì)重新構(gòu)建UI,F(xiàn)lutter會(huì)對(duì)比前后變化的不同, 以確定底層渲染樹從一個(gè)狀態(tài)轉(zhuǎn)換到下一個(gè)狀態(tài)所需的最小更改。
Text : 該 widget 可讓創(chuàng)建一個(gè)帶格式的文本。
Row 、 Column : 這些具有彈性空間的布局類Widget可讓您在水平( Row )和垂直( Column )方向上創(chuàng)建靈活的布局。
Stack :取代線性布局 (和Android中的LinearLayout相似),Stack允許子 widget 堆疊, 你可以使用 Positioned 來(lái)定位他們相對(duì)于 Stack 的上下左右四條邊的位置。
Container : Container 可讓您創(chuàng)建矩形視覺(jué)元素。 您可以為 Container 裝飾一個(gè) BoxDecoration , 如 background、一個(gè)邊框、或者一個(gè)陰影。 Container 也可以具有邊距(margins)、填充(padding)和應(yīng)用于其大小的約束(constraints)。另外, Container 可以使用矩陣在三維空間中對(duì)其進(jìn)行變換。
具體的演示見(jiàn)我另外的博客
有一部分Widget都有一個(gè) child 屬性,用于容納唯一的子Widget。
例如:Container、Center、Padding、Align等Widget。
還有一部分Widget允許存在多個(gè)子Widget,用 children 作為屬性。
例如:Row、Column、Stack等Widget。
在StatefulWidget調(diào)用createState之后,框架將新的狀態(tài)插入樹種,然后調(diào)用狀態(tài)對(duì)象的initState。子類化State可以重寫initState,以完成僅需要一次執(zhí)行的工作。當(dāng)然在initState的實(shí)現(xiàn)中需要調(diào)用super.initState
當(dāng)一個(gè)狀態(tài)對(duì)象不再需要時(shí),框架調(diào)用狀態(tài)對(duì)象的dispose。也可以通過(guò)覆蓋dispose方法來(lái)執(zhí)行清理工作。
OVER~