Flutter – Text Shadow with Example

Text Shadow is the shadow of a text that makes the text beautiful. We can make text bold, Italic, and headings but also we can give text shadow to make it beautiful. This going to be pretty simple, Follow the following simple steps to make a shadow of the text. We need to write a simple text that has a shadow with the blur and effect offset with color that appears in the center of the body or anywhere you want to use. A sample image is given below to get an idea about what we are going to do in this article.

How to use it?

Code:

Text(
  'Text_Needed_To_Show',  
   style:TextStyle (
       shadows: [
            Shadow(
                 blurRadius:10.0,  // shadow blur
                  color: Colors.orange, // shadow color
                  offset: Offset(2.0,2.0), // how much shadow will be shown
            ),
        ],
    ),
)

Step by Step Implementation

Step 1: Create a New Project in Android Studio

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.

Step 2: Add the material package that gives us the important functions and call the runApp method in the main function that will call our application. 

Dart

import 'package:flutter/material.dart';

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

Step 3: Now we have to make a stateful widget TextShadow Because our application does not go to change its state and then return the materialApp widget which allows us the set the title and theme and many more.

Dart

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(

    );
  }
}

Step 4: Give the home property and there can be a scaffold widget that has the property of AppBar and body. Body can have the centered text and then give the shadow to the text using style. AppBar allows us to give the title of AppBar , color, leading, and trailing icon.

Dart

home: Scaffold(
          // appbar allow us
          // set the title
        appBar: AppBar(
          title: Text("Text Shadow"),
        ),
        body: Center(
          child: Text(
            "GeeksforGeeks",
            // applying shadow to the text
            style: TextStyle(shadows: [
              Shadow(
                blurRadius: 10.0,
                // color of the shadow
                color: Colors.teal,
                offset: Offset(5, 5),
              ),
              // color and font size of the text
            ], fontSize: 50, color: Colors.green),
          ),
        ),
      ),

We have done, Now run the Application on your device. 

Code Example:

Dart

import 'package:flutter/material.dart';

void main() {
  // runApp calls the
  // textShadow class
  runApp(TextShadow());
}

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

  @override
  Widget build(BuildContext context) {
    // materialApp with
    // debugshowcheckedmodebanner false
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text("Text Shadow"),
        ),
        body: Center(
          child: Text(
            "GeeksforGeeks",
            // styling the text by shadow
            style: TextStyle(shadows: [
              Shadow(
                blurRadius: 10.0,
                color: Colors.teal,
                offset: Offset(5, 5),
              ),
               // font size and color of the text
            ], fontSize: 50, color: Colors.green),
          ),
        ),
      ),
    );
  }
}

Output:

Code Explanation:

–  main is a principal method called once the program is loaded.  
–  Once the Program Is Loaded runApp Will Run And Call The  Class That We Created (RunAppClass).  
–  This  Class Is  StatelessWidget Because No Change to Do. 
–  This Class Is Taking MaterialApp Only.  
–  Flutter is Based On  Widget So A  Widget must be Built.  
–  Creating  MaterialApp (Placed One Time In The Whole Project) That Defines Application Settings (debugShowCheckedModeBanner, title … ).
–  Home Is Taking  Class TextShadow.  
–  Creating Class TextShadow.  
–  This Class Has a Constructor That Is Obtaining A Key Of The Class RunAppClass. 
–  This Class Is Stateless Widget As We Just Need To Display Text (There Is No Page Change After Display).  
–  Flutter Is Based On Widgets So We Need To Build Widgets.  
–  Returning Scaffold That Allows Us To Set Body and AppBar Of The Page.  
–  AppBar Is Taking AppBar That Is Taking Only Text as a Title.  
–  As We Need The Text Centered We Put Center Layout.  
–  Now We Need To Create Text That Takes a Value To Be Shown.  
–  The Text is An Child Of His Parent Center.   
–  Setting Shadows Of The Text Needs shadows.  
–  Shadow Can be Set using Shadow And Each Shadow Is Taking: blurRadius, color, offset