Flutter Web image hover zoom(實現圖片懸浮縮放)

閱讀時間約 6 分鐘
Implement Picture zoom when hover the image.
鼠標懸浮縮放
How to implement it?
Using AnimatedContainer to do animation and using InkWell to detect hover.
In InkWell:
InkWell(
onTap: () {
print('Tap');
},
// Detect
hover here
onHover: (val) {
setState(() {
isHover = val;
print(val);
});
},
child: //Child
)
In AnimatedContainer:
AnimatedContainer(
transform: isHover ? hoverdTransform : unhoverdTransform,
// duraction time
duration: const Duration(seconds: 10),
curve: Curves.ease,
child: Image.network(
imageUrl,
fit: BoxFit.cover,
height: 200,
),
),
Full Code:
import 'dart:convert';
import 'dart:io';

import 'package:flutter/material.dart';

void main() {
runApp(
MaterialApp(
home: Home(),
),
);
}

class Home extends StatefulWidget {
@override
_HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: ZoomAnimate(),
);
}
}

class ZoomAnimate extends StatefulWidget {
const ZoomAnimate({Key? key}) : super(key: key);

@override
State<ZoomAnimate> createState() => _ZoomAnimateState();
}

class _ZoomAnimateState extends State<ZoomAnimate> {
bool isHover = false;
String imageUrl =
"https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg/220px-Ash_Tree_-_geograph.org.uk_-_590710.jpg";

@override
Widget build(BuildContext context) {
final hoverdTransform = Matrix4.identity()..scale(1.2);
final unhoverdTransform = Matrix4.identity()..scale(1);
return Padding(
padding: const EdgeInsets.all(8.0),
child: InkWell(
onTap: () {
print('Tap');
},
onHover: (val) {
setState(() {
isHover = val;
print(val);
});
},
child: ClipRRect(
borderRadius: BorderRadius.circular(8.0),
child: AnimatedContainer(
transform: isHover ? hoverdTransform : unhoverdTransform,
duration: const Duration(seconds: 10),
curve: Curves.ease,
child: Image.network(
imageUrl,
fit: BoxFit.cover,
height: 200,
),
),
),
),
);
}
}

歡迎大家來我的Blog看:
1.Blog: 文章連結
2.Medium: 文章連結
0會員
4內容數
留言0
查看全部
發表第一個留言支持創作者!
你可能也想看
創作者要怎麼好好休息 + 避免工作過量?《黑貓創作報#4》午安,最近累不累? 這篇不是虛假的關心。而是《黑貓創作報》發行以來可能最重要的一篇。 是的,我們這篇講怎麼補充能量,也就是怎麼休息。
Thumbnail
avatar
黑貓老師
2024-06-29
建立一個簡單的 flutter web 並且用 live-server 或 webdev 進行測試 # 簡介 身為一位專注於 Vue.js 的前端開發者,這是我第一次嘗試構建 Flutter 網頁應用。讓我們開始吧! ## 第一次嘗試 ### 第一步:創建一個 Flutter 應用 首先,通過運行以下命令來創建一個新的 Flutter 項目: ```sh flutter
Thumbnail
avatar
Ho Michael
2024-06-15
Flutter for BeginnersFlutter is a powerful, open-source UI software development kit created by Google.
Thumbnail
avatar
Digiworld
2024-04-29
[Flutter]JSON解析解析成List List items=json.decode(jsonStr); print(items[0]["your_key"]); 解析成Map Map<String, dynamic> user = json.decode(json); print('${user['your_k
Thumbnail
avatar
小黑
2023-12-28
[Flutter]WebSockets這邊會使用WebSocketChannel去與http://www.websocket.org做連線。 連線 final channel = IOWebSocketChannel.connect('wss://echo.websocket.events'); 接收 StreamBui
Thumbnail
avatar
小黑
2023-12-26
[Flutter]DioDio是一個Dart Http請求庫,支援Restful API、FormData、攔截器、請求取消、Cookie管理、檔案上傳/下載、逾時等。 加入 dependencies: dio: ^x.x.x #请使用pub上的最新版本 使用 GET Response response;
Thumbnail
avatar
小黑
2023-12-26
Web 3.0 入場券,我的第一個NFT什麼是Web3.0? Web3.0 ≠ NFT ≠ 虛擬貨幣 ≠ 去中心化 簡單來說,Web3.0 可以說是網際網路的下一個世代技術的「集合總稱」。需要有很多的軟硬體設備同時都互相配合支援才會走到的「世代技術」。最底層硬體技術,我個人覺得是「上網速度的提昇」以及終端機「運算元的速度提昇」。
Thumbnail
avatar
Okuma 多元體
2022-02-28
Web 3.0 系列 III - 跟著 FinTech 樞紐新加坡學習設計金融服務 (其他金融領域)當談到賦權,所有區塊鏈參與者都可以帶動網絡的發展,因此與其思考如何消滅競爭者,倒不如鼓勵合作。
Thumbnail
avatar
Neverlandseeker SC
2022-02-24
Web世界的邦交國政策 — 跨來源資源共用(Cross-Origin Resource Sharing, CORS)互聯網的時代中我們幾乎都離不開網路,那如果能夠對於Web具備基礎的知識,就能夠讓我們在使用網路的過程中提升風險意識,以減少被竊取、盜用的風險,進而保護個人資產,因此多一份知識在身上也就等於多了一份防身的武器,一天學一點,透過微小習慣的積累讓我們享受複利的效應。OO 如何運作? 📷
Thumbnail
avatar
阿Han
2022-02-23
實戰Flutter程式開發 - Roulette Wheel Selection本範例主要說明如何運用Flutter 繪圖與動態相關的API並搭配provider套件進行實作輪盤賭選擇 ( Roulette Wheel Selection ) 程式。
Thumbnail
avatar
跨碼軟體有限公司
2022-02-13
Web 3.0 系列 II - 跟著 FinTech 樞紐新加坡學習設計金融服務 (個人金融市場)我個人認為至少在未來的 5~10 年,金融機構仍可以打出「絕對的信任」這張王牌保住客戶。加上如同我在另一篇《關於 AI 和 ML 在開放銀行的運用,你不可不知的二三事》一文所分享的,即便目前客戶大多傾向享受開放金融帶來的便利,普羅大眾仍對分享自身數據有諸多懷疑。
Thumbnail
avatar
Neverlandseeker SC
2022-01-17