面向React Native开发者的Flutter——项目结构和资源

一、我从哪里开始编写代码？

从文件开始lib/main.dart。它是在您创建Flutter应用程序时自动生成的。

/// Dart
void main() {
    print('Hello, this is the main function.');
}

在Flutter中，入口点文件时候{project_name}/lib/main.dart从main函数开始执行的。

二、Flutter应用程序的文件结构如何？

当您创建一个新的Flutter项目时，它会构建以下目录结构。您可以稍后自定义它，但这是您开始的地方。

┬
└ project_name
  ┬
  ├ android      - 包含特定于Android的文件.
  ├ build        - 存储iOS和Android构建文件.
  ├ ios          - 包含特定于iOS的文件.
  ├ lib          - 包含外部可访问的Dart源文件.
    ┬
    └ src        - 包含额外的源文件.
    └ main.dart  - Flutter入口点和新应用程序的开始.
                   这是在你创建Flutter时自动生成的项目.
                   这是您开始编写Dart代码的地方.
  ├ test         - 包含自动化测试机文件.
  └ pubspec.yaml - 包含Flutter应用的元数据.
                   这相当于React Nattive中的package.json文件.

三、我应该把我的Asset和Resource放在哪里以及如何使用它们？

FlutterAsset和Resource是您的应用程序捆绑和部署的文件，可在运行时访问。Flutter应用程序可以包含以下资产类型：

• JSON文件等静态数据
• 配置文件
• 图标和图像（JPEG、PNG、GIF、动画GIF、WebP、动画WebP、BMP和WBMP）

Flutter使用pubspec.yaml位于项目根目录的文件垃圾识别应用程序所需的Asset。

flutter:
  assets:
    - assets/my_icon.png
    - assets/background.png

该assets指定应包含在应用程序中的文件。pubspec.yaml每个Asset都由对应Asset所在文件的显示路径标识。声明Asset的顺序无关紧要。实际使用的目录无关紧要。但是，虽然Asset可以放在任何应用程序目录中，但最佳做法是将它们放在该assets目录中。

在构建过程中，Flutter将Asset放在一个名为asset bundle的特殊存档中，应用程序会在运行时从中读取。当在pubspec.yaml的资产部分置顶资产的路径时，构建过程会在相邻子目录中查找任何具有相同名称的文件。这些文件也制定资产一起包含在资产包中。FLutter在为您的应用选择适合分辨率的图像使用Asset变体。

在React Native中，您可以通过将图像文件放在源代码目录中并引用它来添间静态图像。

<Image source={require('./my-icon.png')}/>

在Flutter中，使用小部件的构建方法中的Image.asset构造函数将静态图像添加到您的应用程序。

Image.asset('assets/background.png');

有关更多信息，请参阅在 Flutter 中添加资产和图像。

四、如何通过网络加载图像？

在React Native中，您将在Image组件的source prop中指定uri，并在需要时提供大小。

在Flutter中，使用Image.network构造函数从URL中包含图像。

Image.network('https://docs.flutter.dev/assets/images/docs/olw.jpg');

五、如何安装包和包插件？

Fluttter支持使用其他开发者为Flutter和Dart生态系统贡献的共享包。这使您可以快速构建您的应用程序，而无需从头开始开发所有内容。包含特定于平台的代码的包称为包插件。

在React Native中，您可以从命令行使用yarn add {package-name}或安装包npm install --save {package-name}.

在Flutter中，使用一下说明安装包：

1. 将包名称和版本添加到pubspec.yaml依赖项部分。下面的示例显示了如何将google_sign_in的Dar包添加到pubspec.yaml文件中。在处理yaml文件时检查空格，因为空格很重要！

dependencies:
  flutter:
    sdk: flutter
  google_sign_in: ^3.0.3

2.使用从命令行安装包flutter pub get.如果使用IDE，它通常会flutter pub get为您运行，或者它可能会提示您这样做。 3.将包导入到您的应用程序代码中，如下所示：

import 'package:flutter/material.datt';

有关详细信息，请参阅使用包和 开发包和插件。

您可以在pub.dev的Flutter packages部分找到许多 Flutter 开发人员共享的包。