13518219792
Flutter可能是我們做移動端或者前端聽的比較多的一個名詞。目前前端和移動端都趨向于向大前端發展。我們都知道由于Android ios 前端的運行環境、發開語言、平臺特性的不同，導致同時學習三個平臺的學習成本是極高的。所以React Native 、Weex等跨平臺技術應運而生了，而這些跨平臺技術由于偏高層解釋性的特性就會出現運行效率和對原生依賴度高耦合性高等問題。隨著2018年flutter beta1正式發布，一種更優美更高效的跨平臺技術進入我們的視線。
漢源網站制作公司哪家好，找創新互聯建站！從網頁設計、網站建設、微信開發、APP開發、成都響應式網站建設公司等網站項目制作，到程序開發，運營維護。創新互聯建站于2013年創立到現在10年的時間，我們擁有了豐富的建站經驗和運維經驗，來保證我們的工作的順利進行。專注于網站建設就選創新互聯建站。
但是RN也并沒有被廣泛的接納，從阿里開始使用到放棄，里面的很多坑都繞不過去。寫一次到處跑確實很誘人，從企業角度講，可以節省大量的人力，但是卻忽略了一個很基礎的問題，不同平臺是否希望如此，蘋果是否會愿意自己的生態被打破，不同平臺的特性是否應該被歸為一致。
環境準備階段：
android-studio 版本：android-studio-ide-191.5977832-windows.exe 3.5.2
flutter版本：stable 版本 （完成系統環境變量 path配置）
dart版本：2.12.0 （完成系統環境變量 path配置）
完成相關軟件安裝。
配置flutter相關SDK及andriod studio路徑：
flutter config --android-sdk="C:\Users\Administrator\AppData\Local\Android\Sdk"
flutter config --android-studio-dir="D:\Program Files\Android\Android Studio"
執行flutter doctor運行成功。
夜神模擬器地址：D:\Program Files\Nox\bin （完成系統環境變量 path配置）
andriod SDK tools：C:\Users\Administrator\AppData\Local\Android\Sdk\platform-tools （完成系統環境變量 path配置）
nox_adb.exe connect 127.0.0.1:62001
dart SDK:D:\software\dartsdk-windows-x64-release\dart-sdk\bin
將C:\Users\Administrator\AppData\Local\Android\Sdk\platform-tools 下面adb.exe 復制至D:\Program Files\Nox\bin覆蓋
adb.exe，此外重新復制adb.exe命名為nox_adb.exe，替換原有的nox_adb.exe。
cdm 輸入nox_adb version 及adb version發現版本一致。
啟動野神模擬器，輸入adb devices發現虛擬設備，執行flutter devices發現 127.0.0.1:62001 設備。
修改C:\learn_flutter\first_flutter\android\gradle\wrapper\gradle-wrapper.properties
distributionUrl=
修改C:\learn_flutter\first_flutter\android\build.gradle
buildscript {
ext.kotlin_version = '1.3.50'
repositories {
// google()
// jcenter()
maven { url ' ' }
maven { url ' ' }
maven { url ' ' }
}
}
allprojects {
repositories {
// google()
// jcenter()
maven { url ' ' }
maven { url ' ' }
maven { url ' ' }
}
}
修改：C:\win-flutter\flutter\packages\flutter_tools\gradle\flutter.gradle
buildscript {
repositories {
// google()
// jcenter()
maven { url ' ' }
maven { url ' ' }
maven { url ' ' }
}
dependencies {
classpath 'com.android.tools.build:gradle:4.1.0'
}
}
//private static final String DEFAULT_MAVEN_HOST = " ";
private static final String DEFAULT_MAVEN_HOST = " ";
修改：C:\win-flutter\flutter\packages\flutter_tools\gradle\resolve_dependencies.gradle
repositories {
google()
jcenter()
maven {
//url "$storageUrl/download.flutter.io"
url " "
}
}
執行 flutter run啟動成功。
環境搭建坑點在于JDK兼容問題以及網絡問題。
如果和我一樣，用慣了VS Code來開發項目的話，那就跟我一起來配置一下如何在VS Code里運行flutter項目。
1.在VS Code里安裝擴展：
2.在VScode上打開打開終端，快捷鍵：Ctrl+~（Tab上一個鍵），在終端上輸入：flutter create flutter_app02，即可創建完成！
也可以把之前的項目放到工作區
3.在終端中運行命令：flutter run
運行的時候你會發現手機提示你安裝個app，點擊安裝完成，項目就在手機上顯示了，下圖是運行成功的提示。
下圖是手機效果：
如果報錯的話，運行下清緩存的命令：flutter clean，把文件夾.gradle刪掉，然后flutter run重新跑下項目。
