2018-10-25

初玩 Flutter

環境:win7 x64 + vscode + android studio
參考網頁:https://jonny-huang.github.io/flutter/flutter_001/

依參考網頁的步驟做就行了,但…我在建立首個 Flutter project 之前我有發現我在建立  AVD 時的「Emulated Performance」的 Graphics 是灰的不能選…而且實際啟動 AVD 發現 CPU (i5 4460) 全核是 100% ,然後溫度大概維持在 74度 左右,我當下確實電腦還有在跑其他東西,但使用率 100% 我倒是第一次見過…感覺上是因為都是用軟體模擬的關係造成的…就網路上一直找辦法。


我本來以為會不會是因為我顯卡是 AMD RX560 的關係…但後來找了國外的文章後發現,主要是 kernel image 的關係,因為是在 windows 且 cpu 是 intel 的關係,我應該要下載 android 系統下的 intel x86 atom 的 image 來模擬才對…步驟如下:

打開 android studio ,在工具列找到 tools ,然後點 sdk manager ,在「android sdk」的項目中的「SDK Platforms」頁面中去將「show packages details」打勾,並在相對的 android os version 中找到其相關的 intel x86 atom system image 來下載使用

這樣在 AVD 中的 Graphics 就有可以選擇了
-------
另外遇到的一個問題是…
我在建立了第一個 Flutter project ,在沒任何編輯增減的情況,直接按 F5 來 RUN 在 AVD 中遭遇到了狀況…出現
Launching lib\main.dart on Android SDK built for x86 64 in debug mode...
* Error running Gradle:
Exit code 1 from: xxxx\flutter-app\first\android\gradlew.bat app:properties:
Project evaluation failed including an error in afterEvaluate {}. Run with --stacktrace for details of the afterEvaluate {} error.

FAILURE: Build failed with an exception.

* Where:

Build file 'xxxx\flutter-app\first\android\app\build.gradle' line: 25

* What went wrong:

A problem occurred evaluating project ':app'.

> Could not resolve all files for configuration 'classpath'.

   > Could not find lint-gradle-api.jar (com.android.tools.lint:lint-gradle-api:26.1.2).

     Searched in the following locations:

         https://jcenter.bintray.com/com/android/tools/lint/lint-gradle-api/26.1.2/lint-gradle-api-26.1.2.jar

* Try:

Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 0s

Please review your Gradle project setup in the android/ folder.
Exited (sigterm)

我就沒辦法和參考網頁說的一樣在 AVD 出現東西,反而是在 vscode 的偵錯區出現上述的東西,上網找了很多方法,大多數的解法是說在 flutter project/android/build.gradle 中的 buildscript {} 和 allproject {} 中的 repositories {} 加上 google() ,如下
buildscript {
    repositories {
        google()
        jcenter()
    }

    dependencies {
        classpath 'com.android.tools.build:gradle:3.1.2'
    }
}

allprojects {
    repositories {
        google()
        jcenter()
    }
}

可重點是網路上所講的 flutter 的版本是大概距我現在 10/25 有一個多月前的版本,當時好像真的有這個狀況,但我現在用的 flutter 版本已經在 github 上更改過這個問題了,所以我的 build.gradle 中的已經是有加入 google() 了,但還是有上述的問題…

後來再翻其他國外論壇,找到了一個大神的解法…就是要到你放 flutter sdk 的目錄下,從 /packages/flutter_tools/gradle/ 中打開 flutter.gradle 檔案,然後找到 buildscript {} ,把 repositories {} 中的 maven {} 移到 jcenter() 之前,就像下面的
buildscript {
    repositories {
        maven {
            url 'https://dl.google.com/dl/android/maven2'
        }
        jcenter()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.1.2'
    }
}

如此一來,在 vscode 按 F5 後就可以在 AVD 中看到「Flutter Demo Home Page」的 app 畫面了

還好沒有一開始就打擊我讓我不想玩了

沒有留言: