devbox
你好赵伟
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Flutter框架之：开发环境搭建

作者：你好赵伟 | 2024-03-25 06:23:54

赞

踩

组建flutter服务器私网

第一部分 环境准备

1.首先安装Java环境

Java SE Development Kit 8

v2-b6729fa1571b7dc103f04b689a03178d_b.jpg

这里需要登录，用户名是电子邮件，密码要1位大写。

配置JAVA环境变量

① 创建JAVA_HOME

键：JAVA_HOME

值：值是jdk目录，自己找到复制过来

v2-5b7e276d49b6fa638dcc29da172e808d_b.jpg

v2-2d3921ef67e8c360a7bd018888c49a67_b.jpg

② 创建CLASSPATH 值为： .;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar

v2-ce8e71006233ba5cb1ff5286f6da2c81_b.jpg

③ 添加系统变量path中的两个变量：

C:\Program Files\Java\jdk1.8.0_231\bin

C:\Program Files\Java\jdk1.8.0_231\jre\bin

v2-8e1339dac65a18ca8400bb648af06269_b.jpg

这里很多教程让引用Java_HOME,但经我实验，还是写完整路径比较好，缺省路径cmd写javac竟然不行。

安装完成后用cmd测试一下

用java Java -version 及javac都试一试

v2-8b57745ee250b7bd315a562dcbea5efc_b.jpg

v2-f884654286eeb62f4605028021b7538a_b.png

v2-261da6627ed3f451b855fcbca50490d5_b.jpg

2.安装flutter 的SDK

下载：

Flutter SDK releases

下载完后解压到你想要的文件夹

v2-bf4c5e1d029e20edc30a365abf59d4a3_b.jpg

运行flutter_console

v2-6056847d8a0fddbde876ce483d1c49b0_b.jpg

v2-6e1a73958282dab44694b3f711846707_b.jpg

证明已有SDK，可运行

接下来配置环境变量

v2-bd92f4432c566835b848db3f6908196d_b.jpg

v2-464472cb6be1a7e4345029d063bbfe15_b.jpg

配置完后用CMD试一试

v2-379d439913633159c2c92fc20542bf6b_b.jpg

此时，用flutter doctor 命令查看自己的环境

v2-2695c3d8b9311be6ba993f291b85ae86_b.jpg

有 X或者 ！都表示环境还有问题。这里先不管 继续安装。

3. 安装Android studio

Download Android Studio and SDK tools | Android Developers

安装之后下载组件

这里有无数的坑，大部分原因是国内网络问题，经过一下午的折腾，靠梯子解决了。

阿里私服解决被墙问题

如果不靠梯子，可以用国内阿里私服代替国外服务器的方法。

如下：将bulid-grandle 文件内的内容改为

        
  1. buildscript {
  2.     ext.kotlin_version="1.3.30"
  3.     repositories {
  4.         //  google()
  5.         //  jcenter()
  6.         maven { url 'https://maven.aliyun.com/repository/google' }
  7.         maven { url 'https://maven.aliyun.com/repository/jcenter' }
  8.         maven { url 'http://maven.aliyun.com/nexus/content/groups/public'}
  9.         google()
  10.     }
  11.     dependencies {
  12.         classpath 'com.android.tools.build:gradle:3.5.3'
  13.         classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
  14.     }
  15. }
  16.  
  17. allprojects {
  18.     repositories {
  19.         // google()
  20.         // jcenter()
  21.         maven { url 'https://maven.aliyun.com/repository/google' }
  22.         maven { url 'https://maven.aliyun.com/repository/jcenter' }
  23.         maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }
  24.     }
  25. }
  26.  
  27. rootProject.buildDir = '../build'
  28. subprojects {
  29.     project.buildDir = "${rootProject.buildDir}/${project.name}"
  30. }
  31. subprojects {
  32.     project.evaluationDependsOn(':app')
  33. }
  34.  
  35. task clean(type: Delete) {
  36.     delete rootProject.buildDir
  37. }

4. Android studio安装flutter插件

v2-11b2c43b5f771215e0ecc88c38e2ae2a_b.jpg

搜索flutter

v2-fb12928cd739a5174c0577d0c3cf9d23_b.jpg

点击第一个安装,期间还会提示安装dart语言包 点同时安装即可。

安装好后如下图：

v2-f20b234c46675d50c46949b97761465a_b.jpg

此时运行flutter doctor 发现AS部分的内容已经划勾

v2-16a71ff5ea8026cdcfa3d8788d9e57a6_b.jpg

如果提示 Android toolchain 则运行：

flutter doctor --android-licenses命令进行安装

v2-5185c8638c73e658f32138c1f1448338_b.jpg

5.安装VScode插件

v2-930030f63f6e338e12b304976e84c79e_b.jpg

安装第一个即可

此时运行发现只有1个“！”号了，那个是 没有安装虚拟机

v2-4c7bf64e1336132467019929b76c6542_b.jpg

6.创建第一个程序，并安装虚拟机

首先创建一个flutter项目

打开AS，创建flutter工程

v2-c1a47b2eac5e550d80acfca2551a102a_b.jpg
创建应用

v2-d971dcff3904f792aa58bdb02e3ff916_b.jpg
填写项目信息

v2-57ad0b98b1655007f2747c7ec85ebfb1_b.jpg
填写打包信息

创建工程的时间非常长，请耐心等待

创建完成后如图：

v2-9a24385501ab17e96e0c4fbd6ad390a0_b.jpg

点击 tools →AVD 创建虚拟机（这里我的平台是Intel平台，AMD平台与之肯定不一样，具体解决方法会后续添加）

v2-ef0015a6f07d284012d2a48a702d4092_b.png

v2-d9f58c3605840b7ea2b4bf20318496e6_b.jpg

这里会问你需要给你的虚拟机装什么版本的Android系统

v2-51f690f60287fb234053b078b05e0aa3_b.jpg

选一个即可，我装的pie android 9.0 ，耐心等待下载完成。

v2-b498d97a06d44f2db1d6c0ce011ba63c_b.jpg

v2-115342f673f3539605ed980105dae83d_b.jpg

创建完成。完成后启动虚拟机

v2-dcb9ebdb3cf614ceaa985e9824e16cf7_b.jpg

v2-67a6fce12ea1b13a2207c4e64fb42f25_b.jpg

虚拟机出现后，点击debug（此处需要梯子！！！~）

v2-acecfc9dc153b6bc5a30417bfc2b7505_b.jpg

如果出现问题，不要犹豫不要怀疑自己，肯定是天朝网络的问题，自己找梯子。

启动完成后显示

v2-5daf87d4c2e43978cce414eef96c85cc_b.jpg

点击小蓝按钮，上面的数字会增加。这就是自带的DEMO啦。

此时，运行flutter doctor，发现没有任何问题，

v2-1869dccde439c380162825b25620955a_b.jpg

7.配置vscode

①、搜索flutter 下载flutter （同时会自动下载dart）

v2-ac8b0dc2e08afbeb317204b559704d8e_b.jpg

②、完成后打开flutter项目文件夹：

v2-c6ac8c7a7d830e09cdfe516dd98e7e70_b.jpg

③、打开虚拟机

方法1：

创建一个bat文件

v2-cb94524c801a2db184bf3bdd17abe97d_b.png

再电脑中找到emulator.exe，复制路径填入上面的文件

v2-0171de4a9573058433fc6610b7f10c6d_b.jpg

填入内容：

C:\Users\16282\AppData\Local\Android\Sdk\emulator\emulator.exe -netdelay none -netspeed full -avd Nexus_5X_API_29

注意：最后是虚拟机的名字，填写时要把空格用 _ 代替

v2-d9c89b171299d4ce0de99aece1b8ee13_b.png

v2-cdd3ae0f0776ee72ea02231a75818259_b.jpg

以管理员身份运行，即可打开虚拟机。

方法2：

打开vscode，打开flutter项目， 在右下角找到No device 点击一下

v2-a9fd224a8e39d11136ab3acd26beda6d_b.png

在弹出的对话框中选择虚拟机

v2-cc33aabf7411cd6e4b3f964261eb8b37_b.jpg

④、在VSCODE中打开终端（CTRL+~）

输入 flutter run 回车运行终端

v2-b51e8a09041486eb0e6fdce33ce0f2f4_b.jpg

⑤、终端操作

运行模拟器：flutter run

更新页面：R

显示网格：P

android/IOS模式切换：O

关闭终端：Q

热更新方法：用debug，按照VS的提示配置即可，配置完成后 如下

v2-d25cd22462380c96759dbbc50e97618f_b.jpg

附1：flutter常用命令

  1. flutter doctor 检测flutter运行环境
  2. flutter update 升级flutter版本

附2：flutter解决被防火墙问题

首先还是要用阿里私服

找到这个文件

v2-1396fcf5b24cdf1a66380727d3167053_b.jpg

替换其中内容：

        
  1. buildscript {
  2.     repositories {
  3.         //  google()
  4.         //  jcenter()
  5.         maven { url 'https://maven.aliyun.com/repository/google' }
  6.         maven { url 'https://maven.aliyun.com/repository/jcenter' }
  7.         maven { url 'http://maven.aliyun.com/nexus/content/groups/public'}
  8.         }
  9.         dependencies {
  10.         classpath 'com.android.tools.build:gradle:3.1.2'
  11.     }
  12. }
  13.  
  14. allprojects {
  15.     repositories {
  16.         // google()
  17.         // jcenter()
  18.         maven { url 'https://maven.aliyun.com/repository/google' }
  19.         maven { url 'https://maven.aliyun.com/repository/jcenter' }
  20.         maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }
  21.     }
  22. }
  23.  
  24. rootProject.buildDir = '../build'
  25. subprojects {
  26.     project.buildDir = "${rootProject.buildDir}/${project.name}"
  27. }
  28. subprojects {
  29.     project.evaluationDependsOn(':app')
  30. }
  31.  
  32. task clean(type: Delete) {
  33.     delete rootProject.buildDir
  34. }

第二步 修改flutter的gradle文件修改buildscript部分的内容

v2-e893d3e923a967bcd120c354fa682102_b.jpg

v2-2b0b29b7167614e5d890f2cd2c4edf66_b.jpg

修改为：

        
  1. buildscript {
  2.     repositories {
  3.         //jcenter()
  4.         // maven {
  5.         //     url 'https://dl.google.com/dl/android/maven2'
  6.         // }
  7.         maven{
  8.             url 'https://maven.aliyun.com/repository/jcenter'
  9.         }
  10.         maven{
  11.             url 'http://maven.aliyun.com/nexus/content/groups/public'
  12.         }
  13.     }
  14.     dependencies {
  15.         classpath 'com.android.tools.build:gradle:3.1.2'
  16.     }
  17. }

保存后重启。

附3：AMD处理器如何调试

AMD虚拟机真的很难用！最终我选择了连接真实手机调试

v2-ebbdf1663f561cd5f7c5cb7ed34b3e60_b.jpg

方法：（以小米8为例）

① 进入开发者模式（各手机厂商不尽相同）

进入设置→ 我的设备→全部参数→在MIUI版本处连续猛击7此开启

然后再次进入 设置→更多设置→开发者选项

启用USB调试 USB安装 USB调试（安全设置）

关闭miui优化

② 进入android studio， 选择MI8

v2-7cd50ad59b56f97bf05ab7a143d231b3_b.jpg


至此，flutter环境安装完毕，我花了将近一天的时间。大部分问题出现在网络之上，真的非常苦逼。anyway，环境已经完全安装OK，可以愉快的进行学习了，

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/307578
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。