天天看點

【Flutter 專題】03 圖解第一個程式 Hello World! #yyds幹貨盤點#

      無論是學習哪門語言,第一個程式都是 Hello World! 小菜最近在學習 Flutter 是以整理一下在第一個測試 Demo 中遇到的一些問題。

      參考資料:Flutter 中文網

實操圖解

  1. 打開 AndroidStudio -> Start a new Flutter project 建立一個新的 Flutter 工程,如圖:
【Flutter 專題】03 圖解第一個程式 Hello World! #yyds幹貨盤點#
  1. 填寫項目資訊,Project name 項目名稱必須為小寫或包含下劃線小寫方式,如圖:
【Flutter 專題】03 圖解第一個程式 Hello World! #yyds幹貨盤點#
【Flutter 專題】03 圖解第一個程式 Hello World! #yyds幹貨盤點#
  1. 正常情況下,填寫好項目名稱和項目路徑即可,但是小菜這裡提示 Flutter SDK path not given,如圖:
【Flutter 專題】03 圖解第一個程式 Hello World! #yyds幹貨盤點#
  1. 確定 Flutter 和 Dart 插件安裝成功,【Mac 環境】根據指令行可查找 Flutter 目錄,終端 -> export $PATH 檢視各配置項目錄;【Windows 環境】相對容易可以在檔案夾中直接找到 Flutter 路徑,如圖:
【Flutter 專題】03 圖解第一個程式 Hello World! #yyds幹貨盤點#
【Flutter 專題】03 圖解第一個程式 Hello World! #yyds幹貨盤點#
  1. 打開 AndroidStudio 可以直接填寫在 Flutter SDK path 中,也可以在 AndroidStudio -> Setting -> Languages & Frameworks -> Flutter 中添加配置,如圖:
【Flutter 專題】03 圖解第一個程式 Hello World! #yyds幹貨盤點#
  1. 繼續進行下一步,填寫公司名即包名,注意也隻能是小寫,這裡可以選擇支援 Kotlin/Swift,之後 finish,如圖:
【Flutter 專題】03 圖解第一個程式 Hello World! #yyds幹貨盤點#
  1. 之後會進入工程建立頁面,第一次建立,會是一個漫長漫長的過程,如圖:
【Flutter 專題】03 圖解第一個程式 Hello World! #yyds幹貨盤點#
  1. 手機連接配接電腦,運作即可,如圖:
【Flutter 專題】03 圖解第一個程式 Hello World! #yyds幹貨盤點#

注意事項

問題一:Flutter 目前版本非最新版本
解決方案:終端 -> flutter upgrade 更新版本即可
【Flutter 專題】03 圖解第一個程式 Hello World! #yyds幹貨盤點#
問題二:"..." is not a valid Dart package name.
解決方案:工程根目錄檔案夾不可為大些字母
【Flutter 專題】03 圖解第一個程式 Hello World! #yyds幹貨盤點#
問題三:找不到 New Flutter Project...
解決方案:
  1. 建議更新 AndroidStudio 至少 3.0 以上,小菜目前測試用 3.1.2;
  2. 重新開機 AndroidStudio;
  3. 确認 Flutter 配置環境是否正常

繼續閱讀