Flutter基本配置搭建

1、打开终端，cd到用户根目录下，执行：git clone https://github.com/flutter/flutter.git

2、如图，新项目flutter拉取成功:

图1

3、添加环境变量，参考链接：配置Mac环境变量

在配置文件中加上：

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

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

export PATH=~/flutter/bin:$PATH

4、终端cd到flutter目录下，执行：flutter doctor，查看终端输出，按照提示逐个解决

图2

我这边因为之前安装过Xcode与Android Studio及Visual Studio Code等三个编辑器，所以这里提示报错文件不多。这里指出的是Android Studio未安装Flutter及Dark插件，配置一下即可。

5、Android Studio插件配置：

a、启动Android Studio。

b、打开插件首选项 (Preferences>Plugins on macOS, File>Settings>Plugins on Windows & Linux)。

c、搜索框选择 Flutter 插件并点击 install。

d、重启Android Studio后插件生效。

6、VS Code插件配置：

a、启动 VS Code

b、调用 View>Command Palette…

c、输入 ‘install’, 然后选择 Extensions: Install Extension action

d、在搜索框输入 flutter , 在搜索结果列表中选择 ‘Flutter’, 然后点击 Install

e、选择 ‘OK’ 重新启动 VS Code

7、新建一个Flutter项目：这里以VS Code编辑器为例

a、打开 VS Code，使用快捷键command+shift+P打开命令面板，选择Flutter: New Project（如图3），提示新建flutter项目名称，这里我以smallaflutterdemo为名，等待配置完成即可。

图3

配置完成之后，VS Code打印应如图4所示：

图4

创建完成，回到桌面查看文件目录，如图5，代表一个新的Flutter Demo项目创建完成。

图5

8、开发调试：

未连接真机或者打开模拟器时，这里显示No Device（如图6），

图6

a、iOS真机调试：这里我直接连接手机之后，直接显示对应平台及机型，如图7所示：

图7

按快捷键F5或点击左上角菜单栏"调试"->"启动调试"，等待项目运行，我这边控制台运行结果如下：

图8

查看真机运行情况，可以正常run，这样FlutterDemo项目就在真机上正式跑起来了。

b、iOS模拟器调试：通过Spotlight搜索关键字"Simulator"，enter打开，这里以iPhone XS为例：

图9

选择相关模拟器，可以正常run，表示FlutterDemo在模拟器上运行成功。

c、Android真机调试调试，以MIX 3为例：用Android Studio打开名为 smallaflutterdemo项目，选择真机MIX 3，选择对应main.dart，再点击小甲壳虫（debug模式），等待编译运行即可，这样一个flutterdemo项目就在Android真机上运行起来。

图10

d、Android模拟器调试：选择Android标识，下载Android模拟器，下载完成之后，点击对应Actions下的执行按钮，启动模拟器，启动完成之后，编译器里面的调试设备选择就会有模拟器选项，选择对应模拟器，然后执行run即可。

图11

图12

##### 踩坑记录

1、执行 flutter doctor 命令时报错：CocoaPods installed but not working...

CocoaPods installed but not working

解决方案：

a.更新gem,

sudo gemupdate--system --verbose

b.查看本地

sudogem list --local

Flutter基本配置搭建

你可能感兴趣的:(Flutter基本配置搭建)