Windows10 + VS code + Flutter environment set from zero;

Preparation Tool:

1, vscode [  official website download links point here ]

2, JDK [ official website Download point here , I downloaded this , jdk-8u212, install the latest version of the beginning emergence of an unknown situation, may be too high version compatibility issues arise, they returned to this version. I downloaded the time to log on, there is too slow to download or not go up, from start to finish of the operation I have used the ladder. After taking into account the operation of convenience, I use to directly to the toolkit are uploaded to the network disk. ]

  Bulk package: https://pan.baidu.com/s/15eoBzFQaingmXBENxEuuxA     extraction code: xnem; (a folder can individually download the kit)

  The whole package: https://pan.baidu.com/s/1t2NMBSIKpbAn6i2kedhKtw        extraction code: spwt;

  Note: Please try to download the official website of whether the link speeds fast enough, if a network problem occurs again Baidu network disk to download from too late.

3, Android-sdk [top network disk inside, original download page (look at the SDK tools below android-sdk_r24.4.1-windows.zip ), original download link , this link in case the download speed is not fast or climb a ladder , more than Baidu network disk under normal circumstances conscience. ] 

4, Flutter SDK [ download page original , flutter sdk already contains dart sdk]

5, gradle-5.1.1-all [version before this deadline, try a newer version of the original download page ]

 

 

Began one by one to install:

1, VS code of the software installed with the installation as usual, do not say;
   
worth mentioning is finished, direct ctrl + shift + X (or click on the following plug-ins to expand button), and enter Chinese, pops plug-Chinese (Simplified), click install, close vscode When finished, turn it back on, it is the Chinese version of the. Some plug-ins will follow is so installed.

  

 

2, install and configure the JDK JDK environment variables;

  

   

   Configuration environment variable : Right-click "My Computer" -> "Properties" -> "Advanced System Settings" -> "Advanced" -> "Environment Variables" 

   New system variables in the "JAVA_HOME" variable, the variable value: D: \ jdk (to be installed to follow the path of their own)

   

 

   New system variables in the "classpath" variable, the variable value of the contents inside the brackets, pay attention to the front there is a decimal point, this point can not be less: [;% JAVA_HOME% \ lib;% JAVA_HOME% \ lib \ tools.jar.]

   

    

   

   

 

   Find the path variable (there is not already a new, if it does not exist to create a Path) Add the variable value:% JAVA_HOME% \ bin;% JAVA_HOME% \ jre \ bin

   Note that the variable value between a ";" separated. Note that the original Path variable value end there; number, if not, to enter; then enter the number. My system is Windows10, relatively more convenient, do not worry about this ";."

   

   In this case, press "Windows + R" -> enter "cmd" -> Enter, enter java -version, if jdk version information is displayed it means the environment variable configuration successful.

   

   

 3、Android-sdk 安装;

  直接解压出来,

  

 

   我把这个包复制到了D盘(因为我的D盘是固态盘,大部分软件都放里边),并更改了文件名,双击 SDK Manager.exe (如果没有安装成功JDK,有可能会出现闪一下打不开的SDK Manager.exe  的情况),出现以下管理界面,我这里是按照它默认的勾选,直接点击安装了。

  

  

         

  

 

  现在已经安装好了 Android SDK ,后续想要添加某些功能还是可以打开 SDK Manager 来安装的。接下来,再配置下 Android SDK 的环境变量。

  还是继续 右键我的电脑-属性-高级系统设置-环境变量-系统变量...

  新建一个环境变量,变量名称为 : Android_HOM (如果已经有了就可以更改掉),变量值为:刚才转移到 D盘的资源路径。

   

 

 

 后面再把  %ANDROID_HOME%\platform-tools  ;   %ANDROID_HOME%\tools   ​​​​​​​添加到Path环境变量中 。

双击Path 命令,

选择 新建(N)  完成了,之后写点击确定按钮,继续 OK OK .

 

 这时候测试一下我们装的成功了没有。

Window( 按键)+ R ,打开运行工具,输入命令 cmd , 弹出个Windows的命令提示符,出入 android , 就弹出如下图。

 

 

 命令提示符 里边输入 adb 

 

暗示法

 

4、Flutter SDK 安装:

  我将压缩包复制到了D盘中一个新建的文件夹中。

  

  flutter文件夹放好就行了,接下来配置环境变量。到系统变量里边,双击path,新建一个新的环境变量,值为 flutter\bin 的路径,

我这里的路径为 D:\flutter-sdk\flutter\bin ,然后确定再确定。

  

  

  

   win + R ,输入cmd ,回车,打开命令行工具,输入flutter,回车 ,刚配置完环境变量 第一次使用 flutter 命令可能会有点久才反应过来,不过后面都是纵享丝滑的,成功了安装flutter了就会出现以下提示,再输入命令: flutter doctor , 用来检测开发环境的。

  

  

  

  出现这一个情况是因为之前配置的时候漏改了或者其他,其实只要配置的环境变量路径对了就行。之后重启一下。

  重启成功后,再次命令行工具里边 输入 flutter doctor ,

  

  解决 android sdk 升级失败的问题【Warning: An error occurred during installation: Failed to move away or delete existing target file: D:\android_sdk\tools】

    找到D:\android_sdk ,先将tools 文件夹拷贝一份,好处是即使弄错了还有后悔的机会。之后将原本的 tools 重命名 aabbcc(随意命名法) ,之后到 aabbcc 目录下的 bin 目录里边,看到sdkmanager.bat 文件,先记住它,复制一下头顶的路径名,我的是【D:\android_sdk\aabbcc\bin】,之后到刚才的命令行工具或者重新打开cmd,输入D:\android_sdk\aabbcc\bin\sdkmanager --update (要找到自己对应的bin文件夹),回车执行。此时会有很多warning,先忽略,过程有那么几分钟。  

 

  

  晒下我的warning 。

  

  done 提示完成后,回去看文件夹,会重新生成了个 tools 的文件夹,

  

  将新的 tools 文件夹里边的东西,全选复制,粘贴到 aabbcc 文件夹,全部替换。

  

  之后再把新生成的 tools 文件删除掉,aabbcc 重命名为 tools 。

  

   接下来,新cmd 窗口 输入 flutter doctor --android-licenses 并执行,后面就一直输入 y 回车 同意,提示 All SDK package licenses accepted 表示这一步已经成功了。再输入 flutter doctor 并执行,没有红叉表示问题不大,感叹号提示没有安装Android Studio,可以忽略,在这里并不打算使用它,提示No devices available 没有链接设备,这个要到下面链接测试的时候,链接到夜神模拟器或者真机上,就不会报这个错了。

   

 

  5、VS code 中用到的 flutter 插件和配置:

    1、Dart ;(必装)

    2、Flutter ;(必装)

    3、Flutter Widget Snippets  ;(代码片段插件,选装)

    4、Awesome Flutter Snippets ;(代码片段插件,选装)

    5、Bracket Pair Colorizer ; (代码高亮,选装)

    6、GitLens ; (代码托管,选装)

    安装完了插件后, win+ r , cmd , flutter doctor , 查看下,发现我们还缺了调试设备,那么接下来就安装下 夜神模拟器。

    

    

  6、 夜神模拟器配置  

    

    一开始开启的时候,是横屏平板形式打开的,可以通过设置,变成手机版的展现形式,还可以选择型号(后面调试的时候,显示的也是所设置的型号)。保存设置后,关闭模拟器了再次打开,显示的就是竖屏了。

    但是现在vscode 依然没有链接上模拟器,我们可以通过cmd命令:  adb connect 127.0.0.1:62001 , 出现提示connected ,表示已经链接成功。

    

    

  7、链接成功模拟器后,开始新建flutter目录。    

    首先我们设置在某个盘了,新建一个文件夹(我这里创建的文件夹名称是 flutter_file )。之后回到vscode中,按下 ctrl + shift + p , 输入 flutter ,直接出提示,选择 New Project ,之后输入项目名称,这里我的项目名称是 flutter_demo1 ,按回车出现一个弹出,选择刚才刚新建的文件夹( flutter_file ),确定后,就会出现项目文件了。输入flutter

    

    

    

     

    右下角这里会出现一些信息提示,包括 google Pixel 2 的安卓模拟器机型。

    

    

    这样就算完成了我们的app 输出。  

    

 

   8、所遇到的问题补充:待续...

     第一次搭建的时候还遇到的了其他的问题,在这没遇到,算比较顺利的。后面搜集下其他博主也遇到的相同问题,完善下我的一个搭建过程中所见所闻。

 

     -------------------------------------------------------------------------

    本文整理出来的时间跨度有点大,都是抽晚上的时间来整理的,相对慢,但也算相对详细吧。

    如有出错的地方,请大佬们轻喷。

    另外附上参考过的博客地址:

    1.windows + flutter + vscode 安装,配置,运行(详细版本)

    2.Android SDK的下载与安装

    3.Android SDK下载安装及配置教程

    4.....

    

 

Guess you like

Origin www.cnblogs.com/janty/p/11186632.html