image.png

开发工具: Android Studio
Flutter版本:

创建 Flutter 项目

在 Android Studio 中，选择 File > New > New Flutter Project ，会出现下图的框:

image.png

可以看到一共有四种类型的项目:

1. Flutter Application

如果想让 Flutter 直接运行在 Android 或 iOS 上给用户使用，就用 Application 类型。

2. Flutter Plugin

如果你想让 Flutter 调用 Android 或 iOS 的 API，并想将这个功能封装其起来供第三方使用，那么就用 Plugin 类型。
Plugin 是 Flutter 的一个插件包，把原生功能变成插件供Flutter调用
Flutter 想要使用 Android 或 iOS 的功能，都可以使用 Plugin 的模式。

3. Flutter Package

Flutter Package 是纯 Dart 模块，只能实现 Flutter 的相关功能，例如实现一个 Widget，然后给第三方使用。
类似iOS开发中的Framework

4. Flutter Module

如果要将 Flutter 添加到 Android APP 或 iOS APP 中，实现 Flutter 和 Native 的混合开发，就使用 Module 类型。
Flutter 的混合开发模式就采用的这种类型，在 Android 上打包成 aar，在 iOS 上打包成 Framework，可以很方便的集成进原有的 Native 工程里，实现 Flutter 和 Native 的混合开发。

Plugin 和 Package

Flutter 的 Plugin 和 Package 可以用于组件化开发。
可以在 pub.dartlang.org/ 网站上看到所有的 Flutter 库。
或者在国内镜像 pub.flutter-io.cn/ 上查看 Flutter 库。

创建Flutter Application 项目

image.png

  • Project name：工程的名字
  • Flutter SDK path：Flutter SDK 的路径（选择前面 Flutter SDK 所在的路径）
  • Project location：工程的路径
  • Description：工程的描述

其中 Flutter SDK path 必须是 Flutter SDK 所在的路径，填完这些后，点击 Next，

image.png

这个是设置 Android 代码的包名。

下面的两个选项：

  • Include Kotlin support for Android code（使用 Kotlin 开发）
  • Include Swift support for iOS code（使用 Swift 开发）


如果想用 Kotlin 开发 Android 或者用 Swift 开发 iOS 的话，就选上 ，如果不选的话，Android 默认使用 Java 开发，iOS 默认使用 Objective-C 开发。可以根据自己的需要来选择。
最后点击 Finish**，第一个 Flutter APP 就创建完成了，创建完的 Flutter APP 里有默认实现的代码。

Flutter Application 目录结构

image.png

  • android 目录
    这个目录下是一个完整的 Android APP 工程的代码。可以理解成 Flutter 在 Android 上的壳子。这个目录里的代码都会被打包进 Flutter 的 Android 安装包里。

  • ios 目录
    这个目录下是一个完整的 iOS APP 工程的代码。可以理解成 Flutter 在 iOS 上的壳子。这个目录里的代码都会被打包进 Flutter 的 iOS 安装包里。

  • lib 目录
    这里是 Flutter 的代码，使用 Dart 语言编写。main.dart 是 Flutter 的入口文件。

  • test 目录
    这里是 Flutter 的测试代码，使用 Dart 语言编写。

  • pubspec.yaml 文件
    这个是 Flutter 的配置文件，声明了 Flutter APP 的名称、版本、作者等的元数据文件，还有声明的依赖库，和指定的本地资源（图片、字体、音频、视频等）。

pubspec.yaml 是 Flutter 的配置，是 Flutter 里的重要部分

Flutter Application 包含 Dart 代码、Android 代码和 iOS 代码，可以直接生成 Android 安装包和 iOS 安装包。

Flutter Plugin 目录结构

image.png

  • android 目录
    这个目录下是一个 Android Module 工程的代码。这个目录里的代码都会被打包进 Flutter Plugin。

  • ios 目录
    这个目录下是一个 iOS 静态库的代码。这个目录里的代码都会被打包进 Flutter Plugin。

  • example 目录
    这个目录下是一个完整的 Flutter APP 的应用代码，是为了方便 Plugin 代码的开发，在开发时 Plugin 的代码是运行在这个 Flutter APP 上的，但当打包的时候，example 下的代码并不会打包进 Plugin

  • lib 目录
    这里是 Flutter 的代码，使用 Dart 语言编写。main.dart 是 Flutter 的入口文件。

  • pubspec.yaml 文件
    这个是 Flutter 的配置文件，声明了 Flutter APP的名称、版本、作者等的元数据文件，还有声明的依赖库，和指定的本地资源（图片、字体、音频、视频等）。

Flutter Plugin 里既有 Dart 代码， 也有 Android 的代码，和 iOS 的代码。

Flutter Package (用到的时候在记录)

Flutter Module （用到的时候在记录）

pubspec.yaml 介绍

pubspec.yaml 是 Flutter 工程的配置文件，使用 YAML 语言来写，下面是一个 Flutter 工程的

pubspec.yaml :

  1. name: flutter_app_wei
  2. description: A new Flutter application.
  4. # The following defines the version and build number for your application.
  5. # A version number is three numbers separated by dots, like 1.2.43
  6. # followed by an optional build number separated by a +.
  7. # Both the version and the builder number may be overridden in flutter
  8. # build by specifying --build-name and --build-number, respectively.
  9. # In Android, build-name is used as versionName while build-number used as versionCode.
  10. # Read more about Android versioning at https://developer.android.com/studio/publish/versioning
  11. # In iOS, build-name is used as CFBundleShortVersionString while build-number used as CFBundleVersion.
  12. # Read more about iOS versioning at
  13. # https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
  14. version: 1.0.0+1
  16. environment:
  17.   sdk: ">=2.1.0 <3.0.0"
  19. dependencies:
  20.   flutter:
  21.     sdk: flutter
  23.   # The following adds the Cupertino Icons font to your application.
  24.   # Use with the CupertinoIcons class for iOS style icons.
  25.   cupertino_icons: ^0.1.2
  27. dev_dependencies:
  28.   flutter_test:
  29.     sdk: flutter
  32. # For information on the generic Dart part of this file, see the
  33. # following page: https://dart.dev/tools/pub/pubspec
  35. # The following section is specific to Flutter.
  36. flutter:
  38.   # The following line ensures that the Material Icons font is
  39.   # included with your application, so that you can use the icons in
  40.   # the material Icons class.
  41.   uses-material-design: true
  43.   # To add assets to your application, add an assets section, like this:
  44.   # assets:
  45.   #  - images/a_dot_burr.jpeg
  46.   #  - images/a_dot_ham.jpeg
  48.   # An image asset can refer to one or more resolution-specific "variants", see
  49.   # https://flutter.dev/assets-and-images/#resolution-aware.
  51.   # For details regarding adding assets from package dependencies, see
  52.   # https://flutter.dev/assets-and-images/#from-packages
  54.   # To add custom fonts to your application, add a fonts section here,
  55.   # in this "flutter" section. Each entry in this list should have a
  56.   # "family" key with the font family name, and a "fonts" key with a
  57.   # list giving the asset and other descriptors for the font. For
  58.   # example:
  59.   # fonts:
  60.   #   - family: Schyler
  61.   #     fonts:
  62.   #       - asset: fonts/Schyler-Regular.ttf
  63.   #       - asset: fonts/Schyler-Italic.ttf
  64.   #         style: italic
  65.   #   - family: Trajan Pro
  66.   #     fonts:
  67.   #       - asset: fonts/TrajanPro.ttf
  68.   #       - asset: fonts/TrajanPro_Bold.ttf
  69.   #         weight: 700
  70.   #
  71.   # For details regarding fonts from package dependencies,
  72.   # see https://flutter.dev/custom-fonts/#from-packages
name 工程的名字
description 工程的描述
version 工程的版本号
environment Flutter环境
dependencies 依赖的开发库
flutter flutter 资源相关的配置，包括图片、字体等，后面会有具体场景