Flutter 环境搭建

下载安装Flutter SDK

1 Flutter 官网下载地址：https://flutter.io/docs/development/tools/sdk/archive#macos

2 Flutter GitHub 下载地址：https://github.com/flutter/flutter/releases

解压安装包到你想要安装的目录

cd /Users/ksj/Desktop/flutter/
添加Flutter 相关工具到Path中：

export PATH='pwd'/flutter/bin:$PATH

运行Flutter命令安装各种依赖

flutter doctor

<u>注意：这时候需要权限，可能会提示没有权限的问题，下面是提示的问题</u>

[✗] 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.dev/setup/#android-setup for detailed
      instructions).
      If the 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 10.2.1)
    ✗ Verify that all connected devices have been paired with this computer in
      Xcode.
      If all devices have been paired, libimobiledevice and ideviceinstaller may
      require updating.
      To update with Brew, run:
        brew update
        brew uninstall --ignore-dependencies libimobiledevice
        brew uninstall --ignore-dependencies usbmuxd
        brew install --HEAD usbmuxd
        brew unlink usbmuxd
        brew link usbmuxd
        brew install --HEAD libimobiledevice
        brew install ideviceinstaller
[!] Android Studio (not installed)
[!] Connected device
    ! No devices available

! Doctor found issues in 4 categories.

添加环境变量

使用vim 命令打开~/.bash_profile 文件，添加以下内容：

export ANDROID_HOME=~/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
export PATH=/Users/paramida/Desktop/flutter/bin:$PATH
export HOMEBREW_BOTTLE_DOMAIN=https://mirrors.tuna.tsinghua.edu.cn/homebrew-bottles

终端运行 source $HOME/.bash_profile刷新当前终端窗口，可以使用echo$ PATH来验证flutter/bin是否已在PATH中。

<u> 注意:这时候如果电脑没有安装Homebrew工具，要去下载安装，地址：</u> https://brew.sh

Flutter新建项目

# bash
flutter create myapp
cd myapp
flutter run -d <deviceID>

以上就已经创建并运行项目。

使用/添加第三方依赖

在pubspec.yaml中加入english_words依赖：

dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.2
  english_words: ^3.1.0

执行命令下载安装依赖
```
flutter packages get
```
修改main.dart：

import "package:flutter/material.dart";
// 添加依赖
import "package:english_words/english_words.dart";

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 随机生成一个wordPair文字
    final wordPair = new WordPair.random();
    return new MaterialApp(
      title: "Welcom to Flutter",
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text("Welcom To Flutter"),
        ),
        body: new Center(
          // 使用wordPair生成的文字
          child: new Text(wordPair.asPascalCase),
        ),
      )
    );
  }
}

Flutter与已有iOS工程混合开发

在已有项目的目录下面创建一个名称为my_flutter 模块文件。

$ cd /Users/haoran1/Desktop/项目/VideoListApp
$ flutter create -t module my_flutter

然后在Podfile文件里面添加如下两行代码: flutter_application_path:flutter模块的路径，执行 pod install 。

flutter_application_path = '/Users/haoran1/Desktop/项目/VideoListApp/my_flutter'
  eval(File.read(File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')), binding)

然后添加New Run Script Phase。

"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" build
"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" embed

然后去AppDelegate.h 里面，#import <Flutter/Flutter.h>，让AppDelegate继承于FlutterAppDelegate，在m文件里面，修改didFinishLaunchingWithOptions，添加 [GeneratedPluginRegistrant registerWithRegistry:self];这样就可以跳转Flutter 界面。

flutter支持热重载，修改代码后能立马看到效果。终端执行

$ cd /Users/haoran1/Desktop/项目/VideoListApp/my_flutter
$ flutter attach

6.Flutter与Native通信的几种方式，Flutter与Native通信都是双向通道，可以互相调用和消息传递

Flutter与Native通信有三种方式，这里只简单介绍下：

MethodChannel：方法调用

EventChannel：事件监听

BasicMessageChannel：消息传递