Flutter入門教程

一、起源

Flutter在2018 世界移動大會發布第一個beta版本,這是谷歌發佈的一套移動UI框架 ,可以快速在iOS和Android上構建高質量的原生用戶界面。 能夠做到一套代碼兩個終端運行。並且Flutter是完全免費、開源的。
Flutter組件採用現代響應式框架構建,這是從React中獲得的靈感,中心思想是用組件(widget)構建你的UI。 組件描述了在給定其當前配置和狀態時他們顯示的樣子。當組件狀態改變,組件會重構它的描述(description),Flutter會對比之前的描述, 以確定底層渲染樹從當前狀態轉換到下一個狀態所需要的最小更改。

二、語言

flutter 使用dart作爲其開發語言。dart是谷歌開發的計算機編程語言,後來被Ecma (ECMA-408)認定爲標準 。它被用於web、服務器、移動應用 和物聯網等領域的開發。dart是面向對象的、類定義的、單繼承的語言。它的語法類似C語言,可以轉譯爲JavaScript,支持接口(interfaces)、混入(mixins)、抽象類(abstract classes)、具體化泛型(reified generics)、可選類型(optional typing)和sound type system。如果你沒有過開發經驗,不建議直接上手flutter。

三、flutter安裝

瞭解完flutter的來源後,讓我們開始安裝flutter,首先根據你的系統,windows,macos,或者linux系統選擇不同的flutter sdk下載安裝,這裏推薦flutter 中文網https://flutterchina.club,我以windows爲例
1、使用鏡像,將以下兩個環境變量加入到用戶環境變量中
PUB_HOSTED_URL https://pub.flutter-io.cn
FLUTTER_STORAGE_BASE_URL https://storage.flutter-io.cn
2、安裝flutter sdk ,https://flutter.dev/docs/development/tools/sdk/releases#windows,建議選擇穩定版本
在這裏插入圖片描述
3、下載完成後,將其解壓到你想要的路徑內。然後嘗試運行flutter命令
要在終端全局運行 flutter 命令, 你需要添加以下環境變量到系統PATH:

轉到 “控制面板>用戶帳戶>用戶帳戶>更改我的環境變量”
在“用戶變量”下檢查是否有名爲“Path”的條目:
如果該條目存在, 追加 flutter\bin的全路徑,使用 ; 作爲分隔符.
如果條目不存在, 創建一個新用戶變量 Path ,然後將 flutter\bin的全路徑作爲它的值.
在“用戶變量”下檢查是否有名爲”PUB_HOSTED_URL”和”FLUTTER_STORAGE_BASE_URL”的條目,如果沒有,也添加它們。
重啓Windows以應用此更改
4、運行flutter doctor
打開一個新的命令提示符或PowerShell窗口並運行以下命令以查看是否需要安裝任何依賴項來完成安裝:

flutter doctor

將會提示以下信息

[-] Android toolchain - develop for Android devices
• Android SDK at D:\Android\sdk
✗ Android SDK is missing command line tools; download from https://goo.gl/XxQghQ
• Try re-installing or updating your Android SDK,
visit https://flutter.io/setup/#android-setup for detailed instructions.

四、編輯器

開發任何應用都需要編輯器,flutter提供了,IntelliJ IDEA,Android Studio和VS Code的插件,我現在Android Studio爲例,如果你是一個android開發者,那這一步將會非常簡單,若不是,請看以下步驟。
1、安裝android Studio ,從官網下載最新版本 https://developer.android.google.cn/studio/
2、安裝過程中,若有選擇android SDK,請勾選,若無,我們可以手動下載sdk。
在這裏插入圖片描述
3、studio 安裝成功後,需要安裝兩個插件 dart和flutter,在file->setting->plugins 中搜索這兩個插件並進行安裝。成功後,重啓android studio
ps:手動安裝sdk,打開android Studio->tools->sdk manager
在這裏插入圖片描述
點擊下載按鈕即可下載sdk

五、運行flutter demo

選擇 File>New Flutter Project
選擇 Flutter application 作爲 project 類型, 然後點擊 Next
輸入項目名稱 (如 myapp), 然後點擊 Next
點擊 Finish
等待Android Studio安裝SDK並創建項目.
創建完成後。找到 lib/main.dart,這是項目主程序代碼
在控制檯輸入 flutter doctor
在這裏插入圖片描述
這裏我同時安裝了vscode ,請忽略,現在提示沒有發現設備,我們可以通過創建虛擬機或者使用真機調試
1、創建虛擬機 tools->AVD manager 創建一個虛擬機
2、真機調試 使用usb鏈接手機,打開手機的開發者模式,允許usb調試
再次運行flutter doctor,無問題後,運行flutter run ,應用將成功運行。
ps :兩種方式只選一種即可。
flutter常用命令
在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章