Skip to content

Instantly share code, notes, and snippets.

@cshannon3
Created July 26, 2020 01:35
Show Gist options
  • Save cshannon3/7e181bdd08585c1bdf464eaa11c4728e to your computer and use it in GitHub Desktop.
Save cshannon3/7e181bdd08585c1bdf464eaa11c4728e to your computer and use it in GitHub Desktop.
Day 1 Hovering Image Widget - based off http://www.jonathanpatterson.com/product-design-portfolio.html
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(body: HoveringImageWidget()));
}
}
class HoveringImageWidget extends StatefulWidget {
const HoveringImageWidget({
Key key,
}) : super(key: key);
@override
_HoveringImageWidgetState createState() => _HoveringImageWidgetState();
}
class _HoveringImageWidgetState extends State<HoveringImageWidget> {
bool _up = true;
final nonHoverTransform = Matrix4.identity()..translate(0, 0, 0);
final hoverTransform = Matrix4.identity()..translate(0, -50, 0);
@override
void initState() {
super.initState();
Future.delayed(Duration(seconds: 1)).then((value) {
setState(() {
_up = !_up;
});
});
}
@override
Widget build(BuildContext context) {
Size s = MediaQuery.of(context).size;
return Container(
height: double.infinity,
width: double.infinity,
color: Color.fromRGBO(234, 67, 53, 1.0),
child: Stack(
children: [
Positioned(
top: 200.0,
left: s.width / 2 - 200.0,
child: AnimatedContainer(
duration: const Duration(seconds: 4),
child: Image.network(
"http://www.jonathanpatterson.com/images/prism-color-2.png"),
height: 360,
width: 360,
onEnd: () {
setState(() {
_up = !_up;
});
},
transform: _up ? hoverTransform : nonHoverTransform,
)),
],
),
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment