✨✨✨✨✨ 魏什么_多喝水 Flutter 之路

语雀地址

开发工具: 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 工程的

name: flutter_app_wei
description: A new Flutter application.

# The following defines the version and build number for your application.
# A version number is three numbers separated by dots, like 1.2.43
# followed by an optional build number separated by a +.
# Both the version and the builder number may be overridden in flutter
# build by specifying --build-name and --build-number, respectively.
# In Android, build-name is used as versionName while build-number used as versionCode.
# Read more about Android versioning at https://developer.android.com/studio/publish/versioning
# In iOS, build-name is used as CFBundleShortVersionString while build-number used as CFBundleVersion.
# Read more about iOS versioning at
# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
version: 1.0.0+1

environment:
  sdk: ">=2.1.0 <3.0.0"

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

dev_dependencies:
  flutter_test:
    sdk: flutter


# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec

# The following section is specific to 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

  # To add assets to your application, add an assets section, like this:
  # assets:
  #  - images/a_dot_burr.jpeg
  #  - images/a_dot_ham.jpeg

  # An image asset can refer to one or more resolution-specific "variants", see
  # https://flutter.dev/assets-and-images/#resolution-aware.

  # For details regarding adding assets from package dependencies, see
  # https://flutter.dev/assets-and-images/#from-packages

  # To add custom fonts to your application, add a fonts section here,
  # in this "flutter" section. Each entry in this list should have a
  # "family" key with the font family name, and a "fonts" key with a
  # list giving the asset and other descriptors for the font. For
  # example:
  # fonts:
  #   - family: Schyler
  #     fonts:
  #       - asset: fonts/Schyler-Regular.ttf
  #       - asset: fonts/Schyler-Italic.ttf
  #         style: italic
  #   - family: Trajan Pro
  #     fonts:
  #       - asset: fonts/TrajanPro.ttf
  #       - asset: fonts/TrajanPro_Bold.ttf
  #         weight: 700
  #
  # For details regarding fonts from package dependencies,
  # see https://flutter.dev/custom-fonts/#from-packages

名称	含义
name	工程的名字
description	工程的描述
version	工程的版本号
environment	Flutter环境
dependencies	依赖的开发库
flutter	flutter 资源相关的配置，包括图片、字体等，后面会有具体场景