Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Use of DefaultTextStyle in flutter

Tags:

flutter

I am trying to apply a DefaultTextStyle, but even though the style is defined and available (as established by calling DefaultTextStyle.of(context).style), it does not get applied by default to child Text objects. So what am I doing wrong, or failing to understand?

Here is the build method from my calling class, where I define my DefaultTextStyle:

  Widget build(BuildContext context) {
    return new MaterialApp(
      onGenerateTitle: (BuildContext context) =>
      Strings.of(context).getStr('app_title'),
      localizationsDelegates: [
        const StringsDelegate(),
        GlobalWidgetsLocalizations.delegate,
      ],
      localeResolutionCallback: Strings.resolveLocale,
      // Watch out: MaterialApp creates a Localizations widget
      // with the specified delegates. DemoLocalizations.of()
      // will only find the app's Localizations widget if its
      // context is a child of the app.
      theme: new ThemeData(
        primarySwatch: Colors.blue,
        ),
      home: new DefaultTextStyle(
        style: new TextStyle(
          fontWeight: FontWeight.bold,
          decoration: TextDecoration.underline,
          decorationColor: Colors.red,
          decorationStyle: TextDecorationStyle.wavy,
          color: Colors.blue
          ),
        child: new StatusPage())
      );
  }

And here is StatusPage, where I am trying to use the DefaultTextStyle:

class StatusPage extends MyStatelessWidget {
  @override
  Widget build(BuildContext context) {
    TextStyle style = DefaultTextStyle.of(context).style;
    print("STYLE: $style");
    return new Scaffold(
      appBar: new AppBar(
        title: getText(context, 'app_title')
      ),
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new Text('wibble', style:style),
            new ActivityStatus(),
            new MonitoringStatus()]
          )));
  }
}

With the code as shown, the Text "wibble" is correctly shown with the appropriate style. My understanding from the docs, is that this style should be applied by default, so I should not need the style argument to the Text constructor for "wibble".

However, if I remove the style argument I do not get the style from my DefaultTextStyle.

What am I missing?

like image 875
Marc Avatar asked Apr 12 '18 22:04

Marc


People also ask

How to apply the same text style for multiple widgets 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.

What is the defaulttextstyle widget used for?

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.

Is it possible to set a default text style in textsyle?

But the inner DefaultTextStyle stands as a completely new style, not inheriting the values from its ascendant widget of the same type. Not only TextSyle that you can define, there are also some other properties that can be set as the default for its descendants.

How to add custom font in Flutter App?

You can use TextStyle widget to show any custom font in your flutter application. You can also use google fonts in your application if you want. You can also refer this flutter fonts tutorial.


1 Answers

I had same issue before, I think it comes when using custome fonts or changing language (at least that was my case) the solution for me was to go MaterialApp widget and then override ALL textTheme attributes like this:

fontFamily: "STCBold",
              textTheme: GoogleFonts.cairoTextTheme(textTheme).copyWith(
                  headline1: TextStyle(height: 1),
                  headline2: TextStyle(height: 1),
                  headline3: TextStyle(height: 1),
                  headline4: TextStyle(height: 1),
                  headline5: TextStyle(height: 1),
                  headline6: TextStyle(height: 1),
                  subtitle1: TextStyle(height: 1),
                  subtitle2: TextStyle(height: 1),
                  bodyText1: TextStyle(height: 1),
                  bodyText2: TextStyle(height: 1),
                  caption: TextStyle(height: 1),
                  button: TextStyle(height: 1),
                  overline: TextStyle(height: 1),
              ),

this will make all text themes have no extra padding thus all texts will be tight. but make sure to use style: Theme.of(context).textTheme.WHATEVERTEXT. in all your code

like image 159
abdullah Avatar answered Oct 15 '22 05:10

abdullah