跨平台移动开发平台Flutter环境搭建

程序员文章站 2022-05-30 09:35:58

...

1 前言

话说，工作了几年之后发现移动开发的变化实在太快了，现在越来越多的跨平台移动开发框架出来，对原生的冲击也越来越大，RN，H5等移动开发框架非常火热，虽然有不少的问题，其中最让人不满意的就是性能问题了。但是假如有一天性能问题解决了呢？那么原生的开发势必要受到很大的冲击。google最近推出了Flutter开发框架，个人比较看到这个框架，搭建个环境来搞一搞。

2 Flutter介绍

Flutter官方介绍如下：

Flutter is Google’s mobile UI framework for crafting high-quality native interfaces on iOS and Android in record time. 
Flutter works with existing code, is used by developers and organizations around the world, 
and is free and open source.

Flutter是一个开源的免费的跨平台(IOS Android)高性能的UI框架。它可以与现有的native代码一起工作。官方地址如下：
https://flutter.io/

知乎上有很多有关Flutter与RN等的比较，参考：
https://www.zhihu.com/question/50156415/answer/278374951

3 Flutter开发环境搭建

下面开始正式搭建一个Flutter的开发环境。
建议：由于众所周知的原因，请自备*。
1 中国开发者建议设置以下变量

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

在git打开的cmd窗口中先设置以下环境变量

2 下载Flutter SDK

git clone -b beta https://github.com/flutter/flutter.git

由于已经发布了beta版本，下载后结果如下：
跨平台移动开发平台Flutter环境搭建
然后再设置以下环境变量

export PATH="$PWD/flutter/bin:$PATH"

3 进入SDK目录安装Flutter
git cmd下输入以下命令进行安装：

flutter doctor

安装过程比较漫长，一般都会因为网络问题卡住，笔者的安装也不是一帆风顺的，期间开过*代理，还重新按照步骤来走过，还选择了不同的时间段，例如网上，上午，下午等。总之经过一个周末的尝试，终于安装成功。安装成功再输入命令 flutter doctor，截图如下：
跨平台移动开发平台Flutter环境搭建
只要有红色方框中的打钩，基本就没什么问题了。

4 Android Studio 或者IDEA安装Flutter插件
由于本人是屌丝Android狗一枚，没有钱买Mac,也不会IOS开发，所以接下来以Android为例来介绍
由于Android开发环境已经搭建好，直接在Android Studio中安装Flutter的插件
跨平台移动开发平台Flutter环境搭建
可以看到，这里我已经安装过了。安装后之后我们再次运行flutter doctor。这个时候如果连接上Android设备，就会提示如下：

5 Android Studio新建Flutter工程
关键步骤如下截图所示：
跨平台移动开发平台Flutter环境搭建
Android Studio安装好Flutter插件后会出现上图菜单

选择Application

这里需要选择正确的SDK路径

建议不要去勾选红色方框的，因为我勾选了工程老是同步不下来。