Flutter基础篇(1)-- AndroidStudio中配置Flutter插件

1:前言

Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全

世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费、开源的。(这句话有点熟悉哈 ~ ~)

应用程序是用Dart语言编写的,无需移动开发经验即可开始使用。Flutter 基于底层skia直接渲染,整个框架的中心思想是用

widget来构建ui,当widget发生改变时,Flutter会对比前后变化,并更改不同的部分。

2:优势

  • 提高开发效率

       同一份代码开发IOS和Android ;

       在应用运行的状态下更改代码并重新加载(通过热重载);

       修复崩溃并从应用停止的地方调试

  • 用户体验良好

        Flutter框架提供丰富的界面风格(Android、Ios);

        不受原生控件的限制,实现定制、美观的设计

  • 开源

3:分层框架

Flutter基础篇(1)-- AndroidStudio中配置Flutter插件_第1张图片

  • Framework (Dart)

       Widgets:在flutter中大多数东西都是widget,包括对齐、填充、布局、文本等

  • Engine (C++)

4:相关命令

  • flutter doctor 查看相关配置是否成功
  • flutter help/flutter   查看帮助,显示所有命令列表

Flutter基础篇(1)-- AndroidStudio中配置Flutter插件_第2张图片

  • flutter run 运行flutter项目
  • flutter packages get  文件 pubspec.yaml中引入相同包后此命令负责将其加载到项目中

5:在Android Studio中配置Flutter插件

  •   打开官网https://flutter.io/setup-windows/下载Flutter sdk并解压到一目录
  •   把flutter的bin文件配置到系统变量path中
  •   命令窗口输入flutter doctor进行查看相关配置是否成功,如果有错误则用(X)标记 ,需根据相应错误进行处理(可自行百  度)
  •   Android studio中 安装Flutter插件,File  - Settins - Plugins  - 查找到Flutter - install,在安装Flutter插件时会自动提示下载Dart插件,只要同意即可,重启as后再次查看会显示如图所示效果:

Flutter基础篇(1)-- AndroidStudio中配置Flutter插件_第3张图片

图中标红代表Dart插件安装完成

Flutter基础篇(1)-- AndroidStudio中配置Flutter插件_第4张图片

  • 配置Flutter及Dart路径

    在Android Studio中打开设置,在Languages & Frameworks中可以看到多了Flutter和Dart两个选项,按照下图配置自己的            Flutter和Dart路径即可: 

Flutter基础篇(1)-- AndroidStudio中配置Flutter插件_第5张图片

Flutter基础篇(1)-- AndroidStudio中配置Flutter插件_第6张图片

6:创建Flutter工程

Flutter基础篇(1)-- AndroidStudio中配置Flutter插件_第7张图片

Flutter基础篇(1)-- AndroidStudio中配置Flutter插件_第8张图片

Flutter基础篇(1)-- AndroidStudio中配置Flutter插件_第9张图片

根据图示一路选择next,创建项目成功后如下所示:

Flutter基础篇(1)-- AndroidStudio中配置Flutter插件_第10张图片

7:目录结构

Flutter基础篇(1)-- AndroidStudio中配置Flutter插件_第11张图片

  • android目录

    存放Flutter与Android原生交互的代码

  • ios目录

    存放的是Flutter与Ios原生交互的一些代码

  • lib目录

    存放的是Dart语言编写的代码,核心代码,可以运行在Android/Ios平台上面;可以创建多个.dart文件

  • pubspec.yaml

    配置依赖项的文件,比如配置依赖库,或者指定本地资源(图片、字体、音频、视频等)

    引用外包语法如下图标红处,引用icon及英 文单词开源软件包

    Flutter基础篇(1)-- AndroidStudio中配置Flutter插件_第12张图片

   这时需要将依赖包安装到您的项目中,在Terminal中输入flutter packages get命令后会显示如下图所示结果,表示操作成功, 

   即可在dart文件中import相关包下的文件:

   

  Flutter基础篇(1)-- AndroidStudio中配置Flutter插件_第13张图片

综上所述,Flutter的环境配置已讲完,当你读完这些之后就可以运行第一个Flutter程序了,连接真机后直接run 即可,首次接触有失误欢迎留言,后续更新Dart语法,让你的Flutter项目更完美(ps:这段时间有的忙了~ 嘿嘿)

下面贴上Flutter中文网链接 https://flutterchina.club/get-started/codelab/ 

 

你可能感兴趣的:(Android)