实施

• 安装 Amplify CLI 开发人员预览版

  安装 AWS Amplify CLI 需要使用 Node.js，可以在此处下载。

  要下载 CLI 的 Amplify-Flutter 开发人员预览版，请运行以下命令：
  

  npm install -g @aws-amplify/cli@flutter-preview

  运行 $ amplify --version，验证您当前使用的是否是 CLI 的 Flutter 预览版。您应看到如下内容：
  

  photo_gallery git:(master) ✗ amplify --version
  Scanning for plugins...
  Plugin scan successful
  4.26.1-flutter-preview.0

  如果尚未配置 Amplify CLI，请确保运行以下命令：
  

  amplify configure

  系统将指导您完成配置过程。您可以在此处获详细了解如何配置 CLI。
  

• 初始化 Amplify

  要创建 Amplify 项目，必须在项目的根目录下初始化和配置该项目。

  导航到项目的根目录：
  

  cd path/to/your/project

  运行 $ ls -al，验证您是否在正确的目录中。您的输出应该如下所示：
  

  ➜  photo_gallery git:(master) ✗ ls -al
  total 80
  drwxr-xr-x  18 kiloloco  staff   576 Oct 19 18:07 .
  drwxr-xr-x   3 kiloloco  staff    96 Oct 18 21:10 ..
  drwxr-xr-x   4 kiloloco  staff   128 Oct 18 22:15 .dart_tool
  -rw-r--r--   1 kiloloco  staff   536 Oct 19 19:43 .flutter-plugins
  -rw-r--r--   1 kiloloco  staff  1422 Oct 19 19:43 .flutter-plugins-dependencies
  -rw-r--r--   1 kiloloco  staff   621 Oct 18 21:10 .gitignore
  drwxr-xr-x   6 kiloloco  staff   192 Oct 18 21:10 .idea
  -rw-r--r--   1 kiloloco  staff   305 Oct 18 21:10 .metadata
  -rw-r--r--   1 kiloloco  staff  3648 Oct 19 18:07 .packages
  -rw-r--r--   1 kiloloco  staff   543 Oct 18 21:10 README.md
  drwxr-xr-x  12 kiloloco  staff   384 Oct 18 21:10 android
  drwxr-xr-x   5 kiloloco  staff   160 Oct 18 22:20 build
  drwxr-xr-x  11 kiloloco  staff   352 Oct 19 19:04 ios
  drwxr-xr-x  11 kiloloco  staff   352 Oct 19 18:08 lib
  -rw-r--r--   1 kiloloco  staff   896 Oct 18 21:10 photo_gallery.iml
  -rw-r--r--   1 kiloloco  staff  6047 Oct 19 18:07 pubspec.lock
  -rw-r--r--   1 kiloloco  staff  2926 Oct 19 18:07 pubspec.yaml
  drwxr-xr-x   3 kiloloco  staff    96 Oct 18 21:10 test

  现在初始化您的 Amplify 项目：
  

  amplify init

  系统现在应提示您几个有关如何配置项目的问题。如果针对每个问题按 Enter 键，则它将提供每个问题的默认答案，并生成类似于以下内容的输出：
  

  ➜  photo_gallery git:(master) ✗ amplify init
  Note: It is recommended to run this command from the root of your app directory
  ? Enter a name for the project photogallery
  ? Enter a name for the environment dev
  ? Choose your default editor: Visual Studio Code
  ? Choose the type of app that you're building flutter
  Please tell us about your project
  ⚠️  Flutter project support in the Amplify CLI is in DEVELOPER PREVIEW.
  Only the following categories are supported:
   * Auth
   * Analytics
   * Storage
  ? Where do you want to store your configuration file? ./lib/
  Using default provider  awscloudformation
  
  For more information on AWS Profiles, see:
  https://docs.aws.amazon.com/cli/latest/userguide/cli-multiple-profiles.html
  
  ? Do you want to use an AWS profile? Yes
  ? Please choose the profile you want to use default

  在 CLI 在云中创建完您的项目后，您应该得到类似如下内容的输出：
  

  ✔ Successfully created initial AWS cloud resources for deployments.
  ✔ Initialized provider successfully.
  Initialized your environment successfully.
  
  Your project has been successfully initialized and connected to the cloud!

  如果在项目的根目录下运行 $ ls，您应该会注意到新文件 amplify.json 和文件夹 amplify 已添加到您的项目中。运行 $ ls lib 后，您还会看到新文件 amplifyconfiguration.dart 也已添加到项目中。
  

• 向项目添加依赖项

  下一步是在项目中安装 Amplify 作为一个依赖项，以便连接库。

  回到 Visual Studio Code 中，打开 pubspec.yaml 并添加以下依赖项：
  

  ... # path:
  
  amplify_core: '<1.0.0'
  
  ... # dev_dependencies

  保存文件或在终端的应用程序根目录中运行 $ flutter pub get
  

  该过程的输出结果应如下所示：
  

  exit code 0

  对于 iOS，打开 Podfile (ios > Podfile) ，并将平台更新为 11.0 或更高版本：
  

  ... # Uncomment this line to define a global platform for your project
  
  platform :ios, '11.0'
  
  ... # CocoaPods analytics sends network stats synchronously affecting flutter build latency.

• 集成到您的应用程序中

  要使用 Amplify Flutter 库，务必要在使用任何类别前配置 Amplify。

  打开 main.dart 并在 _MyAppState 中添加 Amplify 的实例：
  

  ... // class _MyAppState extends State<MyApp> {
  
  final _amplify = Amplify();
  
  ... // final _authService = AuthService();

  现在创建一个函数来配置 Amplify：
  

  ... // build closing }
  
  void _configureAmplify() async {
    try {
      await _amplify.configure(amplifyconfig);
      print('Successfully configured Amplify 🎉');
    } catch (e) {
      print('Could not configure Amplify ☠️');
    }
  }
  
  ... // _MyAppState closing }

  该函数将传入由生成的文件 /lib/amplifyconfiguration.dart 提供的 amplifyconfig，并尝试利用我们可能需要使用的任何插件来配置我们的 Amplify 对象。我们将开始在以下模块中添加插件。

  现在，在 _MyAppState 的 initState() 中调用 _configureAmplify()：
  

  ... // super.initState();
  
  _configureAmplify();
  
  ... // _authService.showLogin();

  现在运行应用程序后，您应该会在日志中看到以下内容：
  

  flutter: Successfully configured Amplify 🎉