Flutter Add Drop Shadow Effect on Text

Shadow effects are very common among developers and one of them is Drop shadow effect. In flutter we have a Shadow widget with 3 different arguments to add drop shadow effect on text. This widget applies inside Text Style. We will be discussing all shadow widget arguments below.

Shadow widget syntax:

 Shadow(
          offset,
          blurRadius,
          color,
     )

Properties of Shadow Widget:

1. offset: We have to pass Offset(double dx, double dy). Here dx means shadow effect on horizontal area and dy means shadow effect on vertical effect.
2. blurRadius: To apply Gaussian blur effect on text.
3. color: Shadow color in which the shadow draw.

Flutter Add Drop Shadow Effect on Text:

1. Defining a Text widget with shadow effect applied on it.

Text(
        'Demo Text',
        style: TextStyle(fontSize: 58, color: Colors.cyan, shadows: [
          Shadow(
            offset: Offset(5.0, 2.0),
            blurRadius: 5.2,
            color: Colors.pink,
          ),
        ]),
      )

2. Source code for main.dart file:

import 'package:flutter/material.dart';

void main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
          body: Center(
              child: Text(
        'Demo Text',
        style: TextStyle(fontSize: 58, color: Colors.cyan, shadows: [
          Shadow(
            offset: Offset(5.0, 2.0),
            blurRadius: 5.2,
            color: Colors.pink,
          ),
        ]),
      ))),
    );
  }
}

Screenshot of app: