AndroidStudio中配置Flutter插件

时间:2024-04-04 18:03:10

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

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

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

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

2:优势
提高开发效率
       同一份代码开发IOS和Android ;

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

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

用户体验良好
        Flutter框架提供丰富的界面风格(Android、Ios);

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

开源
3:分层框架

AndroidStudio中配置Flutter插件


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

Engine (C++)
4:相关命令
flutter doctor 查看相关配置是否成功
flutter help/flutter   查看帮助,显示所有命令列表

AndroidStudio中配置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后再次查看会显示如图所示效果:

AndroidStudio中配置Flutter插件


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

AndroidStudio中配置Flutter插件


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

AndroidStudio中配置Flutter插件

AndroidStudio中配置Flutter插件

6:创建Flutter工程

AndroidStudio中配置Flutter插件

AndroidStudio中配置Flutter插件

AndroidStudio中配置Flutter插件

 

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

AndroidStudio中配置Flutter插件

7:目录结构

AndroidStudio中配置Flutter插件


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

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

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

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

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

AndroidStudio中配置Flutter插件

    

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

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

AndroidStudio中配置Flutter插件

AndroidStudio中配置Flutter插件

   

  

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

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

这里补充说明下,如果编译如下的错误:

AndroidStudio中配置Flutter插件

AndroidStudio中配置Flutter插件

根据图中所指定的文件找到对应的行数,表示在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'}