I implemented an effect that I found on this medium article https://medium.com/flutter/perspective-on-flutter-6f832f4d912e that allows you rotate widgets in 3d space. My only problem with this is that all of my widgets seem to have no thickness in the z direction so unsightly things like this happen:
My unrotated logo looks like this:
And this is the code I used to create this rotation effect:
import 'package:flutter/material.dart';
class PerspectiveContainer extends StatefulWidget {
final Widget child;
PerspectiveContainer({Key key, @required this.child}) : super(key: key);
@override
_PerspectiveState createState() => _PerspectiveState();
}
class _PerspectiveState extends State<PerspectiveContainer> {
Offset _offset = Offset.zero;
@override
Widget build(BuildContext context) {
return Transform(
transform: Matrix4.identity()
..setEntry(3, 2, 0.001) // perspective
..rotateX(0.004 * _offset.dy)
..rotateY(-0.004 * _offset.dx),
alignment: FractionalOffset.center,
child: GestureDetector(
onPanUpdate: (details) => setState(() => _offset += details.delta),
onDoubleTap: () => setState(() => _offset = Offset.zero),
child: widget.child,
),
);
}
}
So would it be possible to give my BINGO widget thickness in the z direction?(The bingo logo was made with a Table widget)
Material Design works sometimes with shadows and elevation here, which would give you some 3D look, although it is actually 2d. https://material.io/design/environment/elevation.html#elevation-in-material-design
Some Widgets in Flutter have an elevation
attribute, e.g. Card
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With