# Flutter and 3D

Jan 19 · 3 min read

Thinking in real world…

What if I want to display something in 3D ? Hmmm…

All in one Flutter resource : https://flatteredwithflutter.com/flutter-and-3d/

# Pre-Requisite…

Application created is for Flutter Desktop…In case you are new to it, we got you covered, follow the article here

# Begin…

## Transform…

As per the official Flutter documentation,

“A widget that applies a transformation before painting its child.”

This is an important widget if you aim for 3d transformation…

Our code using Transform Widget,

Parameters for Transform Widget :

• alignment : Alignment of the origin (Our case FractionalOffset.centerLeft)
• transform : Matrix to transform…
• child : Widget on which Transformation occurs

## Transform Matrix…

Transform takes a 3D transformation matrix, which is a Matrix4.

## Steps :

1. Create the matrix:

`Matrix4.identity()`

2. Set the perspective:

According to an article from Flutter

Perspective makes objects that are farther away appear smaller. Setting row 3, column 2 of the matrix to 0.001 scales things down based on their distance.

Now we know,

`setEntry(3, 2, 0.0011)`

3 means the Row 3, 2 means the Column 2

The number 0.0011 : is the perspective number…This number can only be achieved by playing around…

For our case, 0.0011 (fits fine)

3. Set the rotation / Tilting the axis….

`..rotateX(_offset.dy)..rotateY(_offset.dx),`

rotateX and rotateY take in angle as parameters. For our case, we have defined as offset as :

`Offset _offset = Offset(0.3, -0.9);`

Again, these values were achieved by playing around….

4. Specify child : RotationTransition in our case

## RotationTransition….

As per the official Flutter documentation,

Animates the rotation of a widget.

This is the child widget for our 3d transformation…

Parameters for RotationTransition Widget :

• turns : animation (our case animation controller)
• child : Widget on which rotation occurs…

Note : As your turns need a controller, hence the widget should be a Stateful widget having animation controller….

The image for the solar-system is rotated using the animation controller, also the animation is kept in repeat mode with the duration of 50 seconds (for one animation cycle)….

How does the 3D effect looks like :

## Slowing down animations…

This can be achieved using (timeDilation)

`timeDilation = 2.0; // Will slow down animations by a factor of two`

This property is present inside the package

`import 'package:flutter/scheduler.dart';`

Other great articles showing 3-D concepts :

Source Code for the tutorial here

Written by

## More From Medium

### Using Firebase Analytics in Flutter

May 6, 2019 · 2 min read

### A Better Bottom Bar

Dec 20, 2019 · 15 min read

#### More on Dart from FlutterPub

Feb 21 · 4 min read

#### 87

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just \$5/month. Upgrade