不用Android Studio,搭建 flutter开发环境

  • 前言
  • JDK,FLUTTER SDK,ANDROID SDK的安装及配置
  • JDK安装及环境变量配置
  • flutter sdk 的安装及配置
  • Android Sdk的安装和配置
  • IDEA 运行第一个flutter应用
  • flutter 插件的安装
  • 创建flutter 项目


前言

最近准备做一个简单的app,计划使用flutter,考虑到电脑上已经装了IDEA,而android studio也是基于idea的定制的开发工具,所以打算直接用IDEA作为开发工具,工欲善其事,必先利其器,开发环境的准备是必不可少的,主要涉及到flutter sdk, android sdk的安装,期间也是碰了不少坑,在此做个记录以备忘。
注:按照flutter官网的安装是基于要装andriod studio的前提的,地址:https://flutter.dev/docs/get-started/install/windows

JDK,FLUTTER SDK,ANDROID SDK的安装及配置

JDK安装及环境变量配置

网上一大把资料,掠过。

flutter sdk 的安装及配置

参考网址:
https://www.jianshu.com/p/568b6e31d17a
最终整理步骤如下:

1. 下载flutter sdk 最新版本,下载网址: https://flutter.dev/docs/get-started/install/windows

idea 开发flutter ios flutter框架支持的ide工具有哪些_android


我下载的是flutter_windows_2.5.2-stable.zip,

2.解压得到flutter文件夹到某个目录下,我解压到D:

idea 开发flutter ios flutter框架支持的ide工具有哪些_idea_02


3.配置环境变量,将D:\flutter\bin添加到path中

idea 开发flutter ios flutter框架支持的ide工具有哪些_idea_03


Flutter的执行是要进行联网的,由于国内的原因,所以你需要设置两个用户环境变量以使用国内镜像,Pub源的配置

如果你没有梯子,一个人人都知道的原因,你还需要在环境变量里配置一下Pub源,不然你是无法进行使用的。

linux下用export来配置

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

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

idea 开发flutter ios flutter框架支持的ide工具有哪些_Android_04


4.进行Flutter doctor 的测试

在终端中输入flutter doctor

idea 开发flutter ios flutter框架支持的ide工具有哪些_idea 开发flutter ios_05


出现了报错,因为我们没有安装android sdk,网上很多后续步骤都是通过安装android studio来处理,我们这里不装android-studio,只装android sdk,来达到flutter开发环境的可用

Android Sdk的安装和配置

这里是问题最多的地方,有些问题也是找了很久才处理掉的

  1. 下载命令行工具
    下载地址:https://developer.android.google.cn/studio?hl=zh-cn#downloads
    在官网下拉,在Command line tools only里下载对应平台的sdkManager;

    下载后解压得到文件夹 cmdline-tools, 我们的Android sdk放在 D:\Android\sdk下,解压后的目录最好放在D:\Android\sdk\cmdline-tools\latest里,否则当执行sdkmanager时会报错,比如我开始放的位置如下图

idea 开发flutter ios flutter框架支持的ide工具有哪些_Android_06


这样放我起初是为了保证tools, platform-tools, cmdline-tools, build-tools 等处于平级下,到D:\Android\sdk\cmdline-tools\bin下,执行一下sdkmanager --list命令

idea 开发flutter ios flutter框架支持的ide工具有哪些_idea 开发flutter ios_07


该报错中明确指出需要在命令中明确使用参数–sdk_root来指定sdk_root或者将package移动到 sdk路径\cmdline-tools/latest下,为了避免太多错误,我将 package移动到 sdk路径\cmdline-tools/latest下,然后再执行sdkmanager --list命令

idea 开发flutter ios flutter框架支持的ide工具有哪些_flutter_08


没有报错,命令成功执行

原因分析及解决方法来源:https://stackoverflow.com/questions/65262340/cmdline-tools-could-not-determine-sdk-root

2 下载需要的平台及工具

执行sdkmanager “platform-tools” “platforms;android-27”

下载需要的平台及工具,我准备的android系统是4.4.1,对应平台为27

idea 开发flutter ios flutter框架支持的ide工具有哪些_Android_09


输入y同意许可,等待下载完成

idea 开发flutter ios flutter框架支持的ide工具有哪些_idea 开发flutter ios_10


检查一下sdk目录发生了变化

idea 开发flutter ios flutter框架支持的ide工具有哪些_android_11


idea 开发flutter ios flutter框架支持的ide工具有哪些_flutter_12


idea 开发flutter ios flutter框架支持的ide工具有哪些_android_13


执行命令sdkmanager “build-tools;27.0.3”,下载build-tools,

idea 开发flutter ios flutter框架支持的ide工具有哪些_idea 开发flutter ios_14


idea 开发flutter ios flutter框架支持的ide工具有哪些_idea 开发flutter ios_15


3. flutter doctor命令,修复许可

执行一下flutter doctor命令,注意Android-toolchains部分,执行此命令前,最好先执行一下 flutter config --android-sdk D:\Android\sdk,指定一下android sdk路径

idea 开发flutter ios flutter框架支持的ide工具有哪些_Android_16


报错说本版flutter需要的版本是;platform;andriod-29,build-tools.28.0.3,

那重新下载一下了

sdkmanager “platform-tools” “platforms;android-29”

sdkmanager “build-tools;28.0.3”

idea 开发flutter ios flutter框架支持的ide工具有哪些_Android_17


再次执行flutter doctor命令

idea 开发flutter ios flutter框架支持的ide工具有哪些_android_18


里面提示需要执行 flutter doctor --android-licenses 来修复许可

idea 开发flutter ios flutter框架支持的ide工具有哪些_idea 开发flutter ios_19


一路填 y,知道执行完毕

idea 开发flutter ios flutter框架支持的ide工具有哪些_idea_20


4.配置环境变量

新建环境变量ANDRIOD_HOME,值为SDK安装目录,如D:\Android\sdk

idea 开发flutter ios flutter框架支持的ide工具有哪些_flutter_21


配置环境变量Path,加入%ANDROID_HOME%\tools,%ANDROID_HOME%\platform-tools和%ANDROID_HOME%\build-tools

idea 开发flutter ios flutter框架支持的ide工具有哪些_Android_22

至此,flutter 和 android sdk的配置已经进行完毕

IDEA 运行第一个flutter应用

本机已经装了idea,此处重点介绍如何运行第一个flutter应用

flutter 插件的安装

IntelliJ IDEA搭建Flutter开发环境(Windows),参考网址:

https://www.jianshu.com/p/9578405334e1 按网址上的配置插件即可

idea 开发flutter ios flutter框架支持的ide工具有哪些_Android_23


idea 开发flutter ios flutter框架支持的ide工具有哪些_Android_24

idea 开发flutter ios flutter框架支持的ide工具有哪些_flutter_25

创建flutter 项目

idea 开发flutter ios flutter框架支持的ide工具有哪些_idea 开发flutter ios_26

idea 开发flutter ios flutter框架支持的ide工具有哪些_android_27


注意dart项目不能用驼峰命名,helloWorld会提示报错

idea 开发flutter ios flutter框架支持的ide工具有哪些_Android_28


点击finishi我们第一次运行是需要创建一个模拟器,需要根据 andriod sdk 下载对应镜像,在settings里找到android skd的配置,点edti

idea 开发flutter ios flutter框架支持的ide工具有哪些_Android_29


在弹出窗口中点next 开始下载

idea 开发flutter ios flutter框架支持的ide工具有哪些_idea 开发flutter ios_30


idea 开发flutter ios flutter框架支持的ide工具有哪些_android_31


下载完成需要等待一定时间,下载完毕点finish按钮下载需要的系统镜像

idea 开发flutter ios flutter框架支持的ide工具有哪些_idea_32


idea 开发flutter ios flutter框架支持的ide工具有哪些_flutter_33


idea 开发flutter ios flutter框架支持的ide工具有哪些_android_34

使用AVD Manager创建一个模拟器

参考:

idea 开发flutter ios flutter框架支持的ide工具有哪些_idea_35


idea 开发flutter ios flutter框架支持的ide工具有哪些_idea 开发flutter ios_36


这里创建一个平板模拟器

idea 开发flutter ios flutter框架支持的ide工具有哪些_android_37


系统镜像选API 27,要先download

idea 开发flutter ios flutter框架支持的ide工具有哪些_idea_38


idea 开发flutter ios flutter框架支持的ide工具有哪些_android_39


idea 开发flutter ios flutter框架支持的ide工具有哪些_idea_40


确认一下,点击 finish

idea 开发flutter ios flutter框架支持的ide工具有哪些_Android_41


在运行前面的选项中选中打开我们配置的模拟器

idea 开发flutter ios flutter框架支持的ide工具有哪些_Android_42


效果如下图

idea 开发flutter ios flutter框架支持的ide工具有哪些_android_43


选中 Andriod SDK built for x86, 点击运行按钮

idea 开发flutter ios flutter框架支持的ide工具有哪些_flutter_44


等待模拟器界面发生变化,最终效果如下列图示:

idea 开发flutter ios flutter框架支持的ide工具有哪些_android_45


idea 开发flutter ios flutter框架支持的ide工具有哪些_android_46


idea 开发flutter ios flutter框架支持的ide工具有哪些_idea_47