【自学flutter系列】flutter 开发环境搭建

无尘

以下安装过程仅是winodws7系统下的安装过程。 windows其它系统的安装和win7下安装大致差不多。
如果是其它的如linux, 苹果的OSX系统。请参考flutter的官方文档来配置。

1. 安装Flutter

1.1 下载

下载 flutter_windows_v1.9.1+hotfix.2-stable.zip

图片描述

解压到你需要安装的盘。 如果我的: E:\soft\flutter

图片描述

1.2 配置环境变量

回到桌面,右键计算机 -> 属性 -> 高级系统设置 -> 环境变量 打开环境变量设置界面

在用户变量里找到path, 把 E:\soft\flutter\bin 添加到path.

由于在国内访问Flutter有时可能会受到限制,Flutter官方为中国开发者搭建了临时镜像。 再在用户变量添加下面两个变量

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

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

图片描述

1.3 检查是否安装成功

打开cmd, 运行 flutter,

flutter

能看到像下面这样的内容就说明flutter安装成功了。

图片描述

2. jdk安装

下载jdk安装,

打开计算机环境变量。 添加 如下变量:

JAVA_HOME=jdk安装目录

classpath=.;%JAVA_HOME%\lib;%JAVA_HOME%\lib\tools.jar;

在path变量中增加 %JAVA_HOME%\bin;

3. 安装Android studio和android 环境

3.1 下载android studio

打开android官网下载 android studio,

如果打不开也可以到 http://www.android-studio.org网站下载

点击运行安装android studio.

例如我的:

 Android studio安装目录: E:\Android\Android Studio
 Android SDK目录: E:\Android\Sdk

3.2 安装Android sdk

安装完成第一次运行时, android studio 会提示你要安装一些sdk, 直接点下一步安装就好。

注意: 这一步需要花费比较长的时间等待, 完成之后,Android Studio 默认的会为你安装好一个android版本的sdk, 并创建好一个相应的的模拟器。

添加环境变量ANDROID_HOME,把你android SDK的路径填上。

在path中添加 %ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools ;

重新打开cmd。

如果想安装更多版本的sdk,可以在菜单栏的tools -> SDK Manage进去管理sdk

图片描述

至此,我们的开发环境基本上就安装好了。下面来运行一下 flutter doctor 检查下当前的环境是否可以。

# 运行 flutter doctor 出在如下面的提示,说明我们的flutter 开发环境已经安装好了。

λ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, v1.9.1+hotfix.2, on Microsoft Windows [Version 6.1.7601], locale zh-CN)
[√] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
[√] Android Studio (version 3.5)
[!] Connected device
    ! No devices available

! Doctor found issues in 1 category.

错误处理

  1. 未在环境变量中配置ANDRIOD_HOME错误, 运行 flutter doctor, 出现如下错误:

    Doctor summary (to see all details, run flutter doctor -v):
    [√] Flutter (Channel stable, v1.9.1+hotfix.2, on Microsoft Windows [Version 6.1.7601], locale zh-CN)
    [X] Android toolchain - develop for Android devices
        X Unable to locate Android SDK.
          Install Android Studio from: https://developer.android.com/studio/index.html
          On first launch it will assist you in installing the Android SDK components.
          (or visit https://flutter.dev/setup/#android-setup for detailed instructions).
          If the Android SDK has been installed to a custom location, set ANDROID_HOME to that location.
          You may also want to add it to your PATH environment variable.
    
    [√] Android Studio (version 3.5)
    [!] Connected device
        ! No devices available
    
    ! Doctor found issues in 2 categories.

    解决方法:

    在环境变量中配置变量 ANDRIOD_HOME = 你的android SDK目录。

  1. 提示 flutter doctor --android-licenses

    解决方法:

    输入 flutter doctor --android-licenses,接下来所有的输入 y 就可以了

  2. No devices available

    这个错误比较好解决, 运行我们的android模拟器即可。

4. 插件安装

4.1 Android studio

打开File -> settings -> plugins, 搜索Flutter 安装

4.2 vscode

打开插件标签搜索flutter 安装

5. 创建,并运行一个flutter程序

5.1 android studio

图片描述

5.2 vscode

图片描述

5.3 命令行

运行flutter create flutter_demo

flutter create flutter_demo

5.4 运行我们的第一个flutter程序

我以vscode来讲。 先把模拟器运行起来。

点击右下角的No Device, 选择需要运行的模拟器点击运行。 我这里就只有一个模拟器。如下图
图片描述

再运行flutter 程序

cd flutter_demo
flutter run  

app 运行起来如下图
图片描述

Error runing Gradle 错误解决

运行时如果遇到了 Error runing Gradle 错误提示,这是因为墙的原因导致,解决方案是改为阿里的链接。

阿里链接:

 maven { url 'https://maven.aliyun.com/repository/google' }
 maven { url 'https://maven.aliyun.com/repository/jcenter' }
 maven { url 'http://maven.aliyun.com/nexus/content/groups/public'}
        

需要修改的文件:

  • 在项目目录下的android目录下的build.gradle文件。
  • 修改Flutter SDK包下的flutter.gradle文件, 具体的文件路径是:
Flutter SDK目录\packages\flutter_tools\gradle\flutter.gradle

把文件里的google() 和 jcenter()这两行改为阿里的链接.

附录:

以上这些纯属个人学习记录,本人是一名前端开发,对JS比较熟悉,所以有些地方会套用些JS的语法来做说明

如有错误及不妥之处,欢迎评论留言指出。

下一篇: 【自学flutter系列】dart语言学习概览

阅读 1.6k
80 声望
1 粉丝
0 条评论
你知道吗?

80 声望
1 粉丝
宣传栏