Flutter环境搭建

395 阅读3分钟

背景介绍

近期,了解到Flutter,对于他的跨平台特性真的是非常感兴趣,从底层直接解决,虽然需要学习一些新的技术站,但是多了解一门语言也是未尝不可的,而且Dart说是一门同时具备AOT和JIT双特性的语言。 所以,话不多说,开搞。(因为是跨IOS和Adnroid的开发,所以最好使用mac开发,本文也是基于mac的环境配置的)

工具下载

Android Studio下载

官网

不知道为什么,虽然本王者已经通过黑可以可以自由使用google了,但是这个网站还是访问不了。所以再给一个可以访问的链接,在里面找到稳定的3.4.1 正式版就好了

安装好之后需要通过创建一个Adnroid的虚拟机,点击Create Virtual Device创建一台模拟器

X Code下载

这个在MAC的App Store上就能下载,配置完成后,执行命令open -a Simulator,打开模拟器。

环境配置

接下来需要配置Flutter的镜像下载文件。

执行命令vim ~/.bash_profile,本王者使用vim也是踩了不少坑,点击i进入INSERT模式,添加如下镜像站点的环境变量,添加进去后,按ecs键退出INSERT模式,打入一个分号:wq,这样就保存了,别问我为什么还要写这个,因为我刚开始一脸懵逼,我相信有些人也是,哈哈

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

据说这个镜像的环境变量不能一直可用,所以查看flutter的中文社区来使得镜像站点一直可用

然后到Flutter官网下载最新版的FlutterSDK(本王者使用的时候就很不稳定,大家看运气哈)

下载完后使用命令将文件解压到Documents的文件夹中(因为一会的环境变量根据这个文件的位置配置的) 进入Documents文件夹,然后执行解压操作unzip ~/Downloads/flutter_macos_v1.5.4-hotfix.2-stable.zip

然后添加新的环境变量export PATH=~/Documents/flutter/bin:$PATH(此处因为我们解压的flutter文件位于Documents目录下,所以需要这样设置,大家如果不一样记得替换成为正确的路径即可)

再然后source ~/.bash_profile刷新一下

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

运行模拟器

cd flutter/examples/hello_world 这里面是flutter自带的一些案例

flutter emulators此处就会显示我们刚才配置的两台模拟器

flutter emulators --launch apple_ios_simulator 我们启动ios模拟器

flutter run 运行我们的第一个hello world(我稍微改了下文字)

到这里我们还差一步,每次都敲命令不得疯掉,所以我们还需要设置一下平台的开发环境

配置集成开发环境

我们运行flutetr doctor

这里因为我都安装过了,所以都显示对勾,首次安装基本都是XX,但是后面都会有对应的命令,一个一个复制黏贴就好了

经过很漫长的下载后。。。。。。。里面会为你电脑安装的开发工具都提供解决的方案,很牛叉

然后配置一下我们XCode的证书,打开 hello_world 项目中的 ios/Runner.xcworkspace,

配置好之后,我们就可以在真机中调试了

VS Code

VS Code 支持很简单,直接在插件里面搜索flutter就可以,

选择第一个安装就可以, 之后按F5进入调试模式,选择安装的模拟器就好啦

热重载

我们需要修改的文件是lib的main.dart,还有一个是他阿拉伯的兄弟。看里面的代码

我们需要修改一下,他才具有热更新的能力

import 'package:flutter/widgets.dart';

class MyAPP extends StatelessWidget {
@override
  Widget build(BuildContext context) {
    return const Center(child: Text('Hello World', textDirection: TextDirection.ltr));
  }
}

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

好了,到此,我们的环境搭建以及第一个flutter应用也就结束了,快去试试吧