Flutter – Create 3D Text

Flutter, developed by Google, has gained immense popularity among developers due to its flexibility and ease of use. With Flutter, we can create stunning user interfaces, including 3D elements. This tutorial will explore how to create 3D text in Flutter step by step using the text_3d library. A sample video is given below to get an idea about what we are going to do in this article.

Prerequisite

Before we begin, ensure Flutter is installed on the system. If not, download and install Flutter by following the instructions on the official Flutter website.

Available 3D-Text Style

1. standard: Basic 3D effect where the text has a subtle depth.
2. raised: The text appears elevated from the background, creating a raised effect.
3. inset: Text is designed to appear pressed into the background, giving a subtle engraved look.
4. perspectiveRaised: The text has a raised appearance with a perspective effect, adding depth and dimensionality.
5. perspectiveInset: Text appears pressed into the background with a perspective effect, providing a unique three-dimensional look.
6. perspectiveLeft: Text slants to the left in perspective, creating a visually interesting slanted effect.
7. perspectiveRight: Text slants to the right in perspective give the text a dynamic slanted appearance.

Step-by-Step Implementation

Step 1: Set Up a Flutter Project

Create a new Flutter project using the following command in your terminal or command prompt:

flutter create 3d_text_app

Navigate to the project directory:

cd 3d_text_app

Step 2: Add Dependencies

For creating 3D text, we’ll use the ‘flutter_3d_text’ package. Open your pubspec.yaml file and add the following dependency:

dependencies:
  flutter:
    sdk: flutter
  flutter_3d_text: ^latest_version

Save the file and run flutter pub get in your terminal to install the package.

Step 3: Import dependencies

Now, open your main.dart file and import the necessary libraries:

Dart

import 'package:flutter_3d_text/flutter_3d_text.dart';

Step 4: Widget Declaration

In this step, a StatefulWidget named MyHomePage is declared. It takes a required title parameter for the page title.

Dart

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

Step 5: State Initialization

In this step, the state class _MyHomePageState is defined. It extends State<MyHomePage> and mixes in TickerProviderStateMixin for animation. An AnimationController named _controller is created with a duration of 3 seconds and is set to repeat. An animation object _animation is defined using the _controller with a CurvedAnimation for a smoother animation curve.

Dart

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
  late final AnimationController _controller = AnimationController(
    duration: const Duration(seconds: 3),
    vsync: this,
  )..repeat();
  late final Animation<double> _animation = CurvedAnimation(
    parent: _controller,
    curve: Curves.fastOutSlowIn,
  );
}

Step 6: Dispose Method

The dispose method is overridden to dispose of the animation controller when the widget is removed from the tree, preventing memory leaks.

Dart

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

Step 7: Widget Building

The build method defines the widget structure. It creates a Scaffold with an AppBar and a Center widget containing a Column of animated ThreeDText widgets.

Dart

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      backgroundColor: Theme.of(context).colorScheme.inversePrimary,
      title: Text(
        widget.title,
        style: const TextStyle(color: Colors.white),
      ),
      centerTitle: true,
    ),
    body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          // Animated ThreeDText Widget Examples
          // ... (Widget tree continues)
        ],
      ),
    ),
  );
}

Step 8: ThreeDText Widget Implementation

Example of perspectiveRaised text:

Dart

ThreeDText(
                text: 'perspectiveRaised',
                textStyle: TextStyle(fontSize: 40, color: Colors.green),
                depth: 10,
                style: ThreeDStyle.perspectiveRaised,
                perspectiveDepth: 40,
              ),

Example of perspectiveRight and perspectiveLeft:

Dart

ThreeDText(
              text: 'perspectiveRight',
              textStyle: TextStyle(fontSize: 25, color: Colors.yellow),
              style: ThreeDStyle.perspectiveLeft,
              perspectiveDepth: 40.0,
            ),
            SizedBox(
              height: 30,
            ),
            ThreeDText(
                text: 'perspectiveLeft',
                textStyle: const TextStyle(
                    fontSize: 25,
                    color: Colors.pinkAccent,
                    fontWeight: FontWeight.bold),
                depth: 6,
                style: ThreeDStyle.perspectiveLeft,
                perspectiveDepth: -35.0),

Example of inset and standard type:

Dart

SizeTransition(
            sizeFactor: _animation,
            axis: Axis.horizontal,
            axisAlignment: -1,
            child: ThreeDText(
              text: "inset",
              textStyle: TextStyle(
                fontSize: 64,
                color: Colors.red,
              ),
              style: ThreeDStyle.inset,
            ),
          ),
          SizedBox(
            height: 30,
          ),

           SizeTransition(
            sizeFactor: _animation,
            axis: Axis.horizontal,
            axisAlignment: 2,
            child:  ThreeDText(
            text: 'standard',
            textStyle: TextStyle(fontSize: 40, color: Colors.blue),
            depth: 7,
            style: ThreeDStyle.standard,
          ),
          ),

Full Source Code

Dart

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.green),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: '3D Texts in Flutter'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
  late final AnimationController _controller = AnimationController(
    duration: const Duration(seconds: 3),
    vsync: this,
  )..repeat();
  late final Animation<double> _animation = CurvedAnimation(
    parent: _controller,
    curve: Curves.fastOutSlowIn,
  );


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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title,style: const TextStyle(color: Colors.white),
        ),
        centerTitle: true,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            SizeTransition(
              sizeFactor: _animation,
              axis: Axis.horizontal,
              axisAlignment: -1,
              child: ThreeDText(
                text: 'perspectiveRaised',
                textStyle: TextStyle(fontSize: 40, color: Colors.green),
                depth: 10,
                style: ThreeDStyle.perspectiveRaised,
                perspectiveDepth: 40,
              ),
            ),
            SizedBox(
              height: 30,
            ),
            ThreeDText(
              text: 'perspectiveRight',
              textStyle: TextStyle(fontSize: 25, color: Colors.yellow),
              style: ThreeDStyle.perspectiveLeft,
              perspectiveDepth: 40.0,
            ),
            SizedBox(
              height: 30,
            ),
            ThreeDText(
                text: 'perspectiveLeft',
                textStyle: const TextStyle(
                    fontSize: 25,
                    color: Colors.pinkAccent,
                    fontWeight: FontWeight.bold),
                depth: 6,
                style: ThreeDStyle.perspectiveLeft,
                perspectiveDepth: -35.0),
            SizedBox(
              height: 30,
            ),
            SizeTransition(
              sizeFactor: _animation,
              axis: Axis.horizontal,
              axisAlignment: -1,
              child: ThreeDText(
                text: "inset",
                textStyle: TextStyle(
                  fontSize: 64,
                  color: Colors.red,
                ),
                style: ThreeDStyle.inset,
              ),
            ),
            SizedBox(
              height: 30,
            ),

             SizeTransition(
              sizeFactor: _animation,
              axis: Axis.horizontal,
              axisAlignment: 2,
              child:  ThreeDText(
              text: 'standard',
              textStyle: TextStyle(fontSize: 40, color: Colors.blue),
              depth: 7,
              style: ThreeDStyle.standard,
            ),
            ),
          ],
        ),
      ),
    );
  }
}

Run Flutter App

Save the changes and run your Flutter app using the following command:

flutter run