如何为 Flutter web 启动不同的风格?

问题描述 投票:0回答:1

有两种不同的口味(QA、PROD)

如何动态配置文件到相关风格,如 index.htmlfirebase-messaging-sw.js

flutter dart development-environment production-environment
1个回答
0
投票

-- 在 Flutter 中,您可以利用特定于环境的配置为您的 Web 应用程序创建不同的风格。这涉及到为每种风格创建多个配置文件,并根据目标风格动态选择适当的配置。以下是有关如何为 Flutter Web 设置不同风格的分步指南:

-- 创建特定于风味的配置文件:

-- 在项目根目录中,创建一个新文件夹,我们将其命名为flavors。 在口味文件夹内,为每种口味创建子文件夹(例如 qa 和 prod)。

-- 将特定于风味的配置文件放入每个子文件夹中。这些文件可能包括index.html、firebase-messaging-sw.js 等。

-- 结构示例:

 - lib/
- web/
- flavors/
  - qa/
    - index.html
    - firebase-messaging-sw.js
  - prod/
    - index.html
    - firebase-messaging-sw.js

-- 更新 pubspec.yaml:

打开 pubspec.yaml 文件。

添加以下部分来定义您的口味:

 flavor_dimensions:
  - environment

product flavors:
  qa:
    dimension: environment
    // Add other flavor-specific configurations here
  prod:
    dimension: environment
    // Add other flavor-specific configurations here

-- 配置特定风味的文件:

-- 更新您的 web/index.html 和其他相关文件以引用特定于风味的配置。您可以使用 Dart 的条件导入来根据风格加载适当的文件。

-- web/index.html 中的示例:

<!DOCTYPE html>
<html>
<head>
  <!-- Common configurations go here -->

  #if (environment == 'qa')
  <link rel="manifest" href="flavors/qa/manifest.json">
  <!-- Other QA specific configurations go here -->
  #end

  #if (environment == 'prod')
  <link rel="manifest" href="flavors/prod/manifest.json">
  <!-- Other Prod specific configurations go here -->
  #end
</head>
<body>
  <!-- Your app content goes here -->
</body>
</html>

-- 带着风味奔跑:

-- 要以特定风格运行您的应用程序,请使用以下命令:

flutter run -t lib/main.dart -d web --flavor=qa
© www.soinside.com 2019 - 2024. All rights reserved.