Mizan84
commented
1 week ago Found where the problem is. visibility_detector package is ok. Problem is in AnimatedContainer. transform: Matrix4.identity()..scale(visible ? 1 : .7), code in the animated container not supporting WASM.
Problem description
visibility_detector 0.4.0+2 using this package in my web app. When running the app on google chrome normally it work fine. but when running with recently released wasm support then it does not work
Steps to reproduce
import 'package:flutter/cupertino.dart'; import 'package:visibility_detector/visibility_detector.dart';
class ZoomoutWidget extends StatefulWidget { final Widget child; final Key visibilityKey; const ZoomoutWidget({ super.key,required this.child, required this.visibilityKey, });
@override State createState() => _ZoomoutWidgetState();
}
class _ZoomoutWidgetState extends State {
bool visible=false;
@override
Widget build(BuildContext context) {
return VisibilityDetector(
key: widget.visibilityKey,
onVisibilityChanged: (VisibilityInfo visibilityInfo) {
if (visibilityInfo.visibleFraction >= 0.5) {
setState(() {
visible = true;
});
}
},
child: AnimatedOpacity(
duration: const Duration(milliseconds: 500),
opacity: visible?1:0,
child: AnimatedContainer(
duration: const Duration(milliseconds: 500),
transform: Matrix4.identity()..scale(visible ? 1 : .7),
transformAlignment: Alignment.center,
child: widget.child,
),
),
);
}
}
it takes a child and zoom when become visible. Normally it runs very fine. But when using flutter run --wasm , then the widget can not render.
Expected behavior
I was using this package to zoom widgets when they become visible in the viewport.
Actual behavior
When running with wasm then the widget does not show.
Environment
flutter version 3.24
Additional details
The zoom effect can be checked in the website https://flutteralive.com . the link is https://www.flutteralive.com/demo/https://estore.flutteralive.com . Now i want to convert all my template to wasm supported as I see they load faster.