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：分层框架

• Framework (Dart)

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

• Engine (C++)

4：相关命令

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

• 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后再次查看会显示如图所示效果：

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

• 配置Flutter及Dart路径

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

6：创建Flutter工程

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

7：目录结构

• android目录

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

• ios目录

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

• lib目录

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

• pubspec.yaml

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

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

    

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

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

   

  

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

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

这里补充说明下，如果编译如下的错误：

根据图中所指定的文件找到对应的行数，表示在flutter.gradle中无法下载对应的库，所以在android studio的gradle中更换了仓库地址后也需要在flutter.gradle中添加如下的仓库地址，保存后重新编译安装flutter项目成功。

    maven{ url 'https://maven.aliyun.com/repository/google' }
    maven{ url 'https://maven.aliyun.com/repository/jcenter' }
    maven{url 'http://maven.aliyun.com/nexus/content/groups/public'}