1. 程式人生 > >Flutter快速入門 五步搞定Flutter環境配置

Flutter快速入門 五步搞定Flutter環境配置

Flutter是什麼?

Flutter是一款移動應用程式SDK,一份程式碼可以同時生成iOS和Android兩個高效能、高保真的應用程式。

Flutter目標是使開發人員能夠交付在不同平臺上都感覺自然流暢的高效能應用程式。我們相容滾動行為、排版、圖示等方面的差異。

為什麼要使用Flutter?

Flutter有什麼優勢?它可以幫助你:

  • 提高開發效率

同一份程式碼開發iOS和Android 用更少的程式碼做更多的事情

  • 輕鬆迭代

在應用程式執行時更改程式碼並重新載入(通過熱過載) 修復崩潰並繼續從應用程式停止的地方進行除錯

  • 建立美觀,高度定製的使用者體驗

受益於使用Flutter框架提供的豐富的Material Design和Cupertino(iOS風格)的widget 實現定製、美觀、品牌驅動的設計,而不受原生控制元件的限制 主要有以下特點

快速開發

毫秒級的熱過載,修改後,您的應用介面會立即更新。使用豐富的、完全可定製的widget在幾分鐘內構建原生介面。

Flutter的熱過載可幫助您快速地進行測試、構建UI、新增功能並更快地修復錯誤。在iOS和Android模擬器或真機上可以在亞秒內過載,並且不會丟失狀態。 快速開發

富有表現力和靈活的UI

快速釋出聚焦於原生體驗的功能。分層的架構允許您完全自定義,從而實現難以置信的快速渲染和富有表現力、靈活的設計。

使用Flutter內建美麗的Material Design和Cupertino(iOS風格)widget、豐富的motion API、平滑而自然的滑動效果和平臺感知,為您的使用者帶來全新體驗。 富有表現力和靈活的UI

富有表現力和靈活的UI 富有表現力和靈活的UI

原生效能

Flutter包含了許多核心的widget,如滾動、導航、圖示和字型等,這些都可以在iOS和Android上達到原生應用一樣的效能。

使用Flutter的現代、響應式框架,和一系列基礎widget,輕鬆構建您的使用者介面。使用功能強大且靈活的API(針對2D、動畫、手勢、效果等)解決艱難的UI挑戰。

class CounterState extends State<Counter> {
  int counter = 0;

  void increment() {
    // 告訴Flutter state已經改變, Flutter會呼叫build(),更新顯示
setState(() { counter++; }); } Widget build(BuildContext context) { // 當 setState 被呼叫時,這個方法都會重新執行. // Flutter 對此方法做了優化,使重新執行變的很快 // 所以你可以重新構建任何需要更新的東西,而無需分別去修改各個widget return new Row( children: <Widget>[ new RaisedButton( onPressed: increment, child: new Text('Increment'), ), new Text('Count: $counter'), ], ); } }

心動不如行,動快速入門

1.下載flutter SDK(此步驟可以省略通過android studio安裝亦可)

git clone -b master https://github.com/flutter/flutter.git
./flutter/bin/flutter --version

當然也可以直接下載

https://github.com/flutter/flutter/tags

2.下載完解壓配置環境變數

;G:\flutter\flutter_windows_v0.7.3-beta\flutter\bin

3.開啟一個新的命令提示符或PowerShell視窗並執行以下命令以檢視是否需要安裝任何依賴項來完成安裝:

flutter doctor

這裡寫圖片描述 可以看到,檢查的有android sdk,android studio版本等等。對於android開發者相信這些都配置好了。

4.為android 安裝Flutter環境

File -> Settings -> Plugins -> Browse Respositories -> 搜尋`Flutter`
點選install 重啟android studio。會自動安裝dart外掛。

這裡寫圖片描述

5.建立工程

  1. 選擇 File>New Flutter Project
  2. 選擇 Flutter application 作為 project 型別, 然後點選 Next
  3. 輸入專案名稱 (如 myapp), 然後點選 Next
  4. 點選 Finish
  5. 等待Android Studio安裝SDK並建立專案.(ps:首次載入過慢直接關閉AS重啟即可)

這裡寫圖片描述

最終執行效果

這裡寫圖片描述

Flutter的學習之路才剛剛開始。。。