Flutter web cursor with hand pointer style

栏目: IT技术 · 发布时间: 6年前

内容简介：Working with Flutter it is a pleasant experience. Easy, fast, productive, it just works.We can create Flutter Apps for iOS and Android in an extremly short time. But even more, we canGoolge says Flutter web it is

Working with Flutter it is a pleasant experience. Easy, fast, productive, it just works.

We can create Flutter Apps for iOS and Android in an extremly short time. But even more, we can deliver a web based experience to the users. not just mobile “native”.

Goolge says Flutter web it is not ready for production . I believe so, there are still some missing features when it comes to making your App ready for the web.

But that does not mean that we can just use it and be aware of the little limitations we still have.

I have been working on a web based project with Flutter. The first issue I found is that the user does not have the same experience as on the web.

The issue

One thing you just notice straight away is that the mouse is not like in the standard web when hovering on clickable elements Flutter web cursor with hand pointer style .

It does not change to a little hand Flutter web cursor with hand pointer style to let you know you can click on it.

Flutter web cursor with hand pointer style

Well, I wanted to deliver a web site! not a weird web!

So how can you make Flutter web look like a proper web showing the correct cursor style.

The Solution

Modify the index.html giving an Id to the container.

<body id="flutter_container">

In your dart file:

Wrap your “clickable” widget into this MouseCursor widget that looks like this:

class MouseCursor extends MouseRegion{

  static var clickableArea = document.getElementById("flutter_container"); //your element id

  MouseCursor({@required Widget child}):super(
      child:child,
      onHover: _mouseOnHover,
       onExit: _mouseOnExit);

  static void _mouseOnHover(PointerHoverEvent event) {
      clickableArea.style.cursor = "pointer";
  }


  static void _mouseOnExit(PointerExitEvent event) {
    clickableArea.style.cursor = "default";
  }
}

So you should use it this way:

MouseCursor(child: TwitterHeart() ) );

Flutter web cursor with hand pointer style

That is it! Easy right!?

If you like , you have any question or suggestions, please leave a comment or send me an email!

Happy coding with Flutter! :blue_heart:

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农网

查看所有标签

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

浪潮之巅（第2版）（套装上下册）

吴军 / 人民邮电出版社 / 2013-7 / 80.00元

一个企业的发展与崛起，绝非只是空有领导强人即可达成。任何的决策、同期的商业环境，都在都影响着企业的兴衰。《浪潮之巅》不只是一本历史书，除了讲述科技顶尖企业的发展规律，对于华尔街如何左右科技公司，以及金融风暴对科技产业的冲击，也多有着墨。此外，这本书也着力讲述很多尚在普及或将要发生的，比如微博和云计算，以及对下一代互联网科技产业浪潮的判断和预测。因为在极度商业化的今天，科技的进步和商机是分不开的。 ......一起来看看《浪潮之巅（第2版）（套装上下册）》这本书的介绍吧!

码农工具

HEX HSV 转换工具

HEX HSV 互换工具

HSV CMYK 转换工具

HSV CMYK互换工具