Flutter 环境搭建和第一个Flutter应用

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/wujainEW/article/details/83831823

本文基于mac系统

 

首先给出flutter中文官网地址 https://flutterchina.club/get-started/install/

根据官网流程,当然可以一撸到底,正常情况下,都是正常的。可是,根据个人经验,踩坑是必然的。

主要分为3个步骤:

1 Flutter SDK下载

2 Flutter 环境变量配置

3 第一个Flutter应用

Flutter SDK下载

打开终端执行命令 git clone -b beta https://github.com/flutter/flutter.git 下载flutter SDK

 

mac系统,Futter SDK下载完成后默认路径是:Users/xxxxx/flutter,比如我的是 Users/wujian/flutter,这个也是flutter SDK的安装目录。

在Mac上显示的就是Macintosh HD ->Users -> wujian -> flutter

Flutter 环境变量配置

使用镜像:

由于在国内访问Flutter有时可能会受到限制,Flutter官方为中国开发者搭建了临时镜像,大家可以将如下环境变量加入到用户环境变量中。

在命令行下,进入用户目录:执行命令 cd $HOME

打开.bash_profile文件:执行命令 open -e .bash_profile

文件打开后,开始编辑bash文件,在其中添加以下内容:

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

同时添加flutter相关工具到path中,也就是添加 Flutter SDK 安装的路径

export PATH=${PATH}:/Users/wujian/Flutter/flutter/bin:$PATH

关闭bash文件,配置完成后,更新配置的环境变量,执行命令: source .bash_profile

flutter验证:

终端直接输入 flutter,没有提示该命令找不到,则配置成功。如下:

 

运行 flutter doctor,安装相关依赖,可重复执行 ,终端执行命令:flutter doctor

注意,个人经验,可能会卡在“Building flutter tool...”提示语句,请耐心等待。请一定要配置临时镜像,否则会下不下来,经常出现下载失败的情况,请挂VPN尝试,如果未购买vpn,可以使用蓝灯 Lantern免费版使用。

 

执行结束后,成功后是这样的

 

第一个Flutter应用

启动Android Studio,安装AndroidStudio的Flutter插件,安装成功后,重启Studio

 

使用AndroidStudio建立Flutter项目

 

注意:新建工程,工程名不能含大写字母,这与Android Stuidio不同。New Flutter Project这个过程可能会卡一会,New Flutter Project成功后页面如下:

 

 

在Flutter SDK path中选择你的SDK安装路径(指向到顶层flutter目录即可,也就是上面说的 flutter安装目录),不要点击那个install SDK按钮。

Creating Flutter Project的过程十分的漫长,请耐心等待。如果超过5分钟,根据个人经验,可能页面卡死,其实flutter项目已经创建好了,可以到项目路径下查看。

所以,我们直接强杀AS,然后重新打开,open项目

 

项目打开后,直接运行项目,可能会遇到如下错误

问题描述:由于国内镜像原因,很多jcenter google库无法访问导致,即使vpn开了也一样。

解决方法:修改build.gradle,注释掉jcenter(),google()。使用阿里的镜像。

第一步:

buildscript {
    repositories {
        //google()
        //jcenter()
        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' }
    }
​
    dependencies {
        classpath 'com.android.tools.build:gradle:3.1.2'
    }
}
allprojects {
    repositories {
        //google()
        //jcenter()
        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' }
    }
}

第二步:

找到flutter安装目录,比如:

Macintosh HD⁩ ▸ ⁨Users ▸ ⁨wujian.⁩ ▸ ⁨flutter⁩ ▸ ⁨packages⁩ ▸ ⁨flutter_tools⁩ ▸ ⁨gradle⁩

找到下 flutter.gradle文件 找如如下内容替换成和我一样的 把jcenter注释掉。

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

再重新运行,问题解决。

展开阅读全文

没有更多推荐了,返回首页