如何将“Flutter for Web”转换为“Flutter for Mobile”？

Posted 2023-02-23

【中文标题】如何将“Flutter for Web”转换为“Flutter for Mobile”？

【英文标题】：How to convert "Flutter for Web" into "Flutter for Mobile"?

【发布时间】：2019-09-28 21:47:21

【问题描述】：

我找到了如何将“Flutter for mobile”迁移到“Flutter for web”。 https://github.com/flutter/flutter_web/blob/master/docs/migration_guide.md

但是，我需要相反的方式。

我只尝试过“flutter run”，当然，它运行得并不好。

我不知道在哪里替换。

name: my_app

version: 1.0.0

dependencies:
  ## REPLACE
  ## Update your dependencies to use `flutter_web`
  #flutter:
  #  sdk: flutter
  flutter_web: any

dev_dependencies:
  ## REPLACE
  ## Same goes for test packages
  #flutter_test:
  #  sdk: flutter
  flutter_web_test: any

  ## ADD
  ## Add these dependencies to enable the Dart web build system
  build_runner: ^1.2.2
  build_web_compilers: ^1.1.0

  test: ^1.3.4

## REMOVE
## For the preview, assets are handled differently. Remove or comment
## out this section. See `Assets` below for more details
# flutter:
#   uses-material-design: true
#   assets:
#     - asset/
#
#   fonts:
#   - family: Plaster
#     fonts:
#     - asset: asset/fonts/plaster/Plaster-Regular.ttf

## ADD
## flutter_web packages are not published to pub.dartlang.org
## These overrides tell the package tools to get them from GitHub
dependency_overrides:
  flutter_web:
    git:
      url: https://github.com/flutter/flutter_web
      path: packages/flutter_web
  flutter_web_ui:
    git:
      url: https://github.com/flutter/flutter_web
      path: packages/flutter_web_ui

我希望有一种迁移方法，即使这很复杂。 我要迁移的内容如下。 https://github.com/flutter/flutter_web/tree/master/examples/gallery

【参考方案1】：

是的，我认为你可以做到。

您应该做的第一件事是：将您的 pubspec.yaml 文件更新为如下内容：

dependencies:
  flutter:
    sdk: flutter

dev_dependencies:
  flutter_test:
   sdk: flutter

flutter:
  uses-material-design: true

运行flutter packages get 后，错误将无处不在，所以， 您必须更新 lib 目录下每个文件中的每个导入。 它会是这样的：

import 'package:flutter_web/material.dart' 到 import 'package:flutter/material.dart';

之后，您将不得不再次创建项目以获取 android 和 ios 项目目录。

为此，您必须转到终端，导航到项目的根目录并运行此命令flutter create .

最后，运行您的项目。

【讨论】：

最好将pubspec.yaml 的内容包含为代码sn-p 而不是图像。