How to add Shadow to Text in Flutter

Adding shadows to different UI components can make your app’s UI more beautiful and more appealing. In this Flutter tutorial, let’s learn how to apply shadow to Text easily.

You can style the Text widget using the TextStyle class. The TextStyle has shadows property that allows to add shadows to the text. See the following code snippet.

Text('Text with shadow!',
            style: TextStyle(
              fontSize: 40,
              color: Colors.red,
              shadows: [
                Shadow(
                  blurRadius: 5.0,
                  color: Colors.grey,
                  offset: Offset(3.0, 3.0),
                ),
              ],
            )),

As you see, you can adjust the blur radius, color and offset of the shadow. The output is given below.

Following is the complete code.

import 'package:flutter/material.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(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Text Shadow Example'),
      ),
      body: const Center(
        child: Text('Text with shadow!',
            style: TextStyle(
              fontSize: 40,
              color: Colors.red,
              shadows: [
                Shadow(
                  blurRadius: 5.0,
                  color: Colors.grey,
                  offset: Offset(3.0, 3.0),
                ),
              ],
            )),
      ),
    );
  }
}

That’s how you show Text with shadow in Flutter.