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
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.