标签: flutter-web

Flutter RawKeyboardListener 在发布模式下不起作用

我用来RawKeyboardListener捕获网络上的键盘事件,它在调试模式下工作正常,但是当我构建它以进行发布时,它不会捕获键盘事件。我用一个基本的应用程序尝试过:

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  Future<void> …
Run Code Online (Sandbox Code Playgroud)

flutter flutter-web

4
推荐指数
1
解决办法
1353
查看次数

如何在 Flutter web 中使用 &lt;a&gt; 锚元素?

当前设置(使用launch

我想在我的 Flutter Web 应用程序中使用链接,目前这样做(使用 package url_launcher

return MouseRegion(
  cursor: SystemMouseCursors.click,
  child: GestureDetector(
    onTap: () {
      launch('https://creativemaybeno.dev');
    },
    child: const Text(
      'my amazing link',
      style: TextStyle(
        decoration: TextDecoration.underline,
      ),
    ),
  ),
);
Run Code Online (Sandbox Code Playgroud)

使用什么有效launch

此代码片段正确执行了三件事:

  • 完全适用于移动设备
  • 在网页上悬停时显示单击光标
  • 在大多数情况下打开网络上的链接

使用什么不起作用launch

<a>然而,与在常规 HTML 中使用锚元素相比,我在网络上使用此方法存在许多问题:

  • 浏览器左下角不显示链接预览。这就是它在常规 HTML页面
    上的样子:

截屏

  • 链接打开速度似乎比常规网络应用程序中的链接

  • Safari 完全阻止我的链接(“阻止弹出窗口”)

特别是链接在 Safari 上不起作用以及链接预览未显示,我真的需要解决这个问题才能获得流畅的网络体验。我该如何实现这一目标?

html dart flutter flutter-web

4
推荐指数
1
解决办法
1618
查看次数

我如何在两个类之间导航,其中一个类需要传递数据?颤动中

我有2个类,其中一个类需要传递数据,而B类没有这个类的数据,比如登录类将注册数据传递给A类,但是B类没有这个数据,但是需要访问到A级?

我用了Navigation.of(context).pushNamed(context, classB.id)

但不工作

dart flutter flutter-layout flutter-web

4
推荐指数
1
解决办法
1331
查看次数

Flutter:我能知道我在哪个平台吗?

我正在开发一个项目,该项目既可以作为应用程序也可以作为网页使用。我正在使用 flutter_secure_storage 来存储应用程序的本地数据,但我需要一种不同的网络方法。有没有办法可以在运行时找出我所在的平台,并相应地选择正确的读写函数?

flutter flutter-web

4
推荐指数
1
解决办法
5717
查看次数

Flutter,如何在 PaginatoredDataTable 中以编程方式更改页面?

我有一个分页数据表和搜索栏,它工作得很好,但是当我搜索我的数据表时,它不会进入第一页。当我单击第一页时,它会转到第一页,并且会显示我的新过滤列表。如何在数据表中以编程方式更改页面?

这是我的分页数据表

    PaginatedDataTable paginatedDataTable = PaginatedDataTable(
    actions: [
      AnimatedSearchBar(
          width: 300,
          textController: _searchController,
          onSuffixTap: () {
            setState(() {
              _searchController.text = "";
            });
          }),
      widget.showDialog == null
          ? SizedBox()
          : AddUpdateButton(
              buttonType: ButtonTypes.add,
              onPressed: widget.showDialog,
            )
    ],
    initialFirstRowIndex: firstRowIndex,
    source: dts, 
    rowsPerPage: _rowsPerPage,
    header: Text(
      widget.title,
      style: CustomTextStyle.mblackBoldTextStyle,
    ),
    sortColumnIndex: _sortColumnIndex,
    sortAscending: _sortAscending,
    availableRowsPerPage: [
      _defaultRowsPerPage,
      _defaultRowsPerPage * 2,
      _defaultRowsPerPage * 5,
      _defaultRowsPerPage * 10
    ],
    showCheckboxColumn: false,
    dataRowHeight: widget.dataRowHeight,
    showFirstLastButtons: true,
    onRowsPerPageChanged: (r) {
      setState(() {
        _rowsPerPage = r;
      }); …
Run Code Online (Sandbox Code Playgroud)

dart flutter flutter-layout flutter-web paginateddatatable

4
推荐指数
1
解决办法
2454
查看次数

为混合 Web/移动 Flutter 项目导入 js.dart 和 html.dart

我正在使用颤振2.5.2。我有一个项目可用于网络和移动设备(Android / iOS)。

有一个特定的小部件,在部署 Web 时我需要使用该小部件的一种版本,它使用 JS 和 HTML 包。在针对移动设备进行部署时,我需要使用仅使用标准 Flutter 小部件的不同版本。(原因很复杂 - 我将 Unity 嵌入到 flutter 中)。

例如,我有这个web_player.dart网络版本:

import 'dart:html' as html;
import 'package:js/js.dart';
import 'package:flutter/material.dart';

@JS('loadPlayer')
external String loadPlayer();

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

  @override
  Widget build(BuildContext context) {
    // Use the HTML package and return an HtmlElementView
  }
}
Run Code Online (Sandbox Code Playgroud)

mobile_player.dart版本适用于移动设备:

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

  @override
  Widget build(BuildContext context) {
    return …
Run Code Online (Sandbox Code Playgroud)

flutter flutter-web flutter-html flutter-js

4
推荐指数
1
解决办法
2412
查看次数

参数类型“AnimationController?” 无法分配给参数类型“Animation&lt;double&gt;”

我是颤振新手。

所以我尝试在颤动中使用曲线动画,但它给了我一个标题中提到的类型错误。我在下面分享了我的 main.dart 和welcome_screen.dart。在文档 https://flutter.dev/docs/development/ui/animations/tutorial中,他们还使用了动画控制器和曲线(以及 Tween),我想我也做了同样的事情。怎么解决这个问题呢?

主程序.dart

import 'package:flutter/material.dart'; import 'package:flash_chat/screens/welcome_screen.dart'; import 'package:flash_chat/screens/login_screen.dart'; import 'package:flash_chat/screens/registration_screen.dart'; import 'package:flash_chat/screens/chat_screen.dart';

void main() => runApp(FlashChat());

class FlashChat extends StatelessWidget {   @override   Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        textTheme: TextTheme(bodyText1: TextStyle(color: Colors.black54)),
      ),
      initialRoute: WelcomeScreen.id,
      routes: {
        WelcomeScreen.id: (context) => WelcomeScreen(),
        LoginScreen.id: (context) => LoginScreen(),
        RegistrationScreen.id: (context) => RegistrationScreen(),
        ChatScreen.id: (context) => ChatScreen(),
      },
    );   } }
Run Code Online (Sandbox Code Playgroud)

欢迎屏幕.dart

import 'package:flutter/material.dart'; import 'package:flash_chat/screens/login_screen.dart'; import 'package:flash_chat/screens/registration_screen.dart';

class WelcomeScreen extends StatefulWidget {   static const …
Run Code Online (Sandbox Code Playgroud)

dart flutter flutter-layout flutter-animation flutter-web

4
推荐指数
1
解决办法
5006
查看次数

如何在 Flutter Web 上启用自定义图标?

我有自定义图标,可以在 IOS 和 Android 上正常工作。当我在 Web 上部署时,应用程序中应显示图标的每个位置都会出现一个划掉的框。

控制台中出现的错误如下:

找不到一组 Noto 字体来显示所有缺失的字符。请为缺失的字符添加字体资源。

当我检查Flutter Design Fonts的文档时,我发现我已经遵循了这些步骤。

我的自定义图标 ( fishfarm.ttf) 位于资产文件夹中。在pubspec.yaml我有以下内容:

  fonts:
   - family: FishFarm
     fonts:
      - asset: assets/fishfarm.ttf
Run Code Online (Sandbox Code Playgroud)

我可以在 IOS 和 Android 中使用我的图标Icon(FishFarm.nombreicono)

如何在 Flutter Web 中使用自定义图标?

flutter flutter-web

4
推荐指数
1
解决办法
3149
查看次数

无法使用 Riverpod 观看对象实例

在 Flutter Web 项目中,我遇到了 Riverpod 的问题:

Consumer(
  builder: (context, watch, child) {
    final om=watch(human);  
    return Text(om.name); }
Run Code Online (Sandbox Code Playgroud)

“watch”带有下划线,编译器说:The expression doesn't evaluate to a function, so it can't be invoked. 快速修复建议是将 human 从括号中删除。当然,当我还有一些战斗力时,这不会发生。这是人类的定义:

final human=ChangeNotifierProvider((ref)=>Human()); 

class Human with ChangeNotifier{String name="tananana";}
Run Code Online (Sandbox Code Playgroud)

我无法告诉你我正在导入哪个版本的 Riverpod,因为我不得不在 pubspec.yaml 中未指定它,以便它可以解决与其他导入的冲突,但我使用的是通道主运行版本2.9.0-1.0.294 之前

任何建议都会受到重视。

dart flutter flutter-web riverpod

4
推荐指数
1
解决办法
1351
查看次数

Flutter Web 如何为 Android 应用程序链接验证提供文件 assetlinks.json

我正在Firebase Hosting上部署Flutter Web 应用程序

以及Android 上的 Flutter 应用程序

assetlinks.json要使用重定向到我的 Android 应用程序的应用程序链接,我需要验证在网络上提供文件的应用程序链接:https://example.com/.well-known/assetlinks.json

如何在没有 3XX 重定向的情况下从我的域(使用 Firebase 托管部署在 Web 上的 Flutter)提供该文件?

firebase-hosting flutter flutter-web

4
推荐指数
1
解决办法
2550
查看次数