本套教程的優(yōu)點(diǎn),提供一種思路宠哄,本人iOS開發(fā)者 壹将。按照自己的思路走下去 ,遇到問(wèn)題解決問(wèn)題 毛嫉,不會(huì)什么學(xué)習(xí)什么 诽俯。從基本的網(wǎng)絡(luò)入手(上傳,下載) -常用控件-- 上刷拉新狱庇。復(fù)雜項(xiàng)目-- 混合項(xiàng)目本地調(diào)用 惊畏。
flutter 不能替代原生,目前為止密任,大多數(shù)的底層框架很不完善 颜启。包括音視頻,直播等浪讳。
注意:flutter是寫界面缰盏,動(dòng)畫,手勢(shì)淹遵,交互口猜。 并且沒(méi)有使用原生的api,直接走的是硬件支持 透揣。不能接受的繞行济炎。中文官網(wǎng)文檔 --- 前期準(zhǔn)備
一.配置環(huán)境
1.下載flutter(需要翻墻),或者GitHub 下載
2. 解壓到一個(gè)目錄下例如home 目錄
~ #這就是home目錄的符號(hào)
3. 配置環(huán)境變量
vi $HOME/.bash_profile
按【i】鍵,添加下面代碼辐真,然后按【esc】推出輸入须尚,
之后輸入 【:wq】退出編輯
# flutter setting
# ~/flutter
export PATH=$HOME/flutter/bin:$PATH
export FLUTTER_ROOT=$HOME/flutter
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
4. 驗(yàn)證配置是否成功
運(yùn)行 source $HOME/.bash_profile 刷新當(dāng)前終端窗口.
source $HOME/.bash_profile
通過(guò)運(yùn)行flutter/bin命令驗(yàn)證目錄是否在已經(jīng)在PATH中:
echo $PATH
二. 在IDE中開發(fā)flutter
1. 編譯器的選擇。
你可以使用自己喜歡的開發(fā)工具去開發(fā) Flutter 應(yīng)用侍咱。不過(guò)官方給了兩個(gè)建議耐床,Android Studio(google自家的東西) 與 VS Code(用的人最多的)。xcode(先別想了楔脯,調(diào)試的時(shí)候用一下就得了)
我們選擇VSCODE,必須安裝的還有XCODE(調(diào)試使用) 和 android studio(調(diào)試使用) 撩轰,更新到最新版本 。
1. 為vscode 安裝 編譯環(huán)境/插件
熟悉vs code的使用
安裝 dart 和 fultter 的插件環(huán)境
2. 為vscode 安裝 編譯環(huán)境/插件
找到vscode 下方的terminal面板 運(yùn)行
flutter doctor
復(fù)制下方一條一條命令運(yùn)行。費(fèi)時(shí)間有耐心堪嫂,必須翻墻偎箫,不翻墻太費(fèi)勁了。
3.! No devices available 問(wèn)題 镜廉。
USB連接一個(gè)真機(jī) ,或者運(yùn)行
flutter devices // 查看連接的設(shè)備列表
flutter emulators // 查看模擬器設(shè)備列表
4.創(chuàng)建一個(gè)項(xiàng)目
flutter create first_flutter // 不可以使用大寫愚战,等待一會(huì)就好
5主要目錄說(shuō)明
lib 主要開發(fā)位置娇唯,dart代碼位置 ,main函數(shù)主入口 寂玲。
ios 含有Xcode代碼塔插,可以使用Xcode打開適配證書,網(wǎng)絡(luò)等拓哟。
android 同上 想许。
其他項(xiàng)目配置文件和版本控制文件先不說(shuō) 。
6運(yùn)行項(xiàng)目
flutter run // 連接真機(jī)直接安裝断序,或者第3步模擬器運(yùn)行
證書問(wèn)題打開Xcode或者 android studio 配置好重新重新運(yùn)行 流纹。
Flutter 常用命令
flutter --version #查看 Flutter 版本
flutter -h 或者 --help #打印所有命令行用法信息
flutter analyze #分析項(xiàng)目的 Dart 代碼
flutter build #Flutter 構(gòu)建命令
flutter channel #列表或開關(guān) Flutter 通道
flutter clean #刪除構(gòu)建/目錄
flutter config #配置 Flutter 設(shè)置
flutter create #創(chuàng)建一個(gè)新的 Flutter 項(xiàng)目
flutter devices #連接設(shè)備的列表
flutter doctor #顯示相關(guān)安裝工具的信息
flutter drive #為當(dāng)前項(xiàng)目運(yùn)行 FLutter 驅(qū)動(dòng)程序測(cè)試
flutter emulators #列出、啟動(dòng)和創(chuàng)建模擬器
flutter format #格式一個(gè)或者多個(gè) Dart 文件
flutter fuchsia_reload #在 Fuchsia 上進(jìn)行熱重載
flutter help #顯示幫助信息的 Flutter
flutter install #在附加設(shè)備刪安裝 Flutter 應(yīng)用程序
flutter logs #顯示用于運(yùn)行 Flutter 應(yīng)用程序的日志輸出
flutter packages #用于管理 FLutter 包
flutter precache #填充了 Flutter 工具的二進(jìn)制工件緩存
flutter run #在附加設(shè)備刪運(yùn)行 Flutter 應(yīng)用程序
flutter screenshot #從一個(gè)連接的設(shè)備截圖
flutter stop #停止在附加設(shè)備上的 Flutter 應(yīng)用程序
flutter test #對(duì)當(dāng)前項(xiàng)目的 Flutter 單元測(cè)試
flutter trace #開始并停止跟蹤運(yùn)行的 Flutter 應(yīng)用程序
flutter upgrade #升級(jí) Flutter 副本
小問(wèn)題較多违诗,不寫了 漱凝。有什么問(wèn)題下面留言 。幫你解決 诸迟。
運(yùn)行在linux上的web項(xiàng)目 環(huán)境配置
下載或者clon Flutter sdk /
任意新建一個(gè)目錄例如 flutterSDK
cd ~
mkdir flutterSDK
cd flutterSDK
//解壓你下載的文件名稱
tar xf 《#下載的文件目錄#》
接下來(lái)把flutter sdk
茸炒、dart sdk
和webhubwiz
執(zhí)行文件目錄加入PATH
環(huán)境變量:
~/hubwiz$ export PATH=$PATH:$HOME/flutterSDK/flutter/bin
~/hubwiz$ export PATH=$PATH:$HOME/flutterSDK/flutter/bin/cache/dart-sdk/bin
~/hubwiz$ export PATH=$PATH:$HOME/flutterSDK/flutter/.pub-cache/bin
命令行運(yùn)行一下,看看環(huán)境是否配置成功
flutter --version && dart --version
進(jìn)入工作目錄 例如 ~/flutterWebWorkSpace
cd ~/flutterWebWorkSpace
git clone https://github.com/flutter/flutter_web.git
flutter pub global activate webdev //安裝webdev包
cd flutter_web/examples/hello_world ## 進(jìn)入到下載好的web項(xiàng)目
flutter packages upgrade ## 安裝依賴包
webdev serve ## 啟動(dòng)web服務(wù)
檢查防火墻和安全組設(shè)置
本地訪問(wèn)http://localhost:8080 阵苇,其他端訪問(wèn) // ip:8080
問(wèn)題 更改吧brew 國(guó)內(nèi)源
cd
curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install >> brew_install
vim brew_install
更改腳本中的資源鏈接壁公,替換成中國(guó)科學(xué)技術(shù)大學(xué)的鏡像
就是把這兩句
BREW_REPO = “https://github.com/Homebrew/brew“.freeze
CORE_TAP_REPO = “https://github.com/Homebrew/homebrew-core“.freeze
更改為這兩句
BREW_REPO = "https://mirrors.ustc.edu.cn/brew.git".freeze
CORE_TAP_REPO = "https://mirrors.ustc.edu.cn/homebrew-core.git".freeze
rm -rf /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core
git clone git://mirrors.ustc.edu.cn/homebrew-core.git/ /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core --depth=1
/usr/bin/ruby brew_install