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

更新於 2022/04/24閱讀時間約 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: 文章連結
avatar-img
0會員
4內容數
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
你可能也想看
Google News 追蹤
Thumbnail
徵的就是你 🫵 超ㄅㄧㄤˋ 獎品搭配超瞎趴的四大主題,等你踹共啦!還有機會獲得經典的「偉士牌樂高」喔!馬上來參加本次的活動吧!
Thumbnail
阿揪西放送的老朋友們應該知道,今年我剛結束了一段大齡留學生活。這段時間偶爾有網友私訊詢問學校申請、開銷和準備流程等問題,我也樂於分享各種細節。其中常提到的建議之一就是:開通一個便捷的網銀帳戶。
Thumbnail
# 簡介 身為一位專注於 Vue.js 的前端開發者,這是我第一次嘗試構建 Flutter 網頁應用。讓我們開始吧! ## 第一次嘗試 ### 第一步:創建一個 Flutter 應用 首先,通過運行以下命令來創建一個新的 Flutter 項目: ```sh flutter
Thumbnail
Flutter is a powerful, open-source UI software development kit created by Google.
Thumbnail
解析成List List items=json.decode(jsonStr); print(items[0]["your_key"]); 解析成Map Map<String, dynamic> user = json.decode(json); print('${user['your_k
Thumbnail
這邊會使用WebSocketChannel去與http://www.websocket.org做連線。 連線 final channel = IOWebSocketChannel.connect('wss://echo.websocket.events'); 接收 StreamBui
Thumbnail
Dio是一個Dart Http請求庫,支援Restful API、FormData、攔截器、請求取消、Cookie管理、檔案上傳/下載、逾時等。 加入 dependencies: dio: ^x.x.x #请使用pub上的最新版本 使用 GET Response response;
Thumbnail
什麼是Web3.0? Web3.0 ≠ NFT ≠ 虛擬貨幣 ≠ 去中心化 簡單來說,Web3.0 可以說是網際網路的下一個世代技術的「集合總稱」。需要有很多的軟硬體設備同時都互相配合支援才會走到的「世代技術」。最底層硬體技術,我個人覺得是「上網速度的提昇」以及終端機「運算元的速度提昇」。
Thumbnail
當談到賦權,所有區塊鏈參與者都可以帶動網絡的發展,因此與其思考如何消滅競爭者,倒不如鼓勵合作。
Thumbnail
互聯網的時代中我們幾乎都離不開網路,那如果能夠對於Web具備基礎的知識,就能夠讓我們在使用網路的過程中提升風險意識,以減少被竊取、盜用的風險,進而保護個人資產,因此多一份知識在身上也就等於多了一份防身的武器,一天學一點,透過微小習慣的積累讓我們享受複利的效應。OO 如何運作? 📷
Thumbnail
本範例主要說明如何運用Flutter 繪圖與動態相關的API並搭配provider套件進行實作輪盤賭選擇 ( Roulette Wheel Selection ) 程式。
Thumbnail
我個人認為至少在未來的 5~10 年,金融機構仍可以打出「絕對的信任」這張王牌保住客戶。加上如同我在另一篇《關於 AI 和 ML 在開放銀行的運用,你不可不知的二三事》一文所分享的,即便目前客戶大多傾向享受開放金融帶來的便利,普羅大眾仍對分享自身數據有諸多懷疑。
Thumbnail
徵的就是你 🫵 超ㄅㄧㄤˋ 獎品搭配超瞎趴的四大主題,等你踹共啦!還有機會獲得經典的「偉士牌樂高」喔!馬上來參加本次的活動吧!
Thumbnail
阿揪西放送的老朋友們應該知道,今年我剛結束了一段大齡留學生活。這段時間偶爾有網友私訊詢問學校申請、開銷和準備流程等問題,我也樂於分享各種細節。其中常提到的建議之一就是:開通一個便捷的網銀帳戶。
Thumbnail
# 簡介 身為一位專注於 Vue.js 的前端開發者,這是我第一次嘗試構建 Flutter 網頁應用。讓我們開始吧! ## 第一次嘗試 ### 第一步:創建一個 Flutter 應用 首先,通過運行以下命令來創建一個新的 Flutter 項目: ```sh flutter
Thumbnail
Flutter is a powerful, open-source UI software development kit created by Google.
Thumbnail
解析成List List items=json.decode(jsonStr); print(items[0]["your_key"]); 解析成Map Map<String, dynamic> user = json.decode(json); print('${user['your_k
Thumbnail
這邊會使用WebSocketChannel去與http://www.websocket.org做連線。 連線 final channel = IOWebSocketChannel.connect('wss://echo.websocket.events'); 接收 StreamBui
Thumbnail
Dio是一個Dart Http請求庫,支援Restful API、FormData、攔截器、請求取消、Cookie管理、檔案上傳/下載、逾時等。 加入 dependencies: dio: ^x.x.x #请使用pub上的最新版本 使用 GET Response response;
Thumbnail
什麼是Web3.0? Web3.0 ≠ NFT ≠ 虛擬貨幣 ≠ 去中心化 簡單來說,Web3.0 可以說是網際網路的下一個世代技術的「集合總稱」。需要有很多的軟硬體設備同時都互相配合支援才會走到的「世代技術」。最底層硬體技術,我個人覺得是「上網速度的提昇」以及終端機「運算元的速度提昇」。
Thumbnail
當談到賦權,所有區塊鏈參與者都可以帶動網絡的發展,因此與其思考如何消滅競爭者,倒不如鼓勵合作。
Thumbnail
互聯網的時代中我們幾乎都離不開網路,那如果能夠對於Web具備基礎的知識,就能夠讓我們在使用網路的過程中提升風險意識,以減少被竊取、盜用的風險,進而保護個人資產,因此多一份知識在身上也就等於多了一份防身的武器,一天學一點,透過微小習慣的積累讓我們享受複利的效應。OO 如何運作? 📷
Thumbnail
本範例主要說明如何運用Flutter 繪圖與動態相關的API並搭配provider套件進行實作輪盤賭選擇 ( Roulette Wheel Selection ) 程式。
Thumbnail
我個人認為至少在未來的 5~10 年,金融機構仍可以打出「絕對的信任」這張王牌保住客戶。加上如同我在另一篇《關於 AI 和 ML 在開放銀行的運用,你不可不知的二三事》一文所分享的,即便目前客戶大多傾向享受開放金融帶來的便利,普羅大眾仍對分享自身數據有諸多懷疑。