标签: flutter-web

我试图用 Flutter 得到这个结果；

我有这种行为；

代码;

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

class OverlayAnimatedGridElement extends StatefulWidget {
  OverlayAnimatedGridElement(this.imagepath, this.postDetail, this.postTitle);
  final String imagepath;
  final String postTitle;
  final String postDetail;

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

class _OverlayAnimatedGridElementState extends State<OverlayAnimatedGridElement>
    with TickerProviderStateMixin {
  AnimationController _controller;
  Animation<double> _opacityTween;
  bool isHovered = false;

  @override
  void initState() {
    _controller =
        AnimationController(vsync: this, duration: Duration(milliseconds: 500));
    _opacityTween = Tween<double>(begin: 0, end: 1).animate(
        CurvedAnimation(parent: _controller, curve: Curves.easeInOutCirc));

    super.initState();
  }

  hoverActivation(hoverState) {
    bool hoverState;
    isHovered = …

如何在 flutter web 中为仪表板创建垂直选项卡导航以及最好的方法是什么？

我需要一些帮助，我正在尝试使用 flutter 构建一个网络应用程序，一切都很好，但问题是当我想更改网络图标时，它没有改变，我不知道为什么，我添加了 flutter dependency flutter_launcher_icons：^0.8.1，我运行 pub get 以及设置所需的所有步骤，但我的 pubspec.yaml 文件没有任何变化

这是输出，没有任何变化，有人可以帮助我吗？

我想在我的 flutter web 应用程序中接收 firebase 通知。我知道 firebase_messaging 包不可用于网络。但我已经管理配置我的应用程序以获取令牌，当网络应用程序位于后台时接收和显示消息，以及当应用程序位于前台时接收（但尚未显示消息）。

我通过创建 JavaScript（和服务工作线程）来实现这一点，如下所述：

https://medium.com/@rody.davis.jr/how-to-send-push-notifications-on-flutter-web-fcm-b3e64f1e2b76

https://firebase.google.com/docs/cloud-messaging/js/client

https://firebase.google.com/docs/cloud-messaging/js/receive

问题是，到目前为止，我只能将消息发送到“特定令牌”或“每个人”，而我需要将消息发送到“特定主题”。

使用 JS 向特定主题发送云消息的文档继续如下： https: //firebase.google.com/docs/cloud-messaging/js/topic-messaging

但问题是，这部分代码不再像以前那样放在index.html文件中。（可以是node.js、java、python、Go 或C#）

我不知道如何在我的 flutter web 应用程序中实现它。有可能吗？

这是我想添加到我的 flutter web 应用程序中的部分：

我正在为网络和移动设备创建一个跨平台应用程序。然而，根据平台的不同，按钮具有不同的默认高度。如何在不检查平台的情况下使按钮的高度在移动设备和网页上保持相同的大小？

使用flutter和charts_flutter包我想绘制一个烛台图以及其他线（例如macd）和底部的交易量。不幸的是，我无法理解如何与图表的其余部分一起绘制蜡烛。有人愿意向我展示有关如何执行此操作的示例代码吗？蜡烛甚至可以用一条垂直线及其顶部的矩形来表示。

可以在这里看到几个示例图

多谢

我正在尝试构建 Threejs 元素周期表螺旋视图的 Flutter Web 版本（请参见此处：https: //mrdoob.com/lab/javascript/thirdjs/css3d/periodictable/并单击“Helix”）

目前，我将所有元素图块放在一个堆栈中，并通过矩阵变换来定位和旋转它们。见下面的代码：

  @override
  Widget build(BuildContext context) {
    double initialRotateX = (widget.atomicNumber - 1) *
        (math.pi / Constants.numberOfElementsPerHalfCircle);
    return Transform(
      transform: Matrix4.identity()
        ..translate(
          math.sin((widget.atomicNumber - 1) *
                  (math.pi / Constants.numberOfElementsPerHalfCircle)) *
              Constants.radius,
          widget.atomicNumber * 4,
          -math.cos((widget.atomicNumber - 1) *
                  (math.pi / Constants.numberOfElementsPerHalfCircle)) *
              Constants.radius,
        )
        ..translate(Constants.elementCardHalfSize)
        ..rotateY(-initialRotateX)
        ..translate(-Constants.elementCardHalfSize),
      child: Container(
        decoration: BoxDecoration(
            color: Constants.elementCardColor,
            border: Border.all(width: 1, color: Colors.white.withOpacity(0.3))),
        child: SizedBox(
          width: Constants.elementCardWidth.toDouble(),
          height: Constants.elementCardHeight.toDouble(),
          child: ElementText()
          
        ),
      ),
    );

然后，所有这些卡片都被放置在另一个类的堆栈小部件内，并且该小部件被旋转，如下所示：

return AnimatedBuilder(
      animation: …

当文件路径位于网络平台中时，如何显示在网络中选取的file_picker图像？null

Image.file(context.select<BlogProvider, File>((BlogProvider p) => p.image))

Future<void> pickImage() async {
    /// If [withReadStream] is set, picked files will have its byte data available as a [Stream<List<int>>]
    /// which can be useful for uploading and processing large files.
    FilePickerResult result = await FilePicker.platform.pickFiles(
      type: FileType.custom,
      allowedExtensions: ['jpg', 'jpeg'],
      withReadStream: true,
    );
    if (result != null) {
      PlatformFile file = result.files.single; //single means I am Picking just One file not more
      _blogImage …