Set Color to Text Widget in App universally in flutter without mentioning the theme inside the Widget everytime

Question

I am new to flutter and trying out things.

I replaced the Scaffold Widget with a Center Widget (Just messing around). All text had a Yellow underline, to overcome this I used TextDecoration

Text(
    friend.name,
    style: TextStyle(
        decoration: TextDecoration.none
    ),
));

But this was required for all Text widget hence I tried to set it universally for all Text widgets by setting Theme data in the root MaterialApp.

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp( 
      title: 'Friends List',
      theme: ThemeData(
        primaryColor: Colors.black,
        primarySwatch: Colors.teal,
        primaryTextTheme: TextTheme(
          headline1: TextStyle(color: Colors.green, decoration: TextDecoration.none),
         headline2: TextStyle(color: Colors.green, decoration: TextDecoration.none),
         headline3: TextStyle(color: Colors.green, decoration: TextDecoration.none),
         headline4: TextStyle(color: Colors.green, decoration: TextDecoration.none),
         headline5: TextStyle(color: Colors.green, decoration: TextDecoration.none),
         headline6: TextStyle(color: Colors.green, decoration: TextDecoration.none),
         bodyText1: TextStyle(color: Colors.green, decoration: TextDecoration.none),
         bodyText2: TextStyle(color: Colors.green, decoration: TextDecoration.none),
        ),
        textTheme: TextTheme(
         headline1: TextStyle(decoration: TextDecoration.none),
         headline2: TextStyle(decoration: TextDecoration.none),
         headline3: TextStyle(decoration: TextDecoration.none),
         headline4: TextStyle(decoration: TextDecoration.none),
         headline5: TextStyle(decoration: TextDecoration.none),
         headline6: TextStyle(decoration: TextDecoration.none),
         bodyText1: TextStyle(decoration: TextDecoration.none),
         bodyText2: TextStyle(decoration: TextDecoration.none)
        ),
        ),
      home: MyHomePage(title: 'Friends list'),
    );
  }
}

But the Text widget still as the underline. What I'm trying is similar to setting a style to a tag in css not having to set it every time.

p
{
    universal style here
}

Am I doing anything wrong? Is there a similar support in flutter. Please correct me if I'm wring

Maybe this will help in your case: https://stackoverflow.com/q/47114639/4934409 — Scriptim, Feb 26 '20 at 11:50
why dont you create your own Text class, I suppose its easier — Henok, Feb 26 '20 at 11:51
Yes it would be easier. but i was just curious if such feature exists in flutter — Nikhileshwar, Feb 26 '20 at 12:30
The answers there solved my problem @Scriptim but I wanted something like Setting the Style globally for every Text Widget without having to alter each Widget. — Nikhileshwar, Feb 26 '20 at 13:02

Darish · Accepted Answer · 2020-02-26T12:43:56.830

Don't use static constants for global styling. Do it in the flutter way by using InheritedWidgets. That way you can easily override the Default style for a particular branch of the tree if needed.

Well then, what to use for styling text widgets globally?

You need to define TextTheme for the ThemeData to style Text widgets globally. Additionally, use can use the DefaultTextStyle widget to theme a portion of the widget tree.

As per documentation,

The text style to apply to descendant Text widgets without explicit style.

Place it on the root of your widget tree.

Example:

DefaultTextStyle(
          style: TextStyle(fontSize: 36, color: Colors.blue),
         // child: other widgets
   )

Here is a complete working example that illustrate the following

Defines a default text style for all Text widgets

Override the default text style on a particular branch of the tree.

  import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: Colors.white),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        ///This style will be applied to all the TextWidgets below.
        body: DefaultTextStyle(
          style:
              Theme.of(context).textTheme.headline6.copyWith(color: Colors.red),
          child: Center(
            child: MyWidget(),
          ),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        ///This text will be in red color
        Text('Hello, World!'),
        DefaultTextStyle(
          style:
              DefaultTextStyle.of(context).style.copyWith(color: Colors.blue),

          ///We don't need to place Text widget as direct child of
          ///DefaultTextStyle. This is the proof.
          child: Container(
            ///Just another widget
            child: Container(
              ///This text will be in blue color
              child: Text('Hello, World!'),
            ),
          ),
        ),
        DefaultTextStyle(
          style:
              DefaultTextStyle.of(context).style.copyWith(color: Colors.green),

          ///This text will be in green color

          child: Text('Hello, World!'),
        ),
      ],
    );
  }
}

See the live demo here.

You can find a detailed answer here about colors and Theme.

Sorry I'm new to Flutter. Which Widget has the property `DefaultTextStyle`. I found it only in Text widget — Nikhileshwar, Feb 26 '20 at 12:06
DefaultTextStyle is a widget, not a property, Just wrap your Scaffold body with the DefaultTextStyle — Darish, Feb 26 '20 at 12:20
Exactly what I was looking for. Not having to alter every Text widget to apply a specific style. but this is only for Text Widgets right? Is there anything that I can use for all Widget styles? Just curious. — Nikhileshwar, Feb 26 '20 at 12:23
There is buttonTheme, textTheme.. etc attributes on the ThemeData class. You can define those values to style all widgets, say all buttons. :) Hope that helps. Feel free to accept the answer :) — Darish, Feb 26 '20 at 12:24
I did. ThemeData has to be specified in each Widget. Am I wrong here? I was looking for something like DefaultTextStyle in your answer. May be DefaultStyle :P. Just messing with flutter now — Nikhileshwar, Feb 26 '20 at 12:28
No, you can use the copyWith method. Wait 5 min, I will update a detailed example of DefaultTextStyle and how to use the copyWith method for the different part of the widget tree. Same way you can use the copy withe and Theme widget across your widget tree. — Darish, Feb 26 '20 at 12:30

score 1 · Answer 2 · answered Feb 26 '20 at 12:02

1

Create one class for All text style like this :

class AppTheme {

static final primaryFontFamily = "GT Walsheim";

static TextStyle homeScreenBoldStyle() {
    return TextStyle(
        fontFamily: AppTheme.primaryFontFamily,
        fontSize: 16,
        fontWeight: FontWeight.bold,
        color: Colors.white);
  }
}

and Call this class like this :

Text(trainingType.name,
                      style: AppTheme.homeScreenBoldStyle()),

answered Feb 26 '20 at 12:02

Aamil Silawat

7,735
3
19
37

1

Your answer works but but I have to alter every Text widget for it. I was looking for something like @Darish's answer. – Nikhileshwar Feb 26 '20 at 12:26

Set Color to Text Widget in App universally in flutter without mentioning the theme inside the Widget everytime

2 Answers2

Well then, what to use for styling text widgets globally?

Example: