How to create 3D animations in Flutter

Flutter, a popular open-source UI framework developed by Google, has gained immense popularity among developers for its ability to create beautiful and interactive user interfaces across various platforms. While Flutter is primarily known for its 2D capabilities, it's also possible to create stunning 3D animations within the framework.

3D animations in Flutter

3D animations in Flutter refer to the dynamic and interactive visual effects that involve the manipulation of objects in three-dimensional space within a Flutter application. While Flutter is primarily designed for creating 2D user interfaces, developers have found ways to incorporate 3D animations and effects using third-party libraries and plugins.

In the context of Flutter, 3D animations can include various effects and interactions, such as:

Rotations and transformations: Objects can be rotated, scaled, and translated into three-dimensional space to create dynamic and realistic animations. This can be useful for showcasing objects from different angles or simulating spatial transformations.
Particle effects: Developers can create particle systems to generate realistic effects like fire, smoke, rain, or explosions. These particles can move in three dimensions, responding to physics and environmental conditions.
3D models and visualizations: You can import and render 3D models in Flutter to visualize complex objects, architectural designs, or educational concepts. These models can be manipulated and animated to provide interactive experiences.
Camera and viewport manipulation: Flutter applications can simulate camera movements and control the user's viewpoint within a 3D scene. This allows users to explore environments or objects from different perspectives.

Sphere 3D animation implementation

Now with all that we've learned, let's integrate a 3D object model into our Flutter app by first adding it into a folder named assets and then including it into our assets in the pubspec.yaml file.

import 'package:flutter/material.dart';
import 'package:flutter_3d_obj/flutter_3d_obj.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Simple 3D Animation')),
        body: My3DScene(),
      ),
    );
  }
}

class My3DScene extends StatefulWidget {
  @override
  _My3DSceneState createState() => _My3DSceneState();
}

class _My3DSceneState extends State<My3DScene> with SingleTickerProviderStateMixin {
  AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: Duration(seconds: 10), // Adjust the duration as needed
    )..repeat();
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: RotationTransition(
        turns: _controller,
        child: Object3D(
          size: Size(20, 20), // Adjust the size as needed
          angleX:_controller.value * 360, // Rotate around X-axis using the animation controller value
          angleY: 0.0, // Set initial rotation angles if needed
          angleZ: 0.0,
          path: 'assets/Earth.obj',
          asset: true,
        ),
      ),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

Using AnimatedBottomNavigationBar in our app

Code explanation

Lines 8–18: MyApp is a StatelessWidget that represents the main application widget. It returns a MaterialApp with a Scaffold containing an AppBar and the My3DScene widget as the body.
Lines 20–25: My3DScene is a StatefulWidget that represents the 3D scene widget. It defines the _My3DSceneState as its state class._My3DSceneState is the state class for My3DScene. It extends State and includes SingleTickerProviderStateMixin to provide the vsync for the animation controller.
Lines 28–35: In the initState method, we create an AnimationController named _controller. It controls the animation and repeats the animation every 5 seconds. The animation will automatically start when the state is initialized.
Lines 38–50: In the build method, we return a Center widget with the Object3D widget as the child. The Object3D widget represents the 3D model and requires the following properties:
- size: The size of the widget.
- path: The path to the 3D model file. In this case, it's 'assets/Earth.obj'.
- asset: A boolean indicating whether the path refers to an asset or a remote file.
- angleX, angleY, and angleZ: The rotation angles around the X, Y, and Z axes, respectively. Here, we set angleY to _controller.value * 360 to continuously rotate the model around the Y-axis based on the animation controller value.
Lines 56–60: In the dispose method, we dispose of the _controller when the widget is removed from the widget tree to prevent memory leaks.

Free Resources