标签: flutter-web

我想在 flutter web 中显示这个源代码。

Widget build(BuildContext context) {
    return SafeArea(
      top: true,
      bottom: true,
      child: Scaffold(
        body: bodyView(),
      ),
    );
  }

我尝试制作一个按钮来打开抽屉，但我不能，这是我第一次使用 flutter

我的运行界面

  return Scaffold(

  drawer: Drawer(),
  body: Column(
    children: <Widget>[
      ClipPath(
        clipper: MyClipper(),
        child: Container(
          height: 350,
          width: double.infinity,
          decoration: BoxDecoration(
            gradient: LinearGradient(
                begin: Alignment.topRight,
                end: Alignment.bottomLeft,
                colors: [
                  Color(0xFF3383CD),
                  Color(0xFF11429F),
                ]),
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              const SizedBox(height: 12),
              IconButton(
                icon: const Icon(
                  Icons.add, size: 18,
                  color: Colors.white,
                  ),
                onPressed: () {
                  Scaffold.of(context).openDrawer();
                },
              ),

看起来在 Firebase Storage 的最新版本中，该方法.put(...)已被弃用，取而代之的是 .putData(Uint8List) 和 .putFile(...)，我还没有找到适用于 Flutter Web 的解决方案。

我正在尝试的代码是这样的，但它没有返回任何内容或抛出任何错误。

 _startFilePicker() 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];
        FileReader reader = FileReader();

        reader.onLoadEnd.listen((e) async {
          setState(() {
            uploadedImage = reader.result;
          });
          await uploadImage();
        });

        reader.onError.listen((fileEvent) {});

        reader.readAsArrayBuffer(file);
      }
    });
  }

  Future uploadImage() async {
    StorageReference storageReference =
        FirebaseStorage.instance.ref().child(userID + '/userPhoto');
    try {
      StorageUploadTask uploadTask = storageReference.putData(uploadedImage); …

我有一个在网络上运行的 Flutter 应用程序，我需要以编程方式重新加载浏览器选项卡，我想知道是否有与 html.window.close() 类似但用于重新加载的内容。Flutter 有没有办法做到这一点？

我有一个 TabBarView，主小部件中有两个选项卡。第一个选项卡包括带有卡片的网格视图。卡片使用父小部件 (MyHomePage) 作为侦听器来侦听卡内按钮单击。\n当我单击某些卡片中的按钮时，侦听器会实现。必须打开第二个选项卡并将选定的游览传递给它。但是当我这样做时，在第一次迭代时，ExcursionEditor(currentExcursion) 说，该参数为空，但父版本说，它不是。如果我调整浏览器的大小，它会调用全局重建，并且 currentExcursion 达到最后的构建值。\n所以，我无法理解，为什么 MyHomePage 构建不会影响带有构造函数传递的参数的 TabBarView 内容

类我的主页

\nimport \'package:flutter/material.dart\';\nimport \'package:questbuilder/api/content_manager.dart\';\nimport \'package:questbuilder/model/excursion.dart\';\nimport \'package:questbuilder/pages/tab_editor.dart\';\nimport \'package:questbuilder/pages/tab_my_excursions.dart\';\nimport \'package:questbuilder/widgets/excursion_preview_card.dart\';\n\nimport \'package:logger/logger.dart\';\n\nclass MyHomePage extends StatefulWidget {\n  MyHomePage({Key key, this.title}) : super(key: key);\n\n  final String title;\n\n  @override\n  _MyHomePageState createState() => _MyHomePageState();\n}\n\nclass _MyHomePageState extends State<MyHomePage>\n    with TickerProviderStateMixin\n    implements ExcursionCardInteractionListener {\n  Logger logger = Logger();\n\n  Excursion currentExcursion;\n\n  TabController tabController;\n\n  @override\n  void initState() {\n    super.initState();\n    print("INIT STATE FOR HOME PAGE");\n    tabController = TabController(vsync: this, length: 2);\n  }\n\n  @override\n  Widget build(BuildContext context) {\n    var screenSize …

我创建了以下无状态小部件来在我的 Flutter WPA 中显示一些 Web 内容。它的父级是全状态的，并在_frameUrl更改时重建此小部件。但这只是第一次发生。之后，当父级更改时_frameUrl，我可以在日志中看到小部件正在重建并获得新的 URL，但它仍然使用第一次给出的旧 URL 重新加载。

import 'package:flutter/material.dart';
import 'dart:html';
import 'package:universal_ui/universal_ui.dart';

class HtmlFrame extends StatelessWidget {
  var _iframeElement;
  final String _frameUrl;

  HtmlFrame(this._frameUrl);

  @override
  Widget build(BuildContext context) {
    print("Frame build: $_frameUrl");

    _iframeElement = IFrameElement();
    _iframeElement.height = '500';
    _iframeElement.width = '500';
    _iframeElement.src = _frameUrl;
    _iframeElement.style.border = 'none';
    _iframeElement.allowFullscreen = true;

    // ignore: undefined_prefixed_name
    ui.platformViewRegistry.registerViewFactory(
      'iframeElement',
      (int viewId) => (_iframeElement as IFrameElement),
    );

    return HtmlElementView(
      key: UniqueKey(),
      viewType: 'iframeElement',
    );
  }
}

日志如下所示：

### First …

2我正在努力在 Flutter Web 屏幕上显示这种类型的字符（ mini ）：

我一直在四处寻找，但没有任何好的结果。目前是否有任何现有的包或方法可以干净地显示它？

我有一个带有命名路由的 GetMaterialApp，可在 Flutter Web 中用于仪表板项目。但是，我正在努力检查用户是否经过身份验证并根据身份验证状态重定向用户。这是我的应用程序代码：

GetMaterialApp(
      initialBinding: InitialBinding(),
      debugShowCheckedModeBanner: false,
      theme: CustomTheme().getLightTheme,
      themeMode: ThemeMode.light,
      title: "----------",
      initialRoute: "/login",
      unknownRoute: GetPage(name: "/notfound", page: () => NotFoundPage()),
      getPages: [
        GetPage(name: "/login", page: () => Root()),
        GetPage(name: "/dashboard", page: () => Dashboard()),
      ],
    ),

我用来GetX处理身份验证状态。因此，我可以访问整个 Web 应用程序的身份验证状态。Root 小部件包含一个简单的命令，Obx用于检查身份验证状态并将用户发送到仪表板：

return Obx(() => (Get.find<AuthController>().loggedIn) ? Dashboard() : LoginScreen());

遗憾的是，这并不能解决问题，因为 url 没有改变，只是内容改变了。URL 仍为 /login。

我可以简单地Get.toNamed("dashboard")在用户登录时调用，但随后仪表板页面将暴露给该 url，允许用户即使未登录也可以访问 /dashboard url。

我也不想在我创建的每个小部件或页面中创建检查，因为那样效率低下。有没有办法检查用户是否登录，如果没有，则将用户重定向到输入的每个网址的登录页面？

例子：

• 如果用户未登录， www.adress.com/dashboard将重定向到www.adress.com/login

有没有一种方法可以检查身份验证状态并相应地使用重定向用户GetX？

旁注：我每次都能获得正确的身份验证状态，这不是问题，因为我使用 GetX。 …

我想为 flutter web 重用移动应用程序代码。我已经在所有屏幕的脚手架中使用 AppBar() 和主体小部件进行了编码。现在我为网页采用 400 宽度和中心，除了应用栏之外都很好。

        Scaffold(
        appBar: this.getAppBarWidget(),
        body: Center(
          child: Container(
            width: kIsWeb ? 400.0 : MediaQuery.of(context).size.width,
            child: this.getBodyWidget(),
          ),
        ))

上面的代码适用于除网页中的应用栏之外的所有移动和网页屏幕。

如何更改应用栏的宽度以适合宽度 400 ？

如果我使用 Size.fromWidth(400) 会出现错误。

以下代码适用于移动设备和网络。

   Scaffold(
    body: Center(
  child: Container(
    width: kIsWeb ? 400.0 : MediaQuery.of(context).size.width,
    child: Column(
      children: [
        this.getCustomAppbarWidget(),
        this.getBodyWidget(),
      ],
    ),
  ),
))

请建议我。

如何将 Stack 子项剪切到其大小范围内。

在此图像中，有 3 个网格项目using orange color，每个项目都使用InkWell悬停方法在堆栈上对齐。虽然hover:falseWidgetPop PoP对 UI 不可见。使用对齐属性它可以工作，但是正如您所看到的，右上 GridItem 的item:2 pop POp小部件在外部可见Stack<Griditem>，而我想让它在堆栈外部不可见。我已经测试过使用clipBehavior:每个Clip enums.

我想Pop POp在小部件位于外部时隐藏它Stack，是的，我需要这种弹出效果。

对于 Flutter web，我使用的是 Flutter V2.5.2

当前布局存在问题

重现问题的完整代码

import 'package:flutter/material.dart';
void main() => runApp(
      const MaterialApp(
        home: Appp(),
      ),
    );

class Appp extends StatelessWidget {
  const Appp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const BodyX();
  }
}

class BodyX …