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
- standard: Basic 3D effect where the text has a subtle depth.
- raised: The text appears elevated from the background, creating a raised effect.
- inset: Text is designed to appear pressed into the background, giving a subtle engraved look.
- perspectiveRaised: The text has a raised appearance with a perspective effect, adding depth and dimensionality.
- perspectiveInset: Text appears pressed into the background with a perspective effect, providing a unique three-dimensional look.
- perspectiveLeft: Text slants to the left in perspective, creating a visually interesting slanted effect.
- 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
Contact Us