中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

Flutter的搭建與運行方式

發布時間:2021-09-03 12:31:32 來源:億速云 閱讀:435 作者:chen 欄目:軟件技術

本篇內容主要講解“Flutter的搭建與運行方式”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實用性強。下面就讓小編來帶大家學習“Flutter的搭建與運行方式”吧!


01

Flutter開發環境搭建(Windows版)

一、系統環境要求:要安裝并運行Flutter,開發環境必須滿足以下條件。

  • 操作系統:Windows 7或更高版本(64-bit);

  • 磁盤空間:400MB;

  • 工具:Flutter依賴PowerShell 5.0或更新的版本和Git for Windows(Git命令行工具)這些命令行工具。

 

我們可以去Flutter官網下載最新可用的安裝包。

下載地址:

https://flutter.io/sdk-archive/#windows

注意:Flutter的渠道變動頻繁,請以官網為準。同時,我們也推薦去Flutter github項目下下載安裝包。

下載地址:

https://github.com/flutter/flutter/releases


下載完成后,請先將安裝包zip解壓到想安裝Flutter SDK的路徑(注意:不要將Flutter安裝到需要高權限的路徑,如 C:Files)。之后,在Flutter安裝目錄的flutter文件下找到flutter_console.bat,雙擊運行并啟動flutter命令行。

 

二、更新環境變量:若想在Windows系統自帶命令行運行flutter命令,開發者需要添加以下環境變量到用戶PATH:“控制面板->用戶賬戶->更改我的環境變量”,同時,在“用戶變量”下檢查是否有名為“Path”的條目:如果該條目存在,追加flutter \ bin的全路徑,使用;作為分隔符。如果該條目不存在,創建一個新用戶變量Path,然后將flutter \ bin的全路徑作為它的值。Flutter的執行需要聯網,還需要設置:

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASH_URL=https://storage.flutter-io.cn

 

三、運行flutter doctor命令:開發者需在Flutter命令行運行flutter doctor命令來查看是否需要安裝其它依賴,如果需要,則進行安裝。在終端中輸入flutter doctor,如果出現和下圖類似的結果,甚至得到的x比圖示更多,主要原因是沒有安裝Android studio。下面我們將列出Android Studio的安裝步驟。

Flutter的搭建與運行方式


四、Android Studio的安裝:

  • 在官網下載Android Studio,下載地址:https://developer.android.com/;

  • 啟動Android Studio,執行“Android Studio安裝向導”并安裝最新的Android SDK、Android SDK工具和Android SDK構建工具,這些都是用Flutter進行Android開發所需要的;

  • 打開Android Studio軟件,找到Plugin的配置,搜索Flutter插件,出現如圖所示頁面。點擊中間“Search in repositories”,然后點擊安裝,全部安裝完成后需重啟。

Flutter的搭建與運行方式Flutter的搭建與運行方式

五、安裝Android證書

安裝好Android Studio后,再次打開終端(命令行),輸入flutter doctor,這時x的數量會明顯減少,但可能還是會遇到1-2個,如果只有1個就說明沒有安裝證書,開發者只需在終端里執行以下命令即可:

flutter doctor --android-licenses

當提示Y/N選擇時,請直接選擇Y即可完成安裝。


02

Flutter開發環境搭建(Mac版)

一、系統環境要求:要安裝并運行Flutter,開發環境必須滿足以下條件。

  • 操作系統: MacOS(64-bit);

  • 磁盤空間:大于700M,如果算上Android Studio等編輯工具,盡量大于3G;

  • 命令行工具:bash、mkdir、rm、git、curl、unzip、which、brew。

 

二、下載Flutter SDK包:

推薦在官網下載,網址:https://flutter.io/setup-macos/ 。

下載完成后,解壓安裝包到想安裝的目錄,如:cd ~/development

unzip ~/Downloads/flutter_macos_v0.5.1-beta.zip

 

三、配置環境變量

壓縮包下載好以后,選擇位置進行解壓,壓縮包解壓的位置在下面配置環境變量的時候仍要使用。

首先打開終端工具,使用vim進行配置環境變量,命令如下:

vim ~/.bash_profile

然后,在打開的文件里增加一行代碼,配置flutter命令,使其在任何地方都可以使用。添加的代碼為:

export PATH=/app/flutter/bin:$PATH

這行命令需要根據壓縮包解壓的位置來進行編寫,內容是你的路徑。配置完成后,還需用source命令重新加載,具體命令如下:

source ~/.bash_profile

完成以后, flutter的安裝工作已基本完成,但要進行開發,還需要使用命令來檢測其是否成功安裝。

Flutter的搭建與運行方式

四、檢查開發環境:如上圖所示,已經成功安裝了Flutter,但是還不具備開發環境,可以用flutter doctor命令來檢查還需安裝的插件和軟件。

 

五、安裝Xcode:要為iOS開發Flutter應用程序,需要Xcode9.0或更高版本。

  • 在蘋果商店安裝Xcode 9.0或更新版本。

  • 配置Xcode命令行工具以使用新安裝的Xcode版本,命令如下:

sudo xcode-select --switch/Applications/Xcode.app/Contents/Developer

在大多數的情況下,當你想要使用最新版本的Xcode時,這是正確的路徑。如果需要使用不同版本的Xcode,請指定相應的路徑。

  • 確保Xcode許可協議是通過打開一次Xcode或通過命令sudo xcodebuild –license 。


六、安裝Android Studio:和Windows一樣,在Android設備上構建并運行Flutter程序都需要先安裝Android Studio。

 

03

升級Flutter

Flutter SDK有多個分支,如beta、dev、master、stable,其中stable為穩定分支,dev和master為開發分支。flutter安裝完成后,可以運行flutter channel,查看所有分支。


若想升級flutter SDK,需要執行命令:flutter upgrade 。


該命令會同時更新Flutter SDK和flutter項目依賴包。若只更新項目依賴包(不包括Flutter SDK),可以使用以下命令:

flutter packages get 獲取項目所有的依賴包。
flutter packages upgrades 獲取項目所有依賴包的最新版本。


04

開發工具的配置與使用

一、Android studio配置與使用

首先需要安裝兩個插件,分別是Flutter和Dart插件:

  • Flutter插件:支持Flutter開發工作流(運行、調試、熱重載等);

  • Dart插件:提供代碼分析(輸入代碼時進行驗證、代碼補全等)。

1.安裝步驟

  • 啟動Android Studio;

  • 打開插件首選項 (MacOS:Preferences>Plugins, Windows:File>Settings>Plugins);

  • 先選擇 Browse repositories…,再選擇 flutter 插件并點擊 install;

  • 重啟Android Studio后插件生效。

 

2.創建Flutter應用

  • 選擇 File>New Flutter Project ;

  • 選擇 Flutter application 作為 project 類型, 然后點擊 Next;

  • 輸入項目名稱 (如 myapp),點擊 Next;

  • 點擊 Finish;

  • 等待Android Studio安裝SDK并創建項目。

 

3.運行應用程序

  • 定位到Android Studio工具欄;

  • 在 target selector 中, 選擇一個運行該應用的Android設備。如果沒有列出可用,請選擇 Tools>Android>AVD Manager 創建;

  • 在工具欄中點擊 Run圖標;

  • 如果一切正常,在設備或模擬器上會看到啟動的應用程序,如下圖所示:


Flutter的搭建與運行方式

4.體驗熱重載:Flutter可以通過熱重載實現快速的開發周期,熱重載無需重啟應用程序就能實時加載修改后的代碼,并且不會丟失狀態。對代碼進行簡單的更改,然后使用IDE或命令行工具進行重新加載,可以在設備或模擬器上看到更改。

  • 打開`lib/main.dart`文件;

  • 將字符串`'You have pushed the button this many times:'` 更改為`'You have clicked the button this many times:'`;

  • 不要按“停止”按鈕,讓應用繼續運行;

  • 要查看更改,請調用 **Save** (`cmd-s` / `ctrl-s`),或者點擊 **熱重載按鈕** (帶有閃電圖標的按鈕)。

二、VS Code的配置與使用

1.安裝flutter插件:

  • 啟動VS Code;

  • 調用View>Command Palette...;

  • 輸入'install'后選擇Extensions:Install Extension action;

  • 在搜索框輸入flutter,在搜索結果列表中選擇'Flutter'并點擊Install;

  • 選擇'OK'并重新啟動VS Code;

  • 驗證配置:首先,調用View>Command Palette...,輸入'doctor',然后選擇'Flutter:Run Flutter Doctor'action。查看“OUTPUT”窗口中的輸出是否有問題。

 

2.創建Flutter應用

  • 啟動VS Code;

  • 調用View>Command Palette...;

  • 輸入'flutter'后選擇'Flutter:New Project'action;

  • 輸入Project名稱(如myapp)并按回車鍵;

  • 指定防止項目的位置,然后確認;

  • 等待項目創建繼續,并顯示main.dart文件。

 

3.體驗熱重載

用VSCode編寫Flutter的缺點之一是需要手動加載更新應用,這在一定程度上影響了工作效率。當我們運行flutter run以后,會出現一段紅色的文字提示,如下所示:

  • r 鍵:點擊后熱加載,即重新加載;

  • p 鍵:顯示網格,可以掌握布局情況;

  • o 鍵:切換Android和iOS的預覽模式;

  • q 鍵:退出調試預覽模式。

 

4.寫一個HelloWorld程序

當我們搭建好開放環境搭后,按照慣例我們需要寫一個HelloWorld程序。 將下面這段代碼寫在根目錄.dart文件中,作為Flutter主文件。

import 'package:flutter/material.dart';
//主函數(入口函數),下面我會簡單說說Dart的函數
void main() =>runApp(MyApp());
// 聲明MyApp類
class MyApp extends StatelessWidget{
//重寫build方法
@override
Widget build(BuildContext context){
//返回一個Material風格的組件
return MaterialApp(
  title:'Welcome to Flutteraa',
  home:Scaffold(
    //創建一個Bar,并添加文本
    appBar:AppBar(
      title:Text('Welcome to Flutter'),
    ),
    //在主體的中間區域,添加一個hello world 的文本
    body:Center(
      child:Text('Hello World'),
    ),
    ),
    );
    }
}

結果如下圖所示:


Flutter的搭建與運行方式

05

連接設備運行Flutter應用

Window下只支持為Android設備構建并運行Flutter應用,而macOS同時支持iOS和Android設備。下面將分別介紹如何連接Android和iOS設備來運行flutter應用。

一、連接Android模擬器

在Android模擬器上運行并測試Flutter應用,請按照以下步驟操作:

  • 啟動 Android Studio>Tools>Android>AVD Manager 并選擇 Create Virtual Device;

  • 選擇一個設備并選擇 Next;

  • 為要模擬的Android版本選擇一個或多個系統印象,然后選擇 Next。建議使用 x86 或 x86_64 image;

  • 在 “Emulated Performance”下, 選擇 Hardware - GLES 2.0 以啟用硬件加速;

  • 驗證AVD配置是否正確,然后選擇 Finish;

  • 在“Android Virtual Device Manager”中,點擊工具欄的 Run。模擬器啟動并顯示所選操作系統版本或設備的啟動畫面;

  • 運行 flutter run 啟動您的設備。連接的設備名是 Android SDK built for <platform>,其中 platform 是芯片系列,如 x86。

 

二、連接Android真機設備

要準備在Android設備上運行并測試Flutter應用,需要Android 4.1或更高版本的Android設備。

  • 在Android設備上啟用開發人員選項和USB調試;

  • 使用USB將手機插入電腦。如果設備出現調試授權提示,請授權你的電腦可以訪問該設備;

  • 在命令行運行 flutter devices 命令以驗證Flutter識別您連接的Android設備;

  • 運行啟動你應用程序 flutter run。

 

三、連接iOS模擬器

要準備在iOS模擬器上運行并測試Flutter應用,請按以下步驟操作:

  • 在你的MAC上,通過 Spotlight 或以下命令找到模擬器:open -a Simulator;

  • 通過檢查模擬器 Hardware > Device 菜單中的設置,確保模擬器正在使用64位設備(iPhone 5s或更高版本);

  • 根據電腦屏幕大小,模擬高清屏iOS設備可能會溢出屏幕。可以在模擬器的 Window> Scale 菜單下設置設備比例;

  • 運行 flutter run,啟動flutter應用程序。

 

四、連接iOS真機設備

如果要將Flutter應用安裝到iOS真機設備,除了需要一些額外的工具和一個Apple賬戶,還需要在Xcode中進行一些設置。

1.安裝homebrew(如果已經安裝了brew,跳過此步驟);

2.打開終端并運行如下這些命令:
    brew update
    brew install --HEAD libimobiledevice
    brew install ideviceinstaller ios-deploy cocoapods
    pod setup
如果這些命令中的任何一個失敗并出現錯誤,需要運行brew doctor并按照說明解決問題

3.遵循Xcode簽名流程來配置項目:

在你Flutter項目目錄中通過open ios/Runner.xcworkspace打開默認的Xcode workspace。

  • 在Xcode中,選擇導航面板左側中的Runner項目。
    在Runner target設置頁面中,確保在General > Signing > Team下選擇你的開發團隊。當你選擇一個團隊時,Xcode會創建并下載開發證書,向你的設備注冊你的賬戶,并創建和下載配置文件。

  • 如果要開始你的第一個iOS開發項目,需要使用你的Apple ID登錄Xcode。任何Apple ID都支持開發和測試,但若想將應用分發到App Store,就必須注冊Apple開發者計劃。

  • 當你第一次使用attach真機設備進行iOS開發時,需要同時信任你的Mac和該設備上的開發證書。iOS設備首次連接到Mac時,選擇信任。然后轉到iOS設備上的設置菜單,選擇常規>設備管理并信任您的證書。

  • 運行flutter run,啟動flutter應用程序。


到此,相信大家對“Flutter的搭建與運行方式”有了更深的了解,不妨來實際操作一番吧!這里是億速云網站,更多相關內容可以進入相關頻道進行查詢,關注我們,繼續學習!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

新龙县| 洪雅县| 桂东县| 岳阳县| 科技| 织金县| 乌审旗| 凤阳县| 大竹县| 福贡县| 嵩明县| 扶绥县| 洞口县| 乐安县| 丰都县| 桓台县| 韶关市| 旌德县| 门源| 扎赉特旗| 文成县| 光泽县| 昭通市| 洛阳市| 河曲县| 台江县| 卓尼县| 抚州市| 江西省| 偃师市| 灵璧县| 甘孜县| 清苑县| 遵化市| 响水县| 滁州市| 柘荣县| 长兴县| 乌拉特中旗| 慈利县| 阜阳市|