Flutter配置for Mac -- VSCode

最近開始瞭解Flutter,下面介紹在Mac環境下配置開發環境,我是一個iOS開發者,全部之後的系列文章都會以iOS的開發角度去學習Flutter。你們一塊學習html

官方開發文檔地址

官方開發文檔地址android

Flutter下載包地址

下載包git地址ios

VSCode下載地址

自行搜索下載VSCode下載git

配置Flutter-SDK

1:解壓壓縮包,以我我的配置爲例,放到文檔中,而且建立一個文件夾Flutter,且把解壓後的文件放入該文件夾中。github

2:配置環境路勁 配置環境變量,使用命令行:shell

`cd`到上一步的路勁 
複製代碼

執行macos

vim ~/.bash_profile
複製代碼

保存並退出(啥事不用幹)保存以後執行以下命令vim

export PATH=`pwd`/flutter/bin:$PAT
複製代碼

保存一下,注意若是這個文件不存在,那麼就新建一個。保存完畢以後運行命令:bash

source ~/.bash_profile
複製代碼

這個時候應該能運行flutter命令了,咱們運行命令行:微信

flutter -h
複製代碼

執行完命令後出現以下日誌

Manage your Flutter app development.

Common commands:

  flutter create <output directory>
    Create a new Flutter project in the specified directory.

  flutter run [options]
    Run your Flutter application on an attached device or in an emulator.

Usage: flutter <command> [arguments]

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.

Run "flutter help <command>" for more information about a command.
Run "flutter help -v" for verbose help output, including less commonly used
options.

複製代碼

檢查環境

flutter doctor
複製代碼

出現日誌以下

![環境檢查以下](https://upload-images.jianshu.io/upload_images/1416781-f1797dbb30e71ace.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.0.0, on Mac OS X 10.13.1 17B1003, locale
    zh-Hans-CN)
[✗] Android toolchain - develop for Android devices
    ✗ Unable to locate Android SDK.
      Install Android Studio from:
      https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK
      components.
      (or visit https://flutter.io/setup/#android-setup for detailed
      instructions).
      If Android SDK has been installed to a custom location, set $ANDROID_HOME
      to that location.
      You may also want to add it to your PATH environment variable.

[!] iOS toolchain - develop for iOS devices (Xcode 9.2)
    ✗ libimobiledevice and ideviceinstaller are not installed. To install with
      Brew, run:
        brew update
        brew install --HEAD usbmuxd
        brew link usbmuxd
        brew install --HEAD libimobiledevice
        brew install ideviceinstaller
    ✗ ios-deploy not installed. To install with Brew:
        brew install ios-deploy
[!] Android Studio (not installed)
[✓] VS Code (version 1.31.1)
[✓] Connected device (1 available)

! Doctor found issues in 3 categories.
複製代碼

NOTICE:按照檢測結果的說明,若是有[!] ✗ 標誌,表示本行檢測不經過,須要作一些設置或者安裝一些軟件。由於我是iOS開發者,因此只針對iOS開發體系 全部看上面有提示x的因此就執行每一行提示的指令

✗ libimobiledevice and ideviceinstaller are not installed. To install with
      Brew, run:
        brew update
        brew install --HEAD usbmuxd
        brew link usbmuxd
        brew install --HEAD libimobiledevice
        brew install ideviceinstaller
    ✗ ios-deploy not installed. To install with Brew:
        brew install ios-deploy
複製代碼

依次執行完成便可

NOTICE不一樣用戶看到信息不用,請酌情處理

到此執行已經配置完成了。

配置VSCode

vscode配置如圖

NOTICE:注意如圖上得箭頭,選擇放置Flutter的文件夾選擇bin文件夾的路勁便可

建立新的應用

  1. 啓動 VS Code
  2. 調用 View>Command Palette…
  3. 輸入 ‘flutter’, 而後選擇 ‘Flutter: New Project’ action
  4. 輸入 Project 名稱 (如myapp), 而後按回車鍵(可能時間較長)
  5. 指定放置項目的位置,而後按藍色的肯定按鈕
  6. 等待項目建立繼續,並顯示main.dart文件

上述命令建立一個Flutter項目,項目名爲myapp,其中包含一個使用Material 組件的簡單的演示應用程序。

在項目目錄中,您的應用程序的代碼位於 lib/main.dart.

運行應用程序

  1. 確保在VS Code的右下角選擇了目標設備
  2. 按 F5 鍵或調用Debug>Start Debugging
  3. 等待應用程序啓動

Flutter配置for Mac -- VSCode

Flutter入門基礎(一)-Label

Flutter入門基礎(二)-Button

Flutter入門基礎(三)-TextFile登陸頁

Flutter入門基礎(四)-imageview

Flutter入門基礎(五)-UITableView

Flutter入門基礎(六)-UITableView(二)添加headerView

Flutter入門基礎(七)-路由

Flutter入門基礎(八)-push頁面跳轉

  • 若有問題可添加QQ羣:234812704
  • 歡迎各位一塊學習,提升逼格!
  • 也能夠添加洲洲哥的微信公衆號

能夠來微信公衆號(洲洲哥)後臺給我留言。 快來掃碼關注咱們吧!

公衆號二維碼
相關文章
相關標籤/搜索