标签: flutter-web

最近，我正在开发作品集网站，我需要在另一个选项卡上显示 PDF 格式的用户简历。由于这是一个独立的 Web 项目，我不想处理 iOS 和 Android 的 PDF 查看。

我正在使用 flutter web 构建一个网站。我的网站中有两个主要路线，一个登录页面（也是初始路线）和一个主页。我使用Get在路线之间移动，并使用url_strategy包设置路径导航策略。

主dart

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  setPathUrlStrategy();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'website',
      unknownRoute: GetPage(
        name: '/notfound',
        page: () => UnknownRoutePage(),
      ),
      initialRoute: '/LoginPage',
      getPages: [
        GetPage(
          name: '/LoginPage',
          page: () => LoginPage(),
        ),
        GetPage(
          name: '/HomePage',
          page: () => HomePage(),
        )
      ],
    );
  }
}

同时，当我在我的电脑上调试时一切正常（即使使用 flutter run --release），当我在 Firebase 托管上部署网站时，我遇到了问题。

假设我尝试重新加载页面（例如www.website.com/LoginPage），但我从 Firebase 托管中找不到默认页面（即使我设置了自定义未找到页面），而我希望重定向到 LoginPage我的网站。

我该如何解决这个问题？

我是 Flutter 新手，在将文件上传到 API 时遇到问题。我尝试过使用 FormData 和 MultiPartFile 但它返回错误。我也在这个视频中使用了代码，但它不起作用：

https://www.youtube.com/watch?v=c2tGUt7FLqY&t=318s

任何人都有解决方案。

我想创建一个 Flutter Web 项目。我看到软件包页面上列出了两个软件包。两者有什么区别？ firebase_core和firebase_core_web

我的 Flutter 桌面 Web 应用程序具有复杂的用户界面，很难做出响应。因此，我想将其放在一个FittedBox如果用户缩小浏览器窗口时会简单地缩小整个应用程序的应用程序中。

class CustomPage extends StatelessWidget {
  final Widget child;

  const CustomPage({
    Key? key,
    required this.child,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GetPlatform.isDesktop
          ? FittedBox(
              child: SizedBox(
                width: Get.width,
                height: Get.height,
                child: Center(child: child),
              ),
            )
          : Text('Sorry! This was only meant for desktop.'),
    );
  }
}

但是Get.width并且WidgetsBinding.instance.window.physicalSize.width只能得到初始窗口大小。因此，如果应用程序在全屏浏览器中启动，则效果很好，但如果应用程序在小浏览器中启动，则不起作用。MediaQuery.of(context).size.width只获取当前屏幕尺寸。

有没有办法获取桌面物理屏幕尺寸？

大家好 :) 我最近注意到 Flutter 中的 Web 项目添加了一个新的 /canvaskit/ 文件夹。看这里。无论运行“flutter build web”时选择什么 Web 渲染器，都会包含该文件夹。该文件夹非常大，有 16 MB 左右。有谁知道为什么这个文件夹突然出现在构建中？

我的应用程序在某个视图的几列中显示各种Container() Widget() 。

我尝试在Container()中放置一些图标以提供删除、最小化等操作。不幸的是，这在本机目标上看起来不太好。

因此，我想保持视觉外观不变，并在鼠标指针移动到Container()上方时在实际Container ()上方显示操作菜单。

该菜单将位于所有其他小部件之上，是非模态的，一旦指针离开Container()的边界框，该菜单就会消失。Containers()不应更改大小和位置。

使用MouseRegion()，我可以使菜单出现和消失。

我可以将一些Widget()放置在Container() [或其他小部件]的边界矩形之外吗？理想情况下，我想将其相对于另一个边界框放置。

更新 2022-03-24

创建了一个 OverlayMenu() 类，它呈现如下内容：

用法：

OverlayMenu(
              actionWidget: 
                  const Icon(Icons.settings, color: Colors.blue, size: 20), 
              callbacks: [
                () {
                  // Click on icons 1 action
                },
                () {
                  // Click on icon 2 action
                }
                ],
              icons: [
                 Icons.delete, Icons.tv
                ],
              leftOffset: StoreProvider.of<EModel>(context)
                  .state
                  .columnWidth
                  .toDouble())

以及OverlayMenu()的实现：

导入“包：flutter/material.dart”；

class OverlayMenu {

  List<IconData> icons; …

我正在构建一个跨平台应用程序。我们也将在网络上。但对于网络，我们希望像下图一样，这样整个应用程序基本上仍然具有手机尺寸。我尝试用容器包装 MaterialApp 并设置高度（如果 kIsWeb 为 true），但它留下了一个奇怪的盒子阴影，每次我导航页面时它看起来都很奇怪。

有什么最好的方法来做到这一点的想法吗？

我正在使用flutter_sound包来录制和播放音频。在 Flutter Web 上，停止录制时，录制器会返回以下类型的路径/URL：blob:http://localhost:63986/b60f31ce-b94d-48c8-8a4a-2d939effe6d8

我想将录音上传到 Firebase Storage，但 dart.io 无法用于 flutter-web，因此无法使用 File 方法。即使经过搜索，我也没有找到实现它的方法。我不知道如何继续。如何将音频写入文件并将其上传到 firebase？

我的代码：

  import 'dart:html' as html;
  import 'dart:io' as io;

  final recorder = FlutterSoundRecorder();
  final player = FlutterSoundPlayer();
  String fileName;

  @override
  void initState() {
    super.initState();
    initRecorder();
  }

  @override
  void dispose() {
    recorder.closeRecorder();
    player.closePlayer();
    super.dispose();
  }

  Future<void> initRecorder() async {
    if (!kIsWeb) {
      final status = await Permission.microphone.request();
      if (status != PermissionStatus.granted) {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: Text('Grant Permission form mic first!')),
        );
      }
    }
    await recorder.openRecorder();
    await …

我的启动器无法工作！发射（过度智慧）..这里有什么问题？