flutter填坑之旅(環境搭建篇)

自從Google 在 2018 世界移動大會上發佈 Flutter 的 Beta 版本,看看官方的介紹Flutter widgets are built using a modern framework that takes inspiration from React. The central idea is that you build your UI out of widgets. Widgets describe what their view should look like given their current configuration and state. When a widget’s state changes, the widget rebuilds its description, which the framework diffs against the previous description in order to determine the minimal changes needed in the underlying render tree to transition from one state to the next.(Flutter Widget採用現代響應式框架構建,這是從 React 中得到的靈感,中心思想是用widget構建你的UI。 Widget描述了他們的視圖在給定其當前配置和狀態時應該看起來像什麼。當widget的狀態發生變化時,widget會從新構建UI,Flutter會對比先後變化的不一樣, 以肯定底層渲染樹從一個狀態轉換到下一個狀態所需的最小更改)看到這裏是否是也有些想要親自試試的衝動呢html

無論玩什麼框架第一步就是環境部署java

1、 安裝 java jdk

1)  JDK下載地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html. 
![在這裏插入圖片描述](https://img-blog.csdnimg.cn/20190816090010894.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw,size_16,color_FFFFFF,t_70)
  1. 登陸後選擇符合本身電腦的版本進行下載
    在這裏插入圖片描述
  2. 雙擊開始安裝(步驟不作詳細介紹,不明白執行百度)
    找到安裝後的jdk
    在這裏插入圖片描述
    右鍵電腦屬性,打開高級系統設置。
    在這裏插入圖片描述
    在這裏插入圖片描述
    在這裏插入圖片描述
  3. 環境變量配置
    在這裏插入圖片描述
    在這裏插入圖片描述
  4. 安裝成功後cmd檢測

2、 安裝 android studio

android studio 下載https://developer.android.google.cn/studioandroid

在這裏插入圖片描述
安裝好studio後再
點擊file > settings > plugins > marketplace 安裝flutter 和dart
在這裏插入圖片描述
直接點擊install
在這裏插入圖片描述web

3、 下載 Flutter Sdk

Flutter sdk下載https://flutter.dev/docs/development/tools/sdk/releases
在這裏插入圖片描述架構

解壓到你的文件目錄直接點擊flutter_console.bat,而後輸入flutter doctor檢測你的flutter 依賴
在這裏插入圖片描述
若是想在電腦任何地方都是用就依然須要配置flutter 環境變量(同配置java jdk步驟同樣)
在這裏插入圖片描述
將你的flutter 路徑添加到path中oracle

4、 安裝 vscode

下載地址 https://code.visualstudio.com/
在這裏插入圖片描述
打開使用flutter create projectname建立flutter 項目
在這裏插入圖片描述
在這裏插入圖片描述框架

插上真機或者打開模擬機,使用flutter doctor 進行檢查看見 Connected device(1 available) 標識已經鏈接真機
在這裏插入圖片描述
開始運行flutter run進行項目測試
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
到這裏環境搭建就完成了,第一個demo也跑起來了ide

相關文章
相關標籤/搜索