1. 程式人生 > >初識Flutter——在AS搭建環境及第一個Flutter APP

初識Flutter——在AS搭建環境及第一個Flutter APP

Flutter中文網
Windows:
開啟gitbash,輸入:

新增環境變數

轉到 “控制面板>使用者帳戶>使用者帳戶>更改我的環境變數”
在“使用者變數”下檢查是否有名為“Path”的條目:
如果該條目存在, 追加 flutter\bin的全路徑,使用 ; 作為分隔符
如果條目不存在, 建立一個新使用者變數 Path ,然後將 flutter\bin的全路徑作為它的值.
在“使用者變數”下檢查是否有名為”PUB_HOSTED_URL”和”FLUTTER_STORAGE_BASE_URL”的條目,如果沒有,也新增它們。
其中,Path中新增的 為flutter\bin的全路徑,就是你clone下來的哪個位置。
這裡寫圖片描述

新增好後,關了再開看一下是否設定上去了
開啟一個新的命令提示符或PowerShell視窗並執行以下命令以檢視是否需要安裝任何依賴項來完成安裝:
(我用的cmd)

flutter doctor

若出現不是‘flutter doctor’內部命令,就檢查環境變數設定是否正確
還有一個flutter doctor PowerShell.exe不是內部命令
然後下載了一個Git-2.18.0-64-bit.exe就好了
如出現以下就說明好了:

例如:
[-] 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命令(如flutter doctor)時,它會為我們下載它自己的依賴項並自行編譯。

一旦你安裝了任何缺失的依賴,再次執行flutter doctor命令來驗證你是否已經正確地設定了。

該flutter工具使用Google Analytics匿名報告 功能使用情況統計資訊和基本崩潰報告。 這些資料用於幫助改進Flutter工具。Analytics不是一執行或在執行涉及flutter config的任何命令時就傳送, 因此您可以在傳送任何資料之前退出分析。要禁用報告,請執行flutter config –no-analytics並顯示當前設定,然後執行flutter config。

也就是在cmd中使用flutter config –no-analytics關閉自動報告功能(報告給Google)。

AndroidStdio設定:

沒有as的:(這個我沒試過,因為我有)
1.下載並安裝 Android Studio.
2.啟動Android Studio,然後執行“Android Studio安裝嚮導”。這將安裝最新的Android SDK,Android SDK平臺工具和Android SDK構建工具,這是Flutter為Android開發時所必需的。

有AS的:
在File->settings->plugins->下面的Browserepositories…->分別搜尋Dart,Flutter並下載->在settings中的Languages&Frameworks下看有沒有Dart和Flutter,有就說明好了。

連線自己的裝置:
要準備在Android裝置上執行並測試您的Flutter應用,您需要安裝Android 4.1(API level 16)或更高版本的Android裝置(自己的手機就可以,我沒用模擬器).模擬器看官網咖,連線在文章最上面。

1.在您的裝置上啟用 開發人員選項 和 USB除錯 。詳細說明可在Android文件中找到。
2.使用USB將手機插入電腦。如果您的裝置出現提示,請授權您的計算機訪問您的裝置。
3.在終端中,執行 flutter devices 命令以驗證Flutter識別您連線的Android裝置。
4.執行啟動您的應用程式 flutter run。

實際你建立一個專案後,要執行在手機上,直接run(綠三角)就可以。

建立一個Flutter APP

File->New->New Flutter Project
選Flutter Application ->Next
起App名字 ->Next
起包名 ->Finish

然後它會給你生成了很多程式碼,你可以執行一下,然後修改Text內容,再點選那個黃色閃電,會發現手機中的Text內容變了,而且速度很快,App並沒有重啟,這就是Flutter的一大方便之處,就第一次執行比較慢,而後只要點那個紅色閃電就可以更新變化。但是有一點需要注意,你關掉APP,再開一次,發現又回到了之前的文字,也就是說修改後點選黃色閃電,它並沒有在手機上改動它的程式碼,只是效果改變了。

Hello Word!

刪掉lib/main.dart中所有程式碼,然後替換為:

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Welcome to Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Welcome to Flutter'),
        ),
        body: new Center(
          child: new Text('Hello World'),
        ),
      ),
    );
  }
}

執行後:
這裡寫圖片描述

這第一個App了,當然它只是體現出了一部分Dart語言寫Android與Java語言寫Android,官網上還有一個例子看:連結。有很詳細的過程。