3D Widgets In Flutter

Ibrahim Al-Tabba
2 min readJan 12, 2022

--

This article will guide you to create awesome 3d shapes with build-in flutter widgets.

3D In Flutter

Basic 3D in flutter:

we can control the Z-Axis of a widget using the Transform widget

Transforming a 2D surface!!

Not what were you looking for?
Don’t be disappointed

After digging deep into pub.dev I found this awesome package.

Zflutter:

published about 2 years ago “from the date of this article” and never seen the light.
probably you didn’t hear about it since it didn’t get any update since its first release.
currently, it has no official support for null safety, no worries you can use this fork at your pubspec.yaml

zflutter:
git:
url: https://github.com/IbrahimTabba/zflutter.git
ref: null-safety

Zfltuter provides the following 3D widgets that can be used to create complex shapes:

  • Rect
  • RoundedRect
  • Circle
  • Ellipse
  • Polygon
  • Shape
  • Path
  • Hemisphere
  • Cone
  • Cylinder
  • Box

You can wrap your ZShape with ZPositioned to control (position/rotation/scale) in the 3d space.

You can also warp a list of ZShap with ZGroup where all ZGroup children will act like on shape.

Zflutter has a gallery website where you can check the documentation and live examples

I got impressed by this package and decided to create a non-official gallery for awesome apps made using Zflutter
currently, it has only a 3D Rubik’s Cube game.

Also it is available on google play :

ZRubick’s Cube is open source

Seeing all these results you can get sure how unlimited you are when you build your app with Flutter.

Thanks for reading, hope you find this useful.

--

--