【flutter】【01】环境搭建_HelloWorld


持续学习&持续更新中…

守破离


【flutter】【01】环境搭建_HelloWorld

    • 下载安装AndroidStudio
    • 下载flutter
    • 安装flutter
    • 在AndroidStudio中集成flutter
    • 使用AndroidStudio开发flutter

2年前学习flutter时没有写博客,这次手痒又想写一写flutter。

下载安装AndroidStudio

进入Android开发中中文官网:https://developer.android.google.cn/

【flutter】【01】环境搭建_HelloWorld_第1张图片

【flutter】【01】环境搭建_HelloWorld_第2张图片

【flutter】【01】环境搭建_HelloWorld_第3张图片

下载好AndroidStudio后,AndroidStudio的安装、Android虚拟机的安装等,请参考郭霖大神的书籍《Android第一行代码(第三版)》中的第一章:https://weread.qq.com/web/reader/73532150723f022f73516a6,里面有很详细的步骤以及对Android、AndroidStudio、Android虚拟机等相关的讲解。

下载flutter

进入:https://flutter.cn/

【flutter】【01】环境搭建_HelloWorld_第4张图片

【flutter】【01】环境搭建_HelloWorld_第5张图片

点击进入:https://flutter.cn/community/china页面(上图红色框框),去选择flutter镜像(这里我使用的是清华大学TUNA协会的镜像):

export PUB_HOSTED_URL=https://mirrors.tuna.tsinghua.edu.cn/dart-pub
export FLUTTER_STORAGE_BASE_URL=https://mirrors.tuna.tsinghua.edu.cn/flutter

将镜像配置到用户变量的Path中:

【flutter】【01】环境搭建_HelloWorld_第6张图片

【flutter】【01】环境搭建_HelloWorld_第7张图片

最后不要忘了点击【确定】来保存设置好的环境变量。

【flutter】【01】环境搭建_HelloWorld_第8张图片

点击进入https://mirrors.tuna.tsinghua.edu.cn/help/flutter/页面:

【flutter】【01】环境搭建_HelloWorld_第9张图片

点击进入:https://mirrors.tuna.tsinghua.edu.cn/flutter/flutter_infra/releases/stable/页面:

【flutter】【01】环境搭建_HelloWorld_第10张图片

点击进入:https://mirrors.tuna.tsinghua.edu.cn/flutter/flutter_infra/releases/stable/windows/页面,找一个你所需的flutter版本,开始下载:

【flutter】【01】环境搭建_HelloWorld_第11张图片

我在这儿选择使用最新版本(截止目前):

【flutter】【01】环境搭建_HelloWorld_第12张图片

安装flutter

进入https://flutter.cn/docs/get-started/install页面:

【flutter】【01】环境搭建_HelloWorld_第13张图片

进入https://flutter.cn/docs/get-started/install/windows页面:

【flutter】【01】环境搭建_HelloWorld_第14张图片

通过这个页面就可以看出flutter只需要解压缩即可安装:将下载好的flutter压缩包解压,然后把其中的 flutter 目录整个放在你想放置 Flutter SDK 的路径中(例如 C:\src\flutter)。

但是需要注意一点:请勿将 Flutter 安装在需要高权限的文件夹内,例如 C:\Program Files\。

这里我将其解压缩到了D盘:

【flutter】【01】环境搭建_HelloWorld_第15张图片

然后将flutter/bin目录配置到环境变量中:

【flutter】【01】环境搭建_HelloWorld_第16张图片

至此,flutter已经安装完毕了。

在AndroidStudio中集成flutter

打开安装好的AndroidStudio,在Plugins中搜索安装flutter、dart插件,安装好后重启AndroidStudio:

【flutter】【01】环境搭建_HelloWorld_第17张图片

【flutter】【01】环境搭建_HelloWorld_第18张图片

已安装flutter、dart插件:

【flutter】【01】环境搭建_HelloWorld_第19张图片

打开Settings,安装:

【flutter】【01】环境搭建_HelloWorld_第20张图片

安装完成后,记得点击【Apply】、【OK】。

打开命令行工具(CMD):依次运行如下两个命令,在运行第二个命令时,需要输入很多次y

  1. flutter doctor

  2. flutter doctor --android-licenses

如果没有问题,那么就可以创建第一个flutter项目了。

使用AndroidStudio开发flutter

创建一个flutter项目:

【flutter】【01】环境搭建_HelloWorld_第21张图片

【flutter】【01】环境搭建_HelloWorld_第22张图片

点击【Finish】,创建一个flutter项目。

创建好flutter项目后,推荐使用本地gradle。如下操作:

【flutter】【01】环境搭建_HelloWorld_第23张图片

【flutter】【01】环境搭建_HelloWorld_第24张图片

复制services.gradle.org/distributions/gradle-6.7-all.zip到浏览器地址栏中,进行下载。

下载完后,解压缩:

【flutter】【01】环境搭建_HelloWorld_第25张图片

打开Settings:

【flutter】【01】环境搭建_HelloWorld_第26张图片

将刚才解压缩好的D:\gradle\gradle-6.7配置到AndroidStudio中:

【flutter】【01】环境搭建_HelloWorld_第27张图片

不要忘记点击【Apply】、【OK】退出。

然后在gradle-wrapper.properties中,将distributionUrl替换为:file:///D:/gradle/gradle-6.7-all.zip

【flutter】【01】环境搭建_HelloWorld_第28张图片

因为国内网络的问题,将build.gradle中的仓库替换为:

【flutter】【01】环境搭建_HelloWorld_第29张图片

buildscript {
    ext.kotlin_version = '1.3.50'
    repositories {
//        google()
//        mavenCentral()
        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' }
        maven { url 'https://mirrors.tuna.tsinghua.edu.cn/flutter/download.flutter.io' }
    }
}

allprojects {
    repositories {
//        google()
//        mavenCentral()
        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' }
        maven { url 'https://mirrors.tuna.tsinghua.edu.cn/flutter/download.flutter.io' }
    }
}

经过踩坑发现,运行flutter程序需要网络权限(以前的1.x版本是不需要的),因此:

【flutter】【01】环境搭建_HelloWorld_第30张图片

在AndroidManifest.xml中,添加:

【flutter】【01】环境搭建_HelloWorld_第31张图片

到这里,就可以运行flutter程序了。

打开Android虚拟机:

【flutter】【01】环境搭建_HelloWorld_第32张图片

【flutter】【01】环境搭建_HelloWorld_第33张图片

运行成功:

【flutter】【01】环境搭建_HelloWorld_第34张图片


本文完,感谢您的关注支持!


你可能感兴趣的:(大前端,flutter,android,android,studio)