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: 文章連結
avatar-img
0會員
4內容數
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
你可能也想看
Google News 追蹤
Thumbnail
大家好,我是woody,是一名料理創作者,非常努力地在嘗試將複雜的料理簡單化,讓大家也可以體驗到料理的樂趣而我也非常享受料理的過程,今天想跟大家聊聊,除了料理本身,料理創作背後的成本。
Thumbnail
哈囉~很久沒跟各位自我介紹一下了~ 大家好~我是爺恩 我是一名圖文插畫家,有追蹤我一段時間的應該有發現爺恩這個品牌經營了好像.....快五年了(汗)時間過得真快!隨著時間過去,創作這件事好像變得更忙碌了,也很開心跟很多厲害的創作者以及廠商互相合作幫忙,還有最重要的是大家的支持與陪伴🥹。  
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
最近在嘗試使用不同的AI生圖方式混合出圖的方式,採用A平台的優點,並用B平台後製的手法截長補短,創造出自己更想要的小說場景,效果不錯,現在以這張圖為例,來講一下我的製作步驟。
Thumbnail
Inpaint-web 免費開源的 AI 圖像擦除與放大工具,在用戶端瀏覽器載入模型,處理過程都在本機裝置上執行。完全免費,無須註冊也沒有限制次數,簡單塗抹標記即可擦除該區域的影像,輸出圖片會保留原來尺寸,還可將圖片解析度放大四倍。
Thumbnail
wiggle是一個非常有用的表達式,用於給層的屬性添加隨機抖動效果。這個表達式特別適合於創建自然、隨機的運動,例如攝像機的手持效果、文字的抖動、或者任何需要不規則運動的場景。
Thumbnail
# 簡介 身為一位專注於 Vue.js 的前端開發者,這是我第一次嘗試構建 Flutter 網頁應用。讓我們開始吧! ## 第一次嘗試 ### 第一步:創建一個 Flutter 應用 首先,通過運行以下命令來創建一個新的 Flutter 項目: ```sh flutter
Thumbnail
Ae 小技巧:Wiggle Paths 手繪感 動態後記系列會記錄一些我在製作中的記錄,可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇,就是補充用的小筆記,沒有前後順序,可跳著閱讀。
Thumbnail
這是一個簡單的工作流,可以對輸入的圖片進行3D重建
Thumbnail
前篇測試如何把提示詞生成的圖像細節提高,這篇要測試的工作流是把任意圖像載入後經由放大模型放大,同時測試放大後重繪看看效果如何。
Thumbnail
蜜柑公子為大家分享這個「動態反思解說技巧」,希望可以幫助大家在生活中運用。
Thumbnail
大家好,我是woody,是一名料理創作者,非常努力地在嘗試將複雜的料理簡單化,讓大家也可以體驗到料理的樂趣而我也非常享受料理的過程,今天想跟大家聊聊,除了料理本身,料理創作背後的成本。
Thumbnail
哈囉~很久沒跟各位自我介紹一下了~ 大家好~我是爺恩 我是一名圖文插畫家,有追蹤我一段時間的應該有發現爺恩這個品牌經營了好像.....快五年了(汗)時間過得真快!隨著時間過去,創作這件事好像變得更忙碌了,也很開心跟很多厲害的創作者以及廠商互相合作幫忙,還有最重要的是大家的支持與陪伴🥹。  
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
最近在嘗試使用不同的AI生圖方式混合出圖的方式,採用A平台的優點,並用B平台後製的手法截長補短,創造出自己更想要的小說場景,效果不錯,現在以這張圖為例,來講一下我的製作步驟。
Thumbnail
Inpaint-web 免費開源的 AI 圖像擦除與放大工具,在用戶端瀏覽器載入模型,處理過程都在本機裝置上執行。完全免費,無須註冊也沒有限制次數,簡單塗抹標記即可擦除該區域的影像,輸出圖片會保留原來尺寸,還可將圖片解析度放大四倍。
Thumbnail
wiggle是一個非常有用的表達式,用於給層的屬性添加隨機抖動效果。這個表達式特別適合於創建自然、隨機的運動,例如攝像機的手持效果、文字的抖動、或者任何需要不規則運動的場景。
Thumbnail
# 簡介 身為一位專注於 Vue.js 的前端開發者,這是我第一次嘗試構建 Flutter 網頁應用。讓我們開始吧! ## 第一次嘗試 ### 第一步:創建一個 Flutter 應用 首先,通過運行以下命令來創建一個新的 Flutter 項目: ```sh flutter
Thumbnail
Ae 小技巧:Wiggle Paths 手繪感 動態後記系列會記錄一些我在製作中的記錄,可能是分解動畫、小技巧、發想、腳本......等等。 每篇都是小短篇,就是補充用的小筆記,沒有前後順序,可跳著閱讀。
Thumbnail
這是一個簡單的工作流,可以對輸入的圖片進行3D重建
Thumbnail
前篇測試如何把提示詞生成的圖像細節提高,這篇要測試的工作流是把任意圖像載入後經由放大模型放大,同時測試放大後重繪看看效果如何。
Thumbnail
蜜柑公子為大家分享這個「動態反思解說技巧」,希望可以幫助大家在生活中運用。