标签: flutter-web

我正在构建一个网络应用程序，它需要一个获取帖子 ID 的路由，然后它将使用该 ID 获取帖子。

我怎么能有 URL 参数让我们说/post/:idid 是参数

我的应用目前看起来像这样：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // title: "Paste",
      initialRoute: "/",
      theme: ThemeData(
          primarySwatch: Colors.green,
          primaryColor: Colors.blue
      ),
      routes: {
        "/": (context) => HomePage(),
        "/post": (context) => PastieRoute()
      },
      debugShowCheckedModeBanner: false
    );
  }
}

编辑：这是我根据@BloodLoss 尝试过的，出于某种原因，我在访问时没有得到任何东西到控制台 localhost:8080/post?id=123

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: "/",
      routes: {
        "/": (context) => HomePage(),
        "/post": (context) => PastieRoute()
      }, …

当我从 Flutter 移动设备转移到 Web 设备时，我注意到控制台上打印的日志没有帮助，因为它们不针对我的 IDE (Android Studio) 中的代码 在移动设备上：

======= Exception caught by widgets library =======================================================
The following message was thrown building PhoneSignUpPage(state: _PhoneSignUpPageState#b52e9):
some error

The relevant error-causing widget was: 
  PhoneSignUpPage file:///Users/me/AndroidStudioProjects/myproject/lib/services/routing_service.dart:30:14
When the exception was thrown, this was the stack: 
#0      PhonePageViewState.initState (package:my_app/common/phone/phone_page_view.dart:63:5) // this was clickable
#1      StatefulElement._firstBuild (package:flutter/src/widgets/framework.dart:4711:57)
#2      ComponentElement.mount (package:flutter/src/widgets/framework.dart:4548:5)
#3      Element.inflateWidget (package:flutter/src/widgets/framework.dart:3611:14)
#4      Element.updateChild (package:flutter/src/widgets/framework.dart:3360:20)
...

在网络上：

======== Exception caught by widgets library =======================================================
The following message was thrown building PhoneSignUpPage(state: _PhoneSignUpPageState#fb057):
some …

添加网络支持后发布我的包时出现此错误

Package validation found the following error:\n* line 9, column 1 of lib/hexcolor_web.dart: This package does not have flutter_web_plugins in the `dependencies` section of `pubspec.yaml`.\n    \xe2\x95\xb7\n  9 \xe2\x94\x82 import 'package:flutter_web_plugins/flutter_web_plugins.dart';\n    \xe2\x94\x82 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n

我最近运行了这个命令来在 Flutter 中尝试 Web 支持：

flutter config --enable-web

现在，我制作的每个项目都有一个web文件夹，里面有一个index.html. 有什么方法可以为将来的项目禁用它，我删除文件夹并继续操作是否安全？

我有 flutter 应用程序，它为每个平台（移动、网络、窗口）使用不同的 webview 插件。
虽然我能够import基于web和建立平台mobile，但我无法导入 Windows。

如果它不是移动或网络，我尝试添加其他条件，但它正在使用mobile插件。

1. 这就是我导入网络和移动包的方式（工作）。

import 'package:eam_flutter/form/mobileui.dart'
    if (dart.library.html) 'package:eam_flutter/form/webui.dart'
    as multiPlatform;   

2. 这就是我导入 Web、移动和 Windows 包的方式（不工作，它显示移动 WebView 异常，因为它不支持桌面）。

import 'package:eam_flutter/form/windowui.dart'
    if (dart.library.html) 'package:eam_flutter/form/webui.dart'
    if (dart.library.io) 'package:eam_flutter/form/mobileui.dart'
    as multiPlatform;

如何为 Windows 指定条件导入？

我已经能够从我的计算机中选择一个文件并显示在我的 flutter web 应用程序中。我有一个函数（类型File），它接收一个文件并将其上传到服务器。像这样functionName(File imageToSend)。

但是当我尝试将此图像发送到服务器端时，它给了我一个错误。正在使用以下代码进行上传：

Uint8List uploadedImage;
File theChosenImg;
FileReader reader =  FileReader();
FileReader reader2 = FileReader();

filePicker() async {
InputElement uploadInput = FileUploadInputElement();
uploadInput.click();


uploadInput.onChange.listen((e) {
  // read file content as dataURL
  final files = uploadInput.files;
  if (files.length == 1) {
    final file = files[0];    

    reader.onLoadEnd.listen((e) {
                setState(() {
                  uploadedImage = reader.result;
                  theChosenImg = files[0];
                });
    });
    reader.readAsArrayBuffer(file);
    reader2.readAsDataUrl(file);
  }
});
}

当我使用变量时uploadedImage，错误是Expected a value of type 'File', but got one …

注意：事实证明，这与颤振无关，而与我将 API 网关设置为 Lambda 代理这一事实有关

我试图从 Flutter Web 应用程序访问 API 端点，每次它出错并给我以下错误。

获取传感器数据时出错：DioError [DioErrorType.RESPONSE]：XMLHttpRequest 错误。

我知道这里有几个关于 SO（像这个和这个）的问题在讨论这个问题，解决方案似乎是在服务器端启用 CORS 支持。我正在使用 AWS API 网关来构建 API，我按照这些说明从我的 API 启用 CORS 支持。这是我在 API 网关控制台中的 CORS 设置。

“Access-Control-Allow-headers”中的文本是

'内容类型，X-Amz-日期，授权，X-Api-Key，X-Amz-Security-Token'

在 API 网关上启用 CORS 似乎没有帮助，当我尝试点击 API 时，我的 flutter Web 应用程序仍然遇到相同的错误。

有趣的是，如果我从 chrome 中点击 API（即在浏览器上粘贴 API URL 并点击回车），API 工作得非常好。只有当我尝试从 Flutter Web 应用程序访问 API 时它才会失败。

问题：如何在我的 API 网关中启用 CORS 支持，以便我的 Flutter Web 应用程序可以使用 API？

我正在开发 Flutter Web 应用程序，但在运行测试时遇到问题。

Flutter 1.7.8+hotfix.4 • channel stable • git@github.com:flutter/flutter.git
Framework • revision 20e59316b8 (9 weeks ago) • 2019-07-18 20:04:33 -0700
Engine • revision fee001c93f
Tools • Dart 2.4.0

这是 pubspec.yaml：

name: web_flutter
description: An app built using Flutter for web

environment:
  # You must be using Flutter >=1.5.0 or Dart >=2.3.0
  sdk: '>=2.3.0-dev.0.1 <3.0.0'

dependencies:
  flutter_web: any
  flutter_web_ui: any
  provider: any
  rxdart: ^0.22.0
  http: ^0.12.0+2
  json_annotation: ^2.4.0
  intl: 0.15.8


dev_dependencies:
  build_runner: ^1.4.0
  build_web_compilers: ^2.0.0
  pedantic: ^1.0.0
  json_serializable: ^3.0.0 …

当我运行时：

$ flutter build web 

我收到错误

Missing index.html.

Flutter 应用程序显示在浏览器中，但在 VS Code 中显示为“No Device”。如何调试或解决此问题？

我通过 POST 请求从 API 获取数据。然后我将数据填充到 GridView Builder 中。但是当我滚动应用程序的网络版本时，它给了我这个错误：

\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90 Exception caught by services library \xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\nThe following assertion was thrown during a platform message callback:\nAssertion failed:\n../\xe2\x80\xa6/services/hardware_keyboard.dart:441\n_pressedKeys.containsKey(event.physicalKey)\n"A KeyUpEvent is dispatched, but the state shows that the physical key is not pressed. If this occurs in real application, please report this bug to Flutter. If this occurs in unit tests, please ensure that simulated events follow Flutter's event model as documented in `HardwareKeyboard`. This was the event: KeyUpEvent#6f053(physicalKey: PhysicalKeyboardKey#700e3(usbHidUsage: \\"0x000700e3\\", debugName: \\"Meta …