Hello Flutter - Mac搭建Flutter运行环境

安装Flutter SDK

下载Flutter SDK：SDK(有**的话可能会快一点，不然有可能打不开)下载结束以后我们解压到一个我们找得到的文件夹

在这里插入图片描述

这个时候我们需要做一个操作，给项目权限，我们终端找到SDK的位置，然后输入：

sudo chmod -R 777 *

或者使用我们的访达，找到项目，右键-显示简介-找到?的标志，然后将共享与权限改为读写，然后找到下面的设置标志，进行应用所有的文件夹，最后保存！

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-o5zeGXB5-1605581114638)(evernotecid://72A0867B-C2C9-4394-90F0-D1AD032DA4AC/appyinxiangcom/24072006/ENResource/p198)]

然后我们配置一下配置文件：commond+空格 输入终端，打开终端-输入：

vim ~/.bash_profile

将下面的代码输入进去：

export PATH=/Users/leimingwei/flutter_mac/flutter/bin:$PATH
export PUB_HOSTED_URL=https://mirrors.tuna.tsinghua.edu.cn/dart-pub
export FLUTTER_STORAGE_BASE_URL=https://mirrors.tuna.tsinghua.edu.cn/flutter

或者您使用官方给的镜像地址也是可以的：

export PUB_HOSTED_URL=https://pub.flutter-io.cn //国内用户需要设置
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //国内用户需要设置

博主我使用的是清华提供的镜像地址，也是可以用的

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-x7KS5z7z-1605581114640)(evernotecid://72A0867B-C2C9-4394-90F0-D1AD032DA4AC/appyinxiangcom/24072006/ENResource/p191)]

当然第一行的路径要写您自己的解压好的SDK路径

安装Xcode

这里说明一个点，Flutter虽然是多端的解决方案，但是他只是说写一套代码可以多端使用，但是你需要打包安卓应用的时候呢，还是需要使用AS的，需要打包ios的应用的时候还是需要Xcode的，是根据不同的导出工具决定它是一个什么App，而不是他代码本身决定的，他的代码本身只是决定了我不用两套代码，就可以通过不同的导出工具进行生成不同平台的App这样的一个功能，还有一个点需要明确的就是windows只能开发安卓，没办法开发ios，因为没办法安装Xcode这样的工具，但是mac可以开发安卓和ios，因为他可以安装AS和xcode，这是两个需要我们清楚的点。

没有下载之前呢，说一下官方要求的是下载最新版本的Xcode，但是如果您这个时间读我的文章的话，如果您的mac版本是和我的一样的，是mojava的10.14版本，那么可能会出现和我一样的类似这样的尴尬局面，

在这里插入图片描述

这个时候我们两个办法，第一个就是我们升级自己的系统，第二个就是下载别的版本的Xcode，这里是下载链接各个版本的Xcode虽然可以下载各个版本，但是最好还是7.2以上的，因为太早的很多功能可能会不支持了。下载好了以后直接下一步安装就好了，这里就不多说了。

测试安装情况

flutter doctor

在这里插入图片描述

如果和我一样的话基本上就没啥问题了，如果和我不一样，下面说一下怎么搞，如果是提示Android没有安装，我们可以不用管，毕竟我们准备的是ios的开发，AS本来就没安装，如果提示Xcode没有的话，那就是您的Xcode没有安装，检查一下是不是安装失败了，或者是版本过低，如果是提示说没有链接任何驱动，也就是最后一个不是对号的状态，我们可以直接输入下面的代码进行打开一个驱动。

open -a Simulator

然后再次运行flutter doctor 会发现最后一项正常了。

创建一个flutter项目

打开终端，找到一个自己找得到的地方进行创建，输入：

flutter create flutter_demo 

flutter_demo 是项目的名字，自己随意起，等待运行，看到下面的就说明创建成功了！

在这里插入图片描述

创建好了以后呢可以直接进入项目，运行：

flutter run

等待一下构建，他会自动找到我们打开的模拟器，打开这样的话说明成功了

在这里插入图片描述

在这里插入图片描述

使用vscode进行编写代码

我们为了调试代码方便，使用xcode不是不可以，只是xcode是一个比较重的编辑器，占用内存比较厉害，这里推荐使用vscode进行编码，我们需要安装一些插件

• flutter

在这里插入图片描述

在这里插入图片描述

• 安装结束以后我们导入项目

在这里插入图片描述

大概说一下项目目录，我们没有必要全部认识，我们需要知道ios、android、lib、pubspec.yaml、build这几个就可以了，我们写代码也只会在lib下面进行实现，pubspec.yaml这个是dart的包管理文件，build其实和很多框架一样，构建用的，别的就见名思义吧！

Hello Flutter

我们打开main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(new Center(
    child: new Text(
      'hello Flutter',
      textDirection: TextDirection.ltr,
      style: TextStyle(fontSize: 40.0, color: Colors.yellow),
    ),
  ));
}

重新构建：

在这里插入图片描述

在这里插入图片描述

写到最后

Flutter是一款由Google开发的一款开源、免费的移动UI框架，可以让我快速的在安卓和ios上构建高质量的App它具有跨平台、高性能的特点，他是基于Google的Dart语言开发。像这种跨平台的开发目前比较流行的有ReactNative(RN),还有ionic,但是各有优缺点，相对来说前两者都是面世时间比较长的，Flutter相对来说是比较新的一款技术，由于目前的手机配置都很高，所以用什么开发运行在手机上都看不出来具体谁有优势，不过在中国闲鱼这款App是使用Flutter进行开发的，可以自己体验一下！如果说Flutter有什么缺点的话，这里简单的说一点就是由于它是一个比较新的框架，所以社区相对RN、Ionic这些老框架来说是比较少的，所以学习的过程中遇到坑 的话，可能大部分是需要自己克服的，毕竟现在学习Flutter虽然不是第一个吃到螃蟹的人，也是属于第二批吃的人，在技术开发这一个领域，一种新的技术面世以后不经过几轮的踩坑是很难将大部分的问题踩掉的。所以学习成本相对来说比RN和Ionic要高一些。不过话说回来，大家都等别人搞社区踩坑的话，技术就没办法进步了！那其实我在实现的过程中也是遇到了各种问题，没写这篇文章之前，已经折腾了一两天了，因为中间很多的坑都没遇到过，所以遇到以后很多时候都是不知道怎么做的，但是将问题描述清晰以后查询百度，Google以后还是有很多解决的思路的，我想说的是什么呢，就是说一个新的技术出来的时候我们应该给他足够的耐心，毕竟你遇到的坑越多，你搞出来时候的成就感也就越强，我写的这篇文章也只是Mac下进行搭建，至于windows会不会有更多的问题我还不知道，找机会再试吧！

老样子，有问题在下面留言，或者直接加主页的粉丝群进行交流。

更新： flutter doctor 报错

在这里插入图片描述

• 这样的报错我们直接按照提示进行安装就行了

在这里插入图片描述