内容简介：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 .
It does not change to a little hand to let you know you can click on it.
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() ) );
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:
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
我用微软改变世界
保罗·艾伦 / 吴果锦 / 浙江人民出版社 / 2012-3 / 46.00元
《我用微软改变世界(微软联合创始人保罗•艾伦回忆录)》内容简介：1975年，两个从大学退学的男孩夜以继日地设计一款软件。其中一个男孩就是后来的世界首富比尔盖茨，而另外一个则作为盖茨背后的男人，一直生活在盖茨的阴影里，其实，他的人生经历远比盖茨更为传奇和丰富。 16岁，与比尔盖茨在顶级名校湖畔中学相遇，成为最佳拍档，无数趣事，无数闹腾，高呼“处男万岁”还不够，还得意扬扬把这话刻在碑上留给学弟们......一起来看看 《我用微软改变世界》 这本书的介绍吧!
JS 压缩/解压工具
在线压缩/解压 JS 代码
XML 在线格式化
在线 XML 格式化压缩工具