Flutter - Using DefaultTextStyle Examples

This tutorial shows you how to use DefaultTextStyle widget in Flutter.

For each Text widget, Flutter allows you to define a different TextStyle. What if you want to apply the same style for multiple widgets. It can be done easily using DefaultTextStyle.

DefaultTextStyle is used to apply a default text style to its descendant widgets. Therefore, the DefaultTextStyle widget must be the ascendant of the widgets where the styles would be applied. But it doesn't mean a Text widget must follow the default style. It's still possible for a widget to have its own style.

Code Examples

Let's take a look at the below example.

  import 'package:flutter/material.dart';
  import 'package:flutter/rendering.dart';
  
  void main() => runApp(MyApp());
  
  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Welcome to Flutter',
        home: MyAppHome(),
        theme: ThemeData(textTheme: TextTheme(body1: TextStyle(fontSize: 20.0)),),
      );
    }
  }
  
  class MyAppHome extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text('Flutter DefaultTextStyle Tutorial by Woolha.com'),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            DefaultTextStyle(
              style: TextStyle(fontSize: 36, color: Colors.blue),
              child: Center(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    const Text(
                      'The first text',
                    ),
                    const Text(
                      'The second text',
                      style: TextStyle(fontSize: 24),
                    ),
                    const Text(
                      'The third text',
                      style: TextStyle(color: Colors.red),
                    ),
                  ],
                ),
              ),
            ),
            const Text(
              'The fourth text',
            ),
          ],
        )
      );
    }
  }
  

First, we define a DefaultTextStyle with a font size of 36 and blue as the font color. There are three Text widgets under it. The first one doesn't have its own style, so it uses the default style. The second one has its own style, but it only overrides the font size. Therefore, it still uses blue as the color, but with different font size. The third font overrides the color only, so it still uses the default size.

There is also a fourth Text widget, but it's outside DefaultTextStyle, so it's not affected by the default style.

Output:

What if there is another DefaultTextStyle widget under the outer one. To know what will happen, change the body of the above code into this.

  body: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      DefaultTextStyle(
        style: TextStyle(fontSize: 36, color: Colors.blue),
        child: DefaultTextStyle(
          style: TextStyle(color: Colors.green),
          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                const Text(
                  'The first text',
                ),
                const Text(
                  'The second text',
                  style: TextStyle(fontSize: 24),
                ),
                const Text(
                  'The third text',
                  style: TextStyle(color: Colors.red),
                ),
              ],
            ),
          ),
        ),
      ),
      const Text(
        'The fourth text',
      ),
    ],
  ),

You'll find that the widgets use the nearest (the most specific) one. But the inner DefaultTextStyle stands as a completely new style, not inheriting the values from its ascendant widget of the same type.

Output:

DefaultTextStyle Properties

Not only TextSyle that you can define, there are also some other properties that can be set as the default for its descendants. Below are the available properties you can pass in the constructor.

• Key key: The widget key, used to control if it's should be replaced.
• TextsStyle style*: Default TextStyle for its descendants.
• TextAlign textAlign: How the text should be aligned.
• boolean softWrap: Whether the text should break at soft line breaks.
• Overflow overflow: How visual overflow should be handled.
• int maxLines: maximum number of lines for the text.
• TextWidthBasis textWidthBasis: The strategy to use for calculating the width of the Text.

*: required

For font family, you can also set it as the theme's default. Read our tutorial about font family which includes how to use custom font families on your application.