英文:
Flutter elevated button color slide in slide out transition animation on hover
问题
如何在Flutter中实现悬浮按钮颜色的鼠标悬停滑入滑出过渡动画
我尝试使用Inkwell的鼠标悬停属性来进行滑动过渡位置，但未能实现。
英文:
How to achieve Flutter elevated button color slide in slide out transition animation on hover
I tried with Slide transition position using on hover property of Inkwell but not able to achieve it
答案1
得分: 0
****更新（09-03-23）**
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter/src/gestures/events.dart';
class DummyWidget extends StatefulWidget {
const DummyWidget({super.key});
@override
State<DummyWidget> createState() => _DummyWidgetState();
}
class _DummyWidgetState extends State<DummyWidget> with SingleTickerProviderStateMixin {
StreamController<double> animationState = StreamController<double>();
double width = 150, height = 70;
@override
void initState() {
super.initState();
animationState.add(0);
}
@override
void dispose() {
super.dispose();
}
@override
Widget build(BuildContext context) => SizedBox(
height: height,
width: width,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: InkWell(
onTap: () {},
child: MouseRegion(
onEnter: (PointerEnterEvent s) {
animationState.sink.add(width);
},
onExit: (PointerExitEvent s) {
animationState.sink.add(0);
},
child: Stack(
children: [
Card(
color: Colors.white,
elevation: 10,
child: SizedBox(
width: width,
height: height,
),
),
StreamBuilder<double>(
stream: animationState.stream,
builder: (
BuildContext context,
AsyncSnapshot<double> snapshot,
) {
debugPrint('Width : ${snapshot.data}');
return AnimatedContainer(
duration: const Duration(milliseconds: 500),
curve: Curves.easeInOut,
width: snapshot.data,
height: height,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(5),
),
margin: const EdgeInsets.all(5),
clipBehavior: Clip.hardEdge,
);
// return AnimatedSize(
// duration: const Duration(milliseconds: 500),
// curve: Curves.easeInOut,
// child: ColoredBox(
// color: Colors.blue,
// child: SizedBox(
// width: snapshot.data,
// height: height,
// ),
// ),
// );
},
),
const Align(
child: Text(
'Something',
style: TextStyle(color: Colors.black),
textAlign: TextAlign.center,
),
)
],
),
),
),
),
);
}
英文:
**Updated (09-03-23)
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter/src/gestures/events.dart';
class DummyWidget extends StatefulWidget {
const DummyWidget({super.key});
@override
State<DummyWidget> createState() => _DummyWidgetState();
}
class _DummyWidgetState extends State<DummyWidget>
with SingleTickerProviderStateMixin {
StreamController<double> animationState = StreamController<double>();
double width = 150, height = 70;
@override
void initState() {
super.initState();
animationState.add(0);
}
@override
void dispose() {
super.dispose();
}
@override
Widget build(BuildContext context) => SizedBox(
height: height,
width: width,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: InkWell(
onTap: () {},
child: MouseRegion(
onEnter: (PointerEnterEvent s) {
animationState.sink.add(width);
},
onExit: (PointerExitEvent s) {
animationState.sink.add(0);
},
child: Stack(
children: [
Card(
color: Colors.white,
elevation: 10,
child: SizedBox(
width: width,
height: height,
),
),
StreamBuilder<double>(
stream: animationState.stream,
builder: (
BuildContext context,
AsyncSnapshot<double> snapshot,
) {
debugPrint('Width : ${snapshot.data}');
return AnimatedContainer(
duration: const Duration(milliseconds: 500),
curve: Curves.easeInOut,
width: snapshot.data,
height: height,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(5),
),
margin: const EdgeInsets.all(5),
clipBehavior: Clip.hardEdge,
);
// return AnimatedSize(
// duration: const Duration(milliseconds: 500),
// curve: Curves.easeInOut,
// child: ColoredBox(
// color: Colors.blue,
// child: SizedBox(
// width: snapshot.data,
// height: height,
// ),
// ),
// );
},
),
const Align(
child: Text(
'Something',
style: TextStyle(color: Colors.black),
textAlign: TextAlign.center,
),
)
],
),
),
),
),
);
}
enter code here
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论