Flutter 开发环境搭建

十月 15, 2018

Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。

获取Flutter SDK

不论是Windows、MacOS、Linux系统，统一采用Git方式下载，亲测试高效可用，这里下载开发版本，示例如下：

在Flutter文件夹路径下，输入如下命令行代码，自动下载最新的代码。

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

设置环境变量

1、设置Flutter 系统环境变量

FLUTTER_HOME : \Flutter\flutter\bin

Path下添加：FLUTTER_HOME\bin;

2、添加临时镜像

Flutter官方为中国开发者搭建了临时镜像，将其添加到用户环境变量中.


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

3、执行命令检查安装情况：

flutter doctor

4、修改flutter.gradle配置文件

flutter.gradle 文件位于 flutter\packages\flutter_tools\gradle 目录下

默认配置下，flutter调试运行时，Gradle下载依赖库失败的问题；通过修改flutter.gradle 文件，设置为阿里maven代理库就可以解决。

设置如下：


    buildscript {
        repositories {
            maven {
                //url 'https://dl.google.com/dl/android/maven2'
                url 'http://maven.aliyun.com/nexus/content/groups/public/'
            }
            jcenter()
        }
        dependencies {
            classpath 'com.android.tools.build:gradle:3.1.2'
        }
    }

安装开发编辑器

这里推荐VS Code、Android Studio 和 Intellij Idea，用起来都比较顺手。但是Android Studio必须安装，用户创建Android模拟器，启动 Android Studio>Tools>Android>AVD Manager 并选择 Create Virtual Device。

安装Flutter和Dart插件

安装好开发编辑器后，接着安装Dart和Flutter插件，这里要先安装Dart插件。

其中对于Intellij Idea 和 Android Studio 开发编辑器，需要去官网下载对应版本的插件到本地手动安装，安装好后，重启即可生效。在线下载容易失败。

创建新应用

按照以上步骤安装设置好，就可以创建新应用 New Flutter Project。

修改Flutter项目中android 对应的build.gradle配置文件

build.gradle配置文件的默认内容如下：


    buildscript {
        repositories {
            google()
            jcenter()
        }

        dependencies {
            classpath 'com.android.tools.build:gradle:3.1.2'
        }
    }

    allprojects {
        repositories {
            google()
            jcenter()
        }
    }

    rootProject.buildDir = '../build'
    subprojects {
        project.buildDir = "${rootProject.buildDir}/${project.name}"
    }
    subprojects {
        project.evaluationDependsOn(':app')
    }

    task clean(type: Delete) {
        delete rootProject.buildDir
    }

修改其中的buildscript => repositories {} , 添加:


    maven {
        url 'http://maven.aliyun.com/nexus/content/groups/public/'
    }

修改结果如下：


    buildscript {
        repositories {
            google()
            maven {
                url 'http://maven.aliyun.com/nexus/content/groups/public/'
            }
            jcenter()
        }

        dependencies {
            classpath 'com.android.tools.build:gradle:3.1.2'
        }
    }

注意：必须将maven() 仓库置于 jcenter() 之前，否则flutter调试运行时依赖库下载失败。

查看评论