flutter初體驗(yàn):環(huán)境配置

前言

Flutter是谷歌的移動(dòng)UI框架,可以快速在iOS和Android上構(gòu)建高質(zhì)量的原生用戶界面。 Flutter可以與現(xiàn)有的代碼一起工作。在全世界,F(xiàn)lutter正在被越來越多的開發(fā)者和組織使用,并且Flutter是完全免費(fèi)、開源的。

  • 快速開發(fā)
    • 毫秒級(jí)的熱重載,修改后,您的應(yīng)用界面會(huì)立即更新。使用豐富的、完全可定制的widget在幾分鐘內(nèi)構(gòu)建原生界面。
  • 富有表現(xiàn)力和靈活的UI
    • 快速發(fā)布聚焦于原生體驗(yàn)的功能。分層的架構(gòu)允許您完全自定義,從而實(shí)現(xiàn)難以置信的快速渲染和富有表現(xiàn)力、靈活的設(shè)計(jì)。
  • 原生性能
    • Flutter包含了許多核心的widget,如滾動(dòng)、導(dǎo)航、圖標(biāo)和字體等,這些都可以在iOS和Android上達(dá)到原生應(yīng)用一樣的性能。

官方說的這么牛x,能不了解一下嗎!本系列為本人學(xué)習(xí)flutter的學(xué)習(xí)筆記,重在記錄學(xué)習(xí)中遇到的問題。

環(huán)境配置

Flutter 1.0.0
Dart 2.1.0 (build 2.1.0-dev.9.4 f9ebf21297)
Xcode Version 10.1 (10B61)
IntelliJ IDEA 2018.3.2 (Ultimate Edition)
VS Code 1.30.1 (1.30.1)

安裝與環(huán)境搭建

參考flutter中文網(wǎng)或者自行Google,前人之述備矣,此處不再贅述。

配置編輯器

本人為iOS開發(fā),未安裝過Android Studio,所以不具備安卓開發(fā)環(huán)境。
為了親自體驗(yàn)一下不同編輯器,所以安裝了IntelliJ IDEAVS Code體驗(yàn)flutter開發(fā)。VS Code的配置參考官方教程。IntelliJ IDEA的配置參考官方教程。IntelliJ IDEA需要安裝flutter和dart插件,在IntelliJ IDEA安裝插件需要翻墻,也可以去官方插件庫搜索插件從磁盤安裝。從磁盤安裝插件極有可能重啟應(yīng)用后報(bào)錯(cuò)閃退,修復(fù)方法是在應(yīng)用目錄下~/Library/Application Support/<PRODUCT><VERSION>中把安裝的插件刪除即可。推薦翻墻從應(yīng)用內(nèi)搜索插件安裝插件。

[圖片上傳中...(WX20181228-112812@2x.png-e23a9d-1545968380976-0)]

常用命令

  • flutter doctor: 堅(jiān)持flutter開發(fā)環(huán)境信息.
  • flutter create: 創(chuàng)建一個(gè)新的flutter項(xiàng)目.
  • flutter run: 在已運(yùn)行的設(shè)備上運(yùn)行flutter應(yīng)用.

更多命令直接運(yùn)行flutter進(jìn)行查看。

Global options:
-h, --help                  Print this usage information.
-v, --verbose               Noisy logging, including all shell commands
                            executed.
                            If used with --help, shows hidden options.

-d, --device-id             Target device id or name (prefixes allowed).
    --version               Reports the version of this tool.
    --suppress-analytics    Suppress analytics reporting when this command runs.
    --bug-report            Captures a bug report file to submit to the Flutter
                            team.
                            Contains local paths, device identifiers, and log
                            snippets.

    --packages              Path to your ".packages" file.
                            (required, since the current directory does not
                            contain a ".packages" file)

Available commands:
  analyze                  Analyze the project's Dart code.
  attach                   Attach to a running application.
  bash-completion          Output command line shell completion setup scripts.
  build                    Flutter build commands.
  channel                  List or switch flutter channels.
  clean                    Delete the build/ directory.
  config                   Configure Flutter settings.
  create                   Create a new Flutter project.
  devices                  List all connected devices.
  doctor                   Show information about the installed tooling.
  drive                    Runs Flutter Driver tests for the current project.
  emulators                List, launch and create emulators.
  format                   Format one or more dart files.
  help                     Display help information for flutter.
  install                  Install a Flutter app on an attached device.
  logs                     Show log output for running Flutter apps.
  make-host-app-editable   Moves host apps from generated directories to
                           non-generated directories so that they can be edited
                           by developers.
  packages                 Commands for managing Flutter packages.
  precache                 Populates the Flutter tool's cache of binary
                           artifacts.
  run                      Run your Flutter app on an attached device.
  screenshot               Take a screenshot from a connected device.
  stop                     Stop your Flutter app on an attached device.
  test                     Run Flutter unit tests for the current project.
  trace                    Start and stop tracing for a running Flutter app.
  upgrade                  Upgrade your copy of Flutter.

快速開始

終端

終端在適合的目錄下運(yùn)行flutter create flutter_app創(chuàng)建一個(gè)名為flutter_app的應(yīng)用。

IntelliJ IDEA

從Flutter入門應(yīng)用程序模板創(chuàng)建一個(gè)新的Flutter IntelliJ項(xiàng)目:

  1. 在IntelliJ中,在 ‘Welcome’ 窗口點(diǎn)擊 Create New Project
  2. 或者在主界面 File>New>Project…
  3. 在菜單中選擇 Flutter , 然后點(diǎn)擊 Next.
  4. 輸入Project name 和 Project location,點(diǎn)擊 Finish.

VS Code

從Flutter入門應(yīng)用程序模板創(chuàng)建一個(gè)新的Flutter項(xiàng)目:

  1. 打開 Command Palette (Ctrl+Shift+P (Cmd+Shift+P on macOS)).
  2. 選擇 Flutter: New Project命令并回車。
  3. 輸入Project name 和 Project location

開發(fā)工具簡(jiǎn)單應(yīng)用教程

在IDE中開發(fā)Flutter應(yīng)用

英文還可以的同學(xué)參考官方的英文教程,官方提供了Android Studio / IntelliJ和VS Code的簡(jiǎn)單開發(fā)教學(xué)。

IntelliJ中直接在頂部工具欄就可以操做,VS Code按F5運(yùn)行項(xiàng)目并顯示工具欄。


相關(guān)參考

flutter中文網(wǎng)
在IDE中開發(fā)Flutter應(yīng)用

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • (ios,Android,Xcode,Android Studio,VScode,IDEA) 1)安裝Flutte...
    曹波波閱讀 24,162評(píng)論 13 30
  • 由于Flutter會(huì)同時(shí)構(gòu)建Android和IOS兩個(gè)平臺(tái)的發(fā)布包,所以Flutter同時(shí)依賴Android SD...
    寒橋閱讀 4,465評(píng)論 2 7
  • 一.關(guān)于Flutter Flutter是谷歌的移動(dòng)UI框架,可以快速在iOS和Android上構(gòu)建高質(zhì)量的原生用戶...
    slowdony閱讀 806評(píng)論 0 0
  • 這些年過去了,第一次又想起學(xué)畫畫,拿來臨摹的第一幅。突然想學(xué)畫畫了。 接著又畫了第二幅
    zero最好的開始閱讀 337評(píng)論 6 8
  • 投射我們家的天然氣能在我中午下班前修好,而且不用花錢。 投射老公主動(dòng)關(guān)心家里情況,關(guān)心家人。 投射今天過得順心喜悅...
    麗麗丫丫閱讀 151評(píng)論 0 0

友情鏈接更多精彩內(nèi)容