Flutter: make a 3D cube with only built-in widgets

This video describes how to build a simple 3D cube (with 6 faces) in Flutter, without using third-party plugins or game engines. It's made with built-in `Transform` widgets that translate and rotate `Containers`, based on values reported from a `GestureDetector` and a couple of `Slider` widgets.

[mcquintao]

I spend weeks looking for this kind of solutions for 3D. Thanks!!

[MaxUnhold]

And a minimal example in the comments or on github would be amazing! Thank you for your work

[flutter.effects]

are you changing the widget order in the stack during rotation?

without changing the direction its really not working.

[MaxUnhold]

Hey, when I try to re-create your example, the cube- facetts always overlay each other such that the 3D-effect is gone. That means that one facet always stays in front instead of vanishing behind another one. What did I do wrong?

[kbyo]

Is it possible anímate that cube?? Could you make a tuto please 😅😅

[HexaMinate]

is it possible with flutter we can make games with very complex 3d models, like grand theft auto?

[nguyenquanghuy]

what version flutter you use ? Why i code like you but when i add transform in stack, it's just show projection of widget :( is there any trick for it ?

[Kuba_theShredder]

I am currently working on a game, it is sort of like a pizzle, I need to be able to rotate pieces in a 2 d space, I can achieve this but it is veryyyy slow on Iphone, the rotation itself is smooth but it is very delayed, any ideas? This is a piece of code i use to rotate my Path within a Canvas

Offset rotationCenter = calculateMiddle();
var matrix = Matrix4.identity()
..translate(rotationCenter.dx, rotationCenter.dy)
..rotateZ(rotation)
..translate(-rotationCenter.dx, -rotationCenter.dy);
Path translatedPath =
path = translatedPath;