mac下Flutter的安装配置及项目创建运行

一、安装

1、下载flutter，解压

image.png

2、存放到指定位置

比如：/Users/xxxx/Flutter/flutter

执行命令

1、vim ~/.bash_profile
2、增加一行: export PATH=/Users/xxxx/Flutter/flutter/bin:$PATH
其中，/Users/xxxx/Flutter/flutter是flutter的路径，后面加/bin
3、保存一下，:wq
4、source ~/.bash_profile 更新生效一下

注意: 如果你使用的是zsh，终端启动时 ~/.bash_profile 将不会被加载，解决办法就是修改 ~/.zshrc ，在其中添加：source ~/.bash_profile

如果众所周知的原因，如果需要配置国内镜像——参考 使用镜像

3、检查安装效果 flutter doctor

执行 flutter doctor

第一次执行，可能会有问题，随之解决就好。

flutter doctor的执行示例

flutter doctor

  ╔════════════════════════════════════════════════════════════════════════════╗
  ║                 Welcome to Flutter! - https://flutter.io                   ║
  ║                                                                            ║
  ║ The Flutter tool anonymously reports feature usage statistics and crash    ║
  ║ reports to Google in order to help Google contribute improvements to       ║
  ║ Flutter over time.                                                         ║
  ║                                                                            ║
  ║ Read about data we send with crash reports:                                ║
  ║ https://github.com/flutter/flutter/wiki/Flutter-CLI-crash-reporting        ║
  ║                                                                            ║
  ║ See Google's privacy policy:                                               ║
  ║ https://www.google.com/intl/en/policies/privacy/                           ║
  ║                                                                            ║
  ║ Use "flutter config --no-analytics" to disable analytics and crash         ║
  ║ reporting.                                                                 ║
  ╚════════════════════════════════════════════════════════════════════════════╝


Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.2.1, on Mac OS X 10.14 18A391, locale
    zh-Hans-CN)
[!] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor
      --android-licenses
[!] iOS toolchain - develop for iOS devices (Xcode 10.0)
    ✗ Xcode requires additional components to be installed in order to run.
      Launch Xcode and install additional required components when prompted.
    ✗ 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:
        brew install ios-deploy
    ✗ CocoaPods not installed.
        CocoaPods is used to retrieve the iOS platform side's plugin code that
        responds to your plugin usage on the Dart side.
        Without resolving iOS dependencies with CocoaPods, plugins will not work
        on iOS.
        For more info, see https://flutter.io/platform-plugins
      To install:
        brew install cocoapods
        pod setup
[!] Android Studio (version 3.3)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[!] Connected device
    ! No devices available

! Doctor found issues in 4 categories.

按照提示，一个一个解决就是了

正常解决之后，会得到类似这样的结果：

 amqr@amqrMBP  ~   master ●✚  flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.2.1, on Mac OS X 10.14 18A391, locale
    zh-Hans-CN)
[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[✓] iOS toolchain - develop for iOS devices (Xcode 10.0)
[✓] Android Studio (version 3.3)
[✓] Connected device (1 available)

二、Android Studio 安装Flutter

在没安装的Flutter插件之前，Languages & Frameworks 一栏是看不到Flutter和Dart的

image.png

在Settings的Plugins中，安装Flutter，就会把Dart也装上

image-1.png

安装之后，android studio 首页就会出现 Create Flutter Project 之类的字样了

image-2.png

卡在Craete Flutter项目怎么办

第一创建Flutter项目，可能会卡着不动。

解决办法：

• 1、如果有科学的上网方式，开启全局代理就好
• 2、如果没有，配置国内镜像地址 （bash_profile或者zshrc配置一下）

问题解决之后，就可以顺利进入如下界面

image-4.png

next即可。

第一个工程的创建比较久

创建好之后的界面

image-5.png

运行程序

andorid的运行，怼线直接运行，或者模拟器。

iOS的运行，模拟器是直接就可以的。

iOS真机运行 参考 安装到iOS设备

image-6.png

END