【我们一起学Flutter】之 快速搭建Flutter开发环境

初识Flutter

2018年2月27日,在2018世界移动大会上,Google 发布了 Flutter 的第一个Beta版本,目前1.0.0正式版已经发布。Flutter 是 Google 用以帮助开发者在 IOSAndroid 两个平台开发高质量原生应用的全新移动UI框架,类似于 React Native 可以实现跨平台开发。
点击查看Flutter介绍视频

Flutter特性

  • 热重载(Hot Reload)利用 Android Studio 直接一个 Ctrl+S 就可以保存并重载,模拟器立马就可以看见效果,这一效果其实有点类似 Android StudioInstant Run
  • 借助可移植的 GPU 加速的渲染引擎以及高性能本地代码运行时以达到跨平台设备的高质量用户体验
  • 可扩展性很强:Flutter 框架本身提供了丰富的 Material DesignCupertino(iOS-flavor) 风格的控件,可自由扩展控件不受手机平台控件的限制

搭建开发环境

由于我们是 Android Studio 开发者,Flutter 支持在Android Studio 上直接进行开发,需要先装两个插件, DartFlutter ,打开 Android Studio 开发工具 File --> Setting --> Plugins 搜索这两个插件之后安装好,重启 Android Studio之后,开始新建 Flutter 工程。同时也需要安装Flutter SDK

【我们一起学Flutter】之 快速搭建Flutter开发环境_第1张图片

选择 Flutter Application 点击 Next

【我们一起学Flutter】之 快速搭建Flutter开发环境_第2张图片

进入New Flutter Application 配置界面

需要配置 Flutter SDK 路径,如果之前下载好了 Flutter SDK,直接选择就可以了。如果没有提前下载好SDK,点击右边的Install SDK 选择好SDK存放路径,稍等几分钟会自动帮我们下载好SDK。下载完毕之后,点击下一步。

【我们一起学Flutter】之 快速搭建Flutter开发环境_第3张图片

配置包名,开始享受构建第一个 Flutter 工程

在项目目录中,您应用程序的代码位于 lib/main.dart.

【我们一起学Flutter】之 快速搭建Flutter开发环境_第4张图片
Demo工程结构
  1. 定位到Android Studio 工具栏:


    Main IntelliJ toolbar
  1. target selector 中, 选择一个运行该应用的Android设备. 如果没有列出可用,请选择 Tools>Android>AVD Manager 并在那里创建一个
  2. 在工具栏中点击 Run图标, 或者调用菜单项 Run > Run.
  3. 如果一切正常, 您应该在您的设备或模拟器上会看到启动的应用程序:


    【我们一起学Flutter】之 快速搭建Flutter开发环境_第5张图片

体验热重载

Flutter 可以通过 热重载(hot reload) 实现快速的开发周期,热重载就是无需重启应用程序就能实时加载修改后的代码,并且不会丢失状态(译者语:如果是一个web开发者,那么可以认为这和webpack的热重载是一样的)。简单的对代码进行更改,然后告诉IDE或命令行工具你需要重新加载(点击reload按钮),你就会在你的设备或模拟器上看到更改。

【我们一起学Flutter】之 快速搭建Flutter开发环境_第6张图片
热重载

相关链接

  • Flutter源码链接 https://github.com/flutter/flutter
  • Flutter官方文档 https://flutter.io/docs/
  • Flutter中文文档 http://doc.flutter-dev.cn/
  • Flutter中文社区 [https://flutter-io.cn/)
  • Dart语言官方主页 https://www.dartlang.org/
  • Dart语言中文社区 http://www.cndartlang.com/
  • Dart中文官网 https://www.dart-china.org/

欢迎关注个人微信公众号,将会定期推送优质技术文章,求关注

【我们一起学Flutter】之 快速搭建Flutter开发环境_第7张图片
欢迎关注“大话微信”公众号

欢迎加入“大话安卓”技术交流群,一起分享,共同进步

【我们一起学Flutter】之 快速搭建Flutter开发环境_第8张图片
欢迎加入“大话安卓”技术交流群,互相学习提升

你可能感兴趣的:(【我们一起学Flutter】之 快速搭建Flutter开发环境)