01Flutter学习之环境搭建&Vscode+Flutter

原创 已于 2022-03-07 18:28:12 修改 · 3.3k 阅读 · 7 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vscode #flutter #visual studio code

于 2022-03-07 18:21:21 首次发布
本文详细介绍了如何使用VSCode搭建Flutter开发环境，包括配置Java环境、安装Flutter SDK、设置Android环境、配置VSCode以及连接模拟器或真机的步骤。适合初学者，避免踩坑。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

文章目录

目录

文章目录

前言

二、具体演示过程

1.配置 Java 环境+配置环境变量

2.下载Flutter SDK​

3.配置 Android 环境

4.配置 VSCode

         5.虚拟机&&真机

总结

前言

flutter环境搭建。
本文章分享的是Vscode+Flutter
写给刚接触flutter的小伙伴们

无论选择Android studio还是vscode编译，我这篇文章都会帮你梳理清晰

因为这是我踩过的坑

ps：选择vscode编译是跳不过第三步的！！！

一、运行flutter安装什么？

1.配置 Java 环境+配置环境变量

2.下载和安装 Flutter SDK

3.配置 Android 环境

4.配置 VSCode

5.调试（真机或者模拟器）

二、具体演示过程

1.配置 Java 环境+配置环境变量

【网址】Java Downloads | Oracle

 

 JAVA_HOME和CLASSPATH
 

（由于我电脑之前有所以我就跳过了这一步找了个别人的，链接放在下面）（基本是这样）
 

 Java JDK安装与配置_李旭的博客-CSDN博客_javajdk
 

电脑有编译过代码的可能不用安装这一步
 

补充：调出配置环境变量窗口的快捷方式
 

 

 

                

        

    

    
  


        

            

                      
                        最低0.47元/天 解锁文章
                        

                          
200万优质内容无限畅学

                          
                        

                      
            

        


    

      

        

            

              
                
                  Syvlia005
                
              
            

            

                关注
              
            

        

        

          
      

      










                



	

		

			

				
					
在 VSCode 中搭建 Flutter 开发环境并运行项目

				
			

			

				

					Chloeeeeeeee的博客
				

				

					06-07
					
					1万+
					
				

			

		

		

			
				
在 VSCode 中运行 Flutter 项目并启动虚拟机的步骤如下：首先，安装 Flutter SDK 并添加其 bin 目录到系统 PATH，然后在 VSCode 中安装 Flutter 和 Dart 插件。接着，下载并安装 Android Studio，配置 Android 模拟器。创建 Flutter 项目后，打开终端启动模拟器，或通过 VSCode 工具栏选择设备，按 F5 运行项目。最后，使用调试控制台设置断点和检查变量，进行调试。这样即可在 VSCode 中运行和调试 Flutter 项目。

			
		

	



                

            
              



	

		

			

				
					
搭建使用VSCode进行Android开发的Flutter环境(windows10+VSCode+Android SDK+Flutter SDK)

					
热门推荐

				
			

			

				

					SVNzK的博客
				

				

					11-21
					
					2万+
					
				

			

		

		

			
				
文章目录缘起资源下载开始安装
缘起
虽然进行安卓开发使用Android studio 比较方便 ,但是因为AS太臃肿而且还有一些404问题,就在打算如何进行高效的Android开发,于是找到了Flutter SDK, 他支持使用IDE进行开发, 也就是可以直接脱离AS以及java代码(真的很头大)
于是折腾了一个晚上终于搞好了.
资源下载
我们需要的东西有VSCode &  Flutter...

			
		

	



              


  
              

                


	

		

			

				
					
Flutter 开发环境搭建-VS Code篇

				
			

			

				

					张营的技术博客
				

				

					03-10
					
					4769
					
				

			

		

		

			
				
Flutter环境搭建，包括Android Studio和VSCode两种IDE环境搭建，基础环境安装、插件安装、虚拟机安装、项目初始化、项目运行等。

			
		

	





	

		

			

				
					
有手就行 | Flutter在VSCode（Visual Studio Code）中的安装与配置

					
最新发布

				
			

			

				

					jo11y的博客
				

				

					05-03
					
					4286
					
				

			

		

		

			
				
这篇文章记录了在Windows系统中使用VSCode安装并配置Flutter框架，以及通过代理或镜像网站对相关配置问题的解决。按步骤来，有手就行。觉得有用的 | 点赞 | 收藏 | 关注 | 支持下~

			
		

	



		

			
		



	

		

			

				
					
Flutter--VsCode环境搭建

				
			

			

				

					weixin_46013619的博客
				

				

					08-31
					
					510
					
				

			

		

		

			
				
下载SDK
https://flutter.dev/docs/development/tools/sdk/releases#windows
稍微有些卡，也可自行去github下载



将下载好的sdk安装在你想安装的目录下面，并且配置你的全局环境变量（flutter解压位置，这里我是E盘下）
E:\flutter\flutter\bin





打开cmd验证安装情况
输入flutter -v 出现下图所示 即为安装成功



使用flutter doctor检测环境是否配置成功(因为之前配置过，所..

			
		

	





	

		

			

				
					
VS CODE下配置Flutter环境（可不装Android Studio）

				
			

			

				

					tjhwa的博客
				

				

					06-25
					
					2192
					
				

			

		

		

			
				
VS CODE下配置Flutter环境（可不装Android Studio）

			
		

	





	

		

			

				
					
使用VSCode配置Flutter

				
			

			

				

					2301_79678253的博客
				

				

					03-17
					
					2520
					
				

			

		

		

			
				
本周（学期第四周）任务：1.简单学习Flutter，完成环境安装与配置2.探索Flutter与Unity集成方案。

			
		

	





	

		

			

				
					
Flutter+VSCode 环境搭建

				
			

			

				

					weixin_38170468的博客
				

				

					09-02
					
					201
					
				

			

		

		

			
				
1. 下载Flutter SDK
　　https://flutter.io/sdk-archive/#windows
　　配置镜像服务，添加用户变量：
　　PUB_HOSTED_URL=https://pub.flutter-io.cn　　FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
　　系统变量Path中添加 E:...

			
		

	





	

		

			

				
					
Window Flutter 环境搭建（VSCode + 单独运行Android 虚拟机）

				
			

			

				

					杨铮的博客
				

				

					10-15
					
					1万+
					
				

			

		

		

			
				
官网文档：https://flutterchina.club/setup-windows/

官网以及很多网上文章的开发都是基于Android ，因为它能创建不同类型移动设备虚拟机。但个人始终觉得它太庞大，启动慢耗资源，但我们使用Flutter又离不开虚拟机。 经过实践，现在能成功的单独启动移动设备虚拟机使用VSCODE进行开发了。

一： 各种安装和配置

按着官网文档设置环境变量，安装JDK，...

			
		

	





	

		

			

				
					
『跨端框架』Flutter环境搭建

				
			

			

				

					一个专注于客户端开发的技术er，不定期更新Android，Flutter，HormonyOS等方向的使用心得和感悟
				

				

					05-02
					
					1291
					
				

			

		

		

			
				
Flutter是谷歌开发的一款开源， 免费的，基于Dart语言的UI框架，可以快速在IOS和Android上构建高质量的原生应用，而且还可以构建桌面应用，web应用和嵌入式应用。它最大的特点就是跨平台和高性能。Dart是由谷歌，在2011年开发的计算机编程语言，它可以被用于web, 服务器，移动应用和物联网等多个领域。号称要取代JavaScript。

			
		

	





	

		

			

				
					
Flutter-VSCode安装和配置

				
			

			

				

					SanPhantom的博客
				

				

					11-30
					
					5750
					
				

			

		

		

			
				
第一步：安装Flutter

window下Flutter官网下载链接：https://flutter.dev/docs/development/tools/sdk/releases#windows

​		下载完Flutter后，解压到自己的本地的安装路径。随后进入flutter安装路径，运行该目录下的flutter_console.bat文件，接下来就可以来测试Flutter安装成功，可以在该安装目录下打开PowerShell，执行flutter doctor命令行来进行检测。运行后的正确结果见下图：


			
		

	





	

		

			

				
					
VSCode下的flutter

				
			

			

				

					qq_34497319的博客
				

				

					08-15
					
					610
					
				

			

		

		

			
				
VSCode安装Flutter插件




			
		

	





	

		

			

				
					

                                vsCode 编写flutter
    

				
			

			

				

					测试0901-1
				

				

					03-07
					
					570
					
				

			

		

		

			
				
昨天看到云栖社区发布的，咸鱼也公布了flutter框架，感觉很成熟了，所以很是感兴趣，开始学习一下,后续会再次更新~
原来开发原生安卓的小伙伴们，肯定都熟悉Android Studio，都知道这个AS是很耗内存的，鉴于用苹果手机的我，只能在电脑上运行虚拟机，这样一搞我的电脑会很吃内存，很卡顿，而且vsCode 已经很好地支持了flutter编写，所以我们...

			
		

	





	

		

			

				
					
VsCode开发Flutter应用

				
			

			

				

					此心光明事上练的博客
				

				

					01-20
					
					1967
					
				

			

		

		

			
				
如果你习惯用 Android Studio 的话可以直接用 Android Studio 直接开发 Flutter。

但是 Android Studio 比较耗费电脑资源，个人推荐使用 Vscode（下载地址：https://code.visualstudio.com/）

一、VsCode安装Flutter插件与Dart插件







二、Vscode 中打开 flutter 项目进行开发

三、运行 Flutter 项目

命令：flutter run



r 键：点击后热加载，也就算是重新加.

			
		

	





	

		

			

				
					
VSCode中搭建Flutter开发环境

				
			

			

				

					m0_46527751的博客
				

				

					01-09
					
					1195
					
				

			

		

		

			
				
VSCode中搭建Flutter开发环境安装插件运行Flutter项目
安装插件
除了前面Dart学习时我们已经安装的Dart插件外，还有一下两个插件
（Flutter插件和Flutter提示工具）

运行Flutter项目
点击文件，选择我们上一篇博客在AS中创建的项目

点击选择文件夹后

在终端输入flutter run(此时没有连接虚拟机)
按照指令选择谷歌后，结果运行在了网页上

查看可以运行的设备可以点击右下角，然后上方会弹出提示

由于是第一次使用，我随便点到了Create Android e

			
		

	





	

		

			

				
					
VScode 运行 flutter 项目

				
			

			

				

					qq_33051709的博客
				

				

					02-14
					
					1691
					
				

			

		

		

			
				
请确保 flutter安装环境完成 ，https://flutterchina.club/setup-linux/
然后运行命令： flutter run 即可
先启动模拟器或者链接真机



			
		

	





	

		

			

				
					
vscode配置flutter开发环境，不需要安装第三方安卓模拟器

				
			

			

				

					tyeerth的博客
				

				

					05-28
					
					1万+
					
				

			

		

		

			
				
vscode配置flutter开发环境，使用Android studio自带的安卓模拟器，不需要安装第三方模拟器，即可实现vscode代码实时调试(热加载）

			
		

	





	

		

			

				
					
Windows构建Flutter环境，无法访问maven.google.com

				
			

			

				

					ouhuanquan的博客
				

				

					02-25
					
					1万+
					
				

			

		

		

			
				
flutter 环境变量配置好之后，运行flutter doctor出现问题如下：



X HTTP host https://maven.google.com/ is not reachable. Reason: An error occurred while checking the HTTP host，

尝试很多方法都无法解决，Google好久也没有解决办法，自己尝试修改http_host_validator.dart文件后得到解决，特此记录，解决办法如下：

1、找到flutter sdk的文件

			
		

	





	

		

			

				
					
vscode flutter环境搭建

				
			

			

				

					06-09
				

			

		

		

			
				
好的，下面是VSCode搭建Flutter环境的步骤：  1.首先，你需要安装 Flutter SDK。具体安装方式可以参考官网：https://flutter.dev/docs/get-started/install  2.打开VSCode，在扩展商店中搜索并安装以下扩展： - Dart...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值