Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to add shadows to Text in Flutter

How to add shadows to text.

Under the TextStyle there is a shadows property also.

It will be helpful if you can include example for its implementation

like image 637
Mangaldeep Pannu Avatar asked Dec 13 '22 12:12

Mangaldeep Pannu


2 Answers

Here is a simple example, borrowed from here:

Text(
  'Hello, world!',
  style: TextStyle(
    shadows: <Shadow>[
      Shadow(
        offset: Offset(10.0, 10.0),
        blurRadius: 3.0,
        color: Color.fromARGB(255, 0, 0, 0),
      ),
      Shadow(
        offset: Offset(10.0, 10.0),
        blurRadius: 8.0,
        color: Color.fromARGB(125, 0, 0, 255),
      ),
    ],
  ),
),
like image 123
Harsh Bhikadia Avatar answered Jan 26 '23 02:01

Harsh Bhikadia


I have added two simple Shadow to show the effect of Offset and blur effect

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: SO());
  }
}

class SO extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.deepOrange.shade400,
      appBar: AppBar(),
      body: Center(
        child: Text(
          "A  B  C",
          style: TextStyle(
              fontSize: 80,
              shadows: [Shadow(color: Colors.blue.shade100, offset: Offset(-10, -10)), Shadow(color: Colors.black, blurRadius: 8, offset: Offset(10, 10))]),
        ),
      ),
    );
  }
}

which gives

shadow sample

like image 26
Doc Avatar answered Jan 26 '23 02:01

Doc