flutter系列之flutter工程结构详解(android视角)

   flutter出来也有一年多的时间了,这个东西呢,也是用来做跨平台的,是由google主推的,作用与weex,reactive native一样,flutter的各种优势及缺点呢,我们这里就不再多说了,网上有非常多的文章供大家参考,今天我们重点来分析一下,flutter工程与我们传统的android工程有什么区别,以及这些区别的作用。

  在我们讲解本节课的内容之前,希望大家有一定的flutter基础和gradle基础,因为我们要分析的是最复杂最完整的flutter与原生的混编工程与传统的android工程的区别,在讲解区别的时候,我们又会讲解几个重要的gradle文件的作用,所以大家最好对这些知识有一个基本的了解,这样看起来才不会太吃力,好,下面我们正式开始本节课的内容。

     既然我们要讲解的是flutter工程,那么,我们首先先来创建一个flutter工程(混编工程,非纯flutter工程),如下图:

![图片描述](//img.mukewang.com/5c652f1b0001d4f102820626.png)

  如上图,下面我们就按个来分析,看一下一个flutter混编工程都有那些不同之处相对我们传统的android工程。首先第一个.gradle文件没有区别,里面就是我们当前工程使用的gradle的版本,接下来一个,就是我们的android文件夹,用来存放我们的android工程,再下来是我们的asset文件夹,用来存放flutter工程的资源,包括图片,字体,视频等任何资源文件,http_plugin大家先不看,因为他是一个插件工程,我们最后看,再下来是一个ios文件夹,里面当然是存放我们的ios工程的所有内容,再下来的lib文件夹,则是存放flutter代码的默认目录(可以修改名字,后面详细讲解),最后一个最重要的文件是pubspec.yaml文件,这个文件用来配置flutter工程所需要的依赖等,到这里其实我们就从整体上知道了,flutter工程有那些特别的地方,当然还只是停留在一个整体,下面我们以一张图来进行对比,从整体上我们来看一下与传统android工程的区别。

![图片描述](//img.mukewang.com/5c65360800018e7911500870.png)

从图中我们可以看到,其实flutter混编工程无非就是多了下面两部分,很容易理解,因为是跨平台的所以,需要一个ios的容器工程,最后一部分就是flutter工程本身的东西,包括他的资源和代码,以及依赖等。所以大家不要对flutter有恐惧觉得他有多复杂,其实只是多了一点点东西。

     下面我们就详细的讲解一下图中的各个部分,我们先从最简单的flutter工程来看,他有三个主要文件(夹),第一个lib文件夹,存放flutter部分代码,即一系列的dart文件,如图:

![图片描述](//img.mukewang.com/5c6538000001b98502500095.png)

所以如果想要学会写flutter,需要有一定的drat基础。第二部分资源文件asset文件夹,来看一下我这个工程里面放了那些内容,如图:

![图片描述](//img.mukewang.com/5c65388600018a5102160242.png)

我这个工程里主要存放了字体资源和各个模块的所用到的图。最后一个就是flutter工程自己的一个工程配置文件pubspec.yaml,下面我们来看一下这个配置文件里有哪些内容,如下:

```

#第一部分,工程相关的描述信息

name: flutter_module

description: A new Flutter module.

version: 1.0.0+1

environment:

  sdk: ">=2.0.0-dev.68.0 <3.0.0"

#第二部分,flutter工程本身所需要的依赖

dependencies:

  flutter:

    sdk: flutter

  # The following adds the Cupertino Icons font to your application.

  # Use with the CupertinoIcons class for iOS style icons.

  cupertino_icons: ^0.1.2

  device_info: 0.2.1

  intl: 0.15.7

  connectivity: 0.3.2

  english_words: ^3.1.0

  url_launcher: 4.0.1

  video_player: 0.7.2

dev_dependencies:

  flutter_test:

    sdk: flutter

  #源码依赖http_plugin插件工程

  http_plugin:

      path: ./http_plugin/

  json_serializable: ^2.0.0

  build_runner: ^1.0.0

# For information on the generic Dart part of this file, see the

# following page: https://www.dartlang.org/tools/pub/pubspec

# 第三部分,flutter中的资源申明

flutter:

  # The following line ensures that the Material Icons font is

  # included with your application, so that you can use the icons in

  # the material Icons class.

  uses-material-design: true

  assets:

    - asset/images/

  fonts:

    - family: Raleway

      fonts:

        - asset: asset/fonts/raleway/Raleway-Regular.ttf

        - asset: asset/fonts/raleway/Raleway-Medium.ttf

          weight: 500

        - asset: asset/fonts/raleway/Raleway-SemiBold.ttf

          weight: 600

  module:

    androidPackage: com.imooc.fluttermodule

    iosBundleIdentifier: com.imooc.flutterModule

```

可以看到,也非常得简单,主要就是用来管理flutter工程本身的代码,依赖,资源。

&emsp; &emsp;在了解了flutter工程特有的结构以后,我们来看一些复杂的内容,那么,我问大家,flutter工程的dart代码和资源是如何打入到我们最终的可执行文件apk中的呢,这下我们就要来看flutter工程如何与图中的android工程结合起来。由于此部分篇幅比较长,所以我们放到[下一节课](http://www.imooc.com/article/278454)来讲解这部分内容。

**欢迎关注课程:**

[Gradle3.0自动化项目构建技术精讲+实战](https://coding.imooc.com/class/206.html?mc_marking=a48f4eff5ae64dfbaf9427fa0c171ce5&mc_channel=shouji)

[Android热修复与插件化实践之路](https://coding.imooc.com/class/106.html?mc_marking=b49330c6e77b596b0ca51b78899c715b&mc_channel=shouji)

[组件化封装思想实战Android App](https://coding.imooc.com/class/84.html?mc_marking=4b8b7f0de1d11ec04c1f64da9ade8280&mc_channel=shouji)

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,390评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,821评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,632评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,170评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,033评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,098评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,511评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,204评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,479评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,572评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,341评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,213评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,576评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,893评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,171评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,486评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,676评论 2 335

推荐阅读更多精彩内容