Flutter 环境配置

简介: Flutter 环境配置

Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费、开源的。



文章目录





学习一门新的语言、新的开发方式,先从开发环境开始配起:

1,下载SDK安装包

点击下载

如果下载不了,可以选择github下载


注意,不要将flutter安装到需要一些高权限的路径如C:\Program Files\

下载好安装包之后解压

2,配置环境变量

在执行flutter doctor检测是否安装完成之前,要先配置好环境变量才行

所以先配置环境,以下为Windows示例(mac示例):

解压之后,找到bin目录


image.png


然后桌面右键 我的电脑>属性>高级系统设置>环境变量>在用户变量中的Path中添加上图中到bin目录的路径,比如flutter\bin

9150852



3,执行flutter doctor

找到解压flutter目录下的flutter_console.bat ,双击执行


image.png


执行flutter doctor检测是否安装完成


在命令提示符或PowerShell窗口中运行此命令。目前,Flutter不支持像Git Bash这样的第三方shell。



image.png



执行结果:


image.png



这里出现了4个issues,果然万事开头难,然后中间难,然后结尾难。


先不慌,大致过一下这几个红色的×:


首先第一个是flutter Unable to locate Android SDK. 找不到Android SDK?明明有的呀,继续看,它说如果安装在一个自定义的路径,要设置ANDROID_HOME,ok 那就加上ANDROID_HOME变量,变量值就是Android SDK路径



image.png


然后看下面的异常,我有两个AS版本,随便看其中一个就行,问题不大,原来是Flutter和Dart的插件没安装

不慌,先配置ANDROID_HOME变量,配置好之后再次执行flutter doctor,发现结果还是不行?!


返回继续看文档,发现了无任何特效的一句话重启Windows以应用此更改 ,原来是忘了重启了,既然要重启,那顺便把插件也装了吧,反正也是要重启AS的


在Settings>Plugins中搜索flutter,然后安装,安装之前会提示先装Dart插件,同意即可


image.png



安装完成之后,重启。


重启之后,打开之前解压的flutter目录,双击打开flutter_console.bat,再次执行flutter doctor,结果如下:



image.png



ok,Android SDK路径没问题了,AS3.2的插件也装了,接下来就是创建一个新项目跑起来试试了。

4,创建新项目

重启之后创建项目就多了一条New Flutter Project...


image.png

项目名称是小写才行,然后Next、Finish 就行


然后点击运行,选择一个模拟器,效果如下:


image.png



ok,这就跑起来了,初始就是官方给的例子,顺便加了一句绿色的Hello World , Hello Flutter


ok,Flutter的环境配置就到此完成了,接下来就是Flutter开发的 入门>进阶>放弃。。


官方配置文档



5,Flutter 学习资料

Flutter官网

Flutter中文网

Flutter for Android 开发者

Flutter github

咸鱼技术

掘金Flutter专栏

升级 Flutter


6,Flutter macOS环境配置

https://blog.csdn.net/yechaoa/article/details/95389931

目录
相关文章
|
6月前
|
Dart 开发工具 Android开发
如何验证Flutter环境配置是否成功?
如何验证Flutter环境配置是否成功?
445 65
|
6月前
|
开发工具 Android开发 iOS开发
flutter 环境配置
flutter 环境配置
1047 63
|
6月前
|
缓存 Android开发 开发者
Flutter环境配置完成后,如何在Android设备上运行Flutter应用程序?
Flutter环境配置完成后,如何在Android设备上运行Flutter应用程序?
1021 62
|
8月前
|
缓存 Java 测试技术
【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
854 3
【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
|
数据可视化 Linux Android开发
Flutter相关痛点解决问题之研发链路中的环境配置和打包集成问题如何解决
Flutter相关痛点解决问题之研发链路中的环境配置和打包集成问题如何解决
|
前端开发 编译器 API
Flutter 启动及环境配置
Flutter 启动及环境配置
1039 0
Flutter 启动及环境配置
|
Dart Shell 开发工具
Flutter macOS环境配置
Flutter macOS环境配置
393 0
Flutter macOS环境配置
|
Dart Java 开发工具
Flutter之环境配置与项目搭建
Flutter提供了丰富的组件、接口,开发者可以很快地为 Flutter添加 native扩展。同时 Flutter还使用 Native引擎渲染视图。
2133 0
|
9月前
flutter开发中Use ‘const’ with the constructor to improve performance. Try adding the ‘const’ keyword to the constructor invocation.报错如何解决-优雅草卓伊凡
flutter开发中Use ‘const’ with the constructor to improve performance. Try adding the ‘const’ keyword to the constructor invocation.报错如何解决-优雅草卓伊凡
116 1
|
8月前
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
411 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex

热门文章

最新文章

  • 1
    flutter3-wetrip跨平台自研仿携程app预约酒店系统模板
    225
  • 2
    通过外部链接启动 Flutter App(详细介绍及示例)
    295
  • 3
    【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
    854
  • 4
    零基础构建即时通讯开源项目OpenIM移动端-Flutter篇
    471
  • 5
    flutter3-dart3-dymall原创仿抖音(直播+短视频+聊天)商城app系统模板
    277
  • 6
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    411
  • 7
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    200
  • 8
    当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
    216
  • 9
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    469
  • 10
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    249