CODEWITHSUNDEEP
flutterdart
Steev James
Steev James

Reputation: 2654

How to set color of all text in a specific container in flutter?

I don't want to change the text color of the whole app. Just all the text inside a container. Can I wrap it with some other widget or something for this ?

Upvotes: 17

Views: 18523

Answers (5)

DAG
DAG

Reputation: 6994

To apply certain TextStyle properties only to a subtree of your app. You can use DefaultTextStyle

DefaultTextStyle(
  child: Container(child: /* your subtree */),
  style: TextStyle(color: Colors.red),
),

as a comment pointed out, this replaces all defaults, not just the color. This can be mitigated by using the merge constructor:

DefaultTextStyle.merge(
  child: Container(child: /* your subtree */),
  style: TextStyle(color: Colors.red),
),

Upvotes: 51

Travis Reeder
Travis Reeder

Reputation: 41093

Use DefaultTextStyle.merge to keep your theme and just change the color.

    DefaultTextStyle.merge(
        style: TextStyle(color: Colors.grey[400]),
        child: Column(...),
    )

Upvotes: 4

Tokenyet
Tokenyet

Reputation: 4281

flutter's answer is good in my opinion. But the power of ThemeData is more than you think. Here is the official documentation about Themes for part of an application.

You could provide a Theme to wrap your container to provide a new theme. Here is two way to slove it:

1. Creating unique ThemeData

/*Not recommended, this could make a totally different If you just want a little part changed.*/
Theme(
  // Create a unique theme with "ThemeData"
  data: ThemeData(
    textTheme: /* Your Text Theme*/,
  ),
  child: Container(
    onPressed: () {},
    child: Text("Your Text Here"),
  ),
);

2. Extending the parent theme

Theme(
  // Find and extend the parent theme using "copyWith". See the next
  // section for more info on `Theme.of`.
  data: Theme.of(context).copyWith(textTheme: /* Provide your theme here! */),
  child: Container(
    child: Text("your text here"),
  ),
);

You could also use existed theme with a little changed:

Theme.of(context).textTheme.copyWith(
  body1: Theme.of(context).textTheme.body1.copyWith(color: Colors.red),
)

Upvotes: 10

Atree Leaf
Atree Leaf

Reputation: 83

I have functions for all my styles

TextStyle largeTextStyle() => TextStyle(fontSize: 150);

then I just do 

Text("blah", style:largeTextStyle())

Upvotes: -4

flutter
flutter

Reputation: 6766

If you are using the MaterialApp widget you could use the theme property of it and set different Text themes and call them anywhere in your app. For example the following code defines 3 different text themes:

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Time Tracker",
      theme: ThemeData(
        textTheme: TextTheme(
          headline: TextStyle(fontSize: 72.0, fontWeight: FontWeight.bold,color: Colors.blue),
          title: TextStyle(fontSize: 36.0, fontStyle: FontStyle.italic,color: Colors.red),
          body1: TextStyle(fontSize: 14.0, fontFamily: 'Hind',color: Colors.yellow),
        ),
      ),
      home: LandingPage(),
    );
  }
}

You can then call a particular theme(headline) anywhere in your app like this:

Text('Home Page',style: Theme.of(context).textTheme.headline,)

Which gives you the headline TextTheme

Upvotes: 1

Related Questions