mac系统 flutter从安装到第一个应用

mac系统 安装flutter 分三步:

  1. 安装flutter sdk

  2. flutter环境变量配置

  3. 建立flutter应用

 

Flutter SDK下载

打开终端执行命令 git clone -b beta  下载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'
    }
}

再重新运行,问题解决。

 

 

来源:https://zhuanlan.zhihu.com/p/48866181

posted @ 2019-05-10 13:50  Mr_R  阅读(3054)  评论(0编辑  收藏  举报