1.第一节 - Flutter教程之AndroidStudio配置Flutter工程(并运行第一个项目)

简介: Flutter之AndroidStudio配置Flutter工程并运行第一个项目

 小T带你通俗易懂的去理解~

1.下载Flutter SDK

(不知道不同版本有什么区别时,可以参考这篇文章)image.gif编辑

(还未发布Flutter 不同版本之间的区别,敬请期待~)

FlutterSDK下载地址:https://flutter.dev/docs/development/tools/sdk/releases (需要翻墙)

(可以找热心的小T获取哦)image.gif编辑

2.将下载的zip解压到自己的磁盘目录下

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

然后在系统变量Path中配置Flutter系统环境

image.gif编辑

3.由于flutter官网需要翻墙,一些flutter命令可能无法使用,这里我们需要配置国内大神搭建的临时镜像image.gif编辑

PUB_HOSTED_URL=https://pub.flutter-io.cn

image.gif编辑

FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

image.gif编辑

重启Windows以应用此更改

4.按win+R打开cmd,输入flutter doctor,若出现下图则表明配置flutter环境成功

image.gif编辑

(没有打勾也没有关系,下面的教程会一一解决)image.gif编辑

5.打开AndroidStudio,ctrl+s+alt打开安装插件界面或者找File-->setting也可;(随便进入一个文件)

image.gif编辑

第一步打开Plugins,第二步,在Marketplace中安装Flutter和Dart。

image.gif编辑

安装成功后可以在Installed中看到已经安装的插件

image.gif编辑

然后重启一下AndroidStudio!

再次打开,就可以创建Flutter工程了~

6.创建并运行第一个Flutter工程(在这里会有千千万万个问题)

遇到创建或者运行Bug问题请参考这篇第一次运行Bug总结(血与泪的总结)           image.gif编辑

第一步:New Flutter Project

image.gif编辑

选择自己想要的模块,第一个为Flutter工程

想写属于自己的插件请参考这篇文章

不知道Android原生和Flutter混编怎么搞的请参考这篇文章

选择好后直接Next

配置Flutter工程,完成后直接Next

image.gif编辑

Finish              

image.gif编辑

我们现在终于进入了Flutter工程

选择模拟器运行

image.gif编辑

第一次运行会去下载所需要的Gradle,运行有点慢

成功!!!image.gif编辑

image.gif编辑

欢迎留言纠正 ~


相关文章
|
7月前
|
开发工具 Android开发 iOS开发
如何在Android Studio中配置Flutter环境?
如何在Android Studio中配置Flutter环境?
1782 61
|
7月前
|
缓存 前端开发 JavaScript
Flutter Demo 的快速编译与运行
Flutter Demo 的快速编译与运行
207 12
|
7月前
|
缓存 Android开发 开发者
Flutter环境配置完成后,如何在Android设备上运行Flutter应用程序?
Flutter环境配置完成后,如何在Android设备上运行Flutter应用程序?
1310 62
|
7月前
|
Dart 开发工具 Android开发
在macOS系统上配置Flutter环境的步骤
在macOS系统上配置Flutter环境的步骤
895 62
|
7月前
|
开发工具 Android开发 开发者
在Android设备上运行Flutter应用程序时,如果遇到设备未授权的问题该如何解决?
在Android设备上运行Flutter应用程序时,如果遇到设备未授权的问题该如何解决?
452 61
|
7月前
|
缓存 IDE 开发工具
Flutter Demo 的快速编译与运行
Flutter Demo 的快速编译与运行
266 15
|
9月前
|
前端开发 Java Shell
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
631 20
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
9月前
|
缓存 Java 测试技术
【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
1170 3
【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
|
10月前
|
Dart 前端开发 容器
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
348 18
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
9月前
|
Dart 前端开发 Android开发
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
307 4
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex