赞
踩
一、获取 flutter SDK
在浏览器中打开网址:https://storage.flutter-io.cn/flutter_infra_release/releases/stable/windows/flutter_windows_3.7.9-stable.zip
或者打开网址:https://flutter.cn/docs/get-started/install/windows,点击蓝色按钮就会自动开始下载
图片一、下载flutter SDK
二、解压flutter压缩包
解压刚才下载的zip压缩包至想要的路径中,如下载文件夹
图片二、解压flutter压缩包
注意:①路径中不包含特殊字符或空格②不在高权限的文件夹下如C:\Program Files\
三、更新环境变量(path)
在任务栏的搜索框中输入“env”,点击“编辑系统环境变量”
图片三、搜索编辑环境变量
在跳出来的窗口中,点击“环境变量”按钮
图片四、点击“环境变量”按钮
在弹出来的窗口中,找到“用户变量”中的“Path”并点击,再点击“编辑”按钮
图片五、找到“用户变量”中的“Path”
点击“编辑”按钮,在已有内容后输入英文分号,加入flutter文件夹中bin文件夹的完整路径(如图所示),编辑完成后点击“确定”按钮
图片六、编辑环境变量
由于国内特殊网络环境,还需要对系统环境变量进行设置
在“系统变量”下点击“新建”按钮,输入变量名“PUB_HOSTED_URL”以及变量值“https://pub.flutter-io.cn”并点击“确定”按钮,再次点击“新建”按钮,输入变量名“FLUTTER_STORAGE_BASE_URL”以及变量值“https://storage.flutter-io.cn”并点击“确定”按钮
图片七、系统变量设置
对所有窗口点击“确定”按钮进行保存操作
四、运行flutter doctor
在任务栏的搜索框中输入“cmd”,点击“命令提示符”
图片八、打开命令提示符
通过“cd”指令并回车先跳转到flutter文件夹所在位置,如:cd C:\Users\lt\Downloads\flutter_windows_3.7.9-stable\flutter\bin
输入“flutter doctor”并回车
稍等片刻,如果配置正确flutter会进行相关检测并进行报告,目前对报错无需理会,之后会有其他组件安装操作
图片九、cmd相关操作
五、安装Android Studio
在Android Studio官方网站(https://developer.android.google.cn/studio)下载Android Studio安装包并进行安装,如无特殊需要,安装及运行过程中不断点击下一步即可
图片十、安装Android Studio
安装完成后Android Studio会自动运行,在弹出窗口中不进行更改,直接点击“OK”,在跳出来的窗口中询问是否发送数据报告给谷歌,选择“Don't Send”并继续
图片十一、不进行更改
之后,会弹出来一个报错界面,由于国内特殊网络环境,也需要对Android Studio的网络进行设置,点击“Setup Proxy”按钮,进行网络代理设置
图片十二、网络代理报错
在弹出来的窗口中点击选中“Auto-detect proxy settings”,同时勾选下方“Automatic proxy configuration URL:”,并在之后的输入框中输入“http://mirrors.neusoft.edu.cn:80”并点击“OK”
图片十三、设置网络代理
在设置完成后,可能还会报错,这时无需理会,若无特殊需要,在接下类的设置中可以一直点击“Next”继续,在“License Agreement”窗口中,分别对“android-sdk-license”和“intel-android-extra-license”在右下角勾选"Accept“,之后点击“Finish”按钮完成设置
图片十四、同意相关证书
Android Studio会进行相关组件的下载和安装操作,在操作结束后,点击“Finish”按钮
图片十五、Android Studio组件下载和安装
再次运行“flutter doctor”,查看是否已识别到Android Studio
图片十六、查看是否识别到Android Studio
六、配置Android模拟器
在Android Studio中点击“More Actions”,再点击“Virtual Device Manager”
图片十七、配置Android模拟器
在弹出来的窗口中点击“Create virtual device”
图片十八、创建模拟设备
选择想要的模拟设备并下载想要的安卓系统版本
图片十九、选择想要的设备
图片二十、下载想要的安卓系统
点击“Next”,在接下来的页面中可以进行一些个性化操作,在“Emulated Performance”一栏选择“Hardware - GLES 2.0”开启硬件加速,点击“Finish”按钮完成设置
图片二十一、个性化设置
点击像播放标志一样的按钮,就可以启动手机模拟器了
图片二十二、手机模拟器列表
七、同意Android协议
在此之前, 在Android Studio中点击“More Actions”,再点击“Virtual Device Manager”
图片二十三、配置SDK
点击右侧“SDK Tools”,勾选“Android SDK Command-line Tools (latest)”并点击“Next”按钮,软件会自动能够进行下载安装
图片二十四、安装命令行工具
输入“flutter doctor --android-licenses”并回车,在提示下不断输入“y”并回车
图片二十五、同意相关协议
再次运行“flutter doctor”
图片二十六、flutter doctor结果中Android toolchain已打勾
八、安装flutter和dart插件
在Android Studio主菜单中点击“Plugins”,在“Marketplace”下搜索框输入“flutter”,点击“Install”进行安装,在安装时会提示安装“Dart”,也选择安装,安装完成后重启Android Studio
图片二十七、安装flutter插件
图片二十八、安装dart插件
九、修改Android Studio网络代理文件
进入flutter\packages\flutter_tools\gradle,用记事本打开flutter.gradle文件
图片二十九、修改flutter网络配置
找到代码段
buildscript { repositories { google() mavenCentral() } dependencies { /* When bumping, also update ndkVersion above. */ classpath 'com.android.tools.build:gradle:7.3.0' }}
并将其修改为
buildscript { 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' allowInsecureProtocol = true } } dependencies { /* When bumping, also update ndkVersion above. */ classpath 'com.android.tools.build:gradle:7.3.0' }}
再找到
private static final String DEFAULT_MAVEN_HOST = "https://storage.googleapis.com";
private static final String DEFAULT_MAVEN_HOST = "https://storage.flutter-io.cn";
进入flutter\packages\flutter_tools\gradle,用记事本打开resolve_dependencies.gradle文件
String storageUrl = System.getenv('FLUTTER_STORAGE_BASE_URL') ?: "https://storage.googleapis.com"
String storageUrl = System.getenv('FLUTTER_STORAGE_BASE_URL') ?: "https://storage.flutter-io.cn"
保存、重启Android Studio
十、创建flutter项目
打开Android Studio,点击“New Flutter Project”,点击左下角“Flutter”,选择flutter文件夹所在位置,点击“Next”按钮
图片三十、创建flutter项目
设置项目名称,其他可根据需要进行设置,点击“Create”按钮继续
图片三十一、设置项目名称
稍等片刻,软件中就会加载示例代码
图片三十二、示例代码
找到项目左侧“android”文件夹中“build.gradle”文件并双击在IDE中打开
图片三十三、修改相关配置
找到
buildscript { ext.kotlin_version = '1.7.10' repositories { google() mavenCentral() } dependencies { classpath 'com.android.tools.build:gradle:7.2.0' classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version" }}
并修改为
buildscript { ext.kotlin_version = '1.7.10' 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' allowInsecureProtocol true } } dependencies { classpath 'com.android.tools.build:gradle:7.2.0' classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version" }}
allprojects { repositories { google() mavenCentral() }}
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' allowInsecureProtocol true } }}
在修改完成后进行保存
点击右侧“Device Manager”,启动刚才设置的手机模拟器
图片三十四、启动手机模拟器
点击右上方像播放标志一样的图标,让应用在手机模拟器中运行
图片三十五、运行应用
第一次加载比较缓慢,需要耐心等待,在加载完成后就会显示出应用界面
图片三十六、应用模拟
在这个简单的示例应用中,通过点击右下角的加号,界面中央的数字就会依次递增
图片三十七、示例应用
到这里,flutter和Android Studio就已经成功进行了安装和配置,恭喜你!
参考:
1.flutter官网安装教程
(https://flutter.cn/docs/get-started/install)
2.Flutter Sdk国内镜像如何配置?
(http://bbs.itying.com/topic/638ad9b23fd95910e036af7f)
3.Android 设置HTTP代理为国内镜像源
(http://t.csdn.cn/USdNx)
4.一直停在Running Gradle task 'assembleDebug'...
(https://www.offeu.com/www/index_id_261.html)
5.AS解决阿里云的http或https的问题,Using insecure protocols with repositories, without explicit opt-in,
(http://t.csdn.cn/SmhXQ)