Using AppBarTheme causes default text size?

user_6115336 0
Viewed 5426

I'm trying to acheive transparent appbars everywhere in my app using AppBarTheme in my MaterialApp's theme. But it's causing the text size to be the default of 14.0 instead of title size.

I guess it's something to do with TextStyle inheritance, but I don't know much about that.

Example code:

class ExampleScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    ThemeData theme = ThemeData();
    return MaterialApp(
      theme: theme.copyWith(
        appBarTheme: AppBarTheme(
          color: Colors.transparent,
          brightness: Brightness.light,
          elevation: 0,
          //I want the defaults, which is why I'm copying an 'empty' ThemeData
          //perhaps there's a better way to do this?
          textTheme: theme.textTheme,
          iconTheme: theme.iconTheme,
        ),
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('AppBar!'),
        ),
        body: Text('Some text'),
      ),
    );
  }
}
dart flutter
4 Answers

This can be achieved by specifying the textTheme inside of the AppBarTheme.

Indeed, the AppBarTheme() has a fully customisable parameter which takes a TextTheme. You almost had it in your question.

Try: 

  class ExampleScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    ThemeData theme = ThemeData();
    return MaterialApp(
      theme: theme.copyWith(
        appBarTheme: AppBarTheme(
          color: Colors.transparent,
          brightness: Brightness.light,
          elevation: 0,
          //I want the defaults, which is why I'm copying an 'empty' ThemeData
          //perhaps there's a better way to do this?
          textTheme: theme.textTheme.copyWith(
            title: theme.textTheme.title.copyWith(fontSize: 20.0),
          ),
          iconTheme: theme.iconTheme,
        ),
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('AppBar!'),
        ),
        body: Text('Some text'),
      ),
    );
  }
}

The textTheme has a title parameter inside of which you can set the fontSize. The default fontSize for titles is 20.0.

Notice the lines: 

textTheme: theme.textTheme.copyWith(
                title: theme.textTheme.title.copyWith(fontSize: 20.0),
              ),

You can read more about the TextTheme class here

Each of the parameters is customisable which shows the power of Flutter.

user_121079330

Used the workaround from https://github.com/flutter/flutter/issues/38716

class ExampleScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    ThemeData theme = ThemeData();
    var localizedTheme = ThemeData.localize(theme, theme.typography.geometryThemeFor(ScriptCategory.englishLike));
    theme = theme.copyWith(
      appBarTheme: theme.appBarTheme.copyWith(
        color: Colors.transparent,
        brightness: Brightness.light,
        elevation: 0,
        textTheme: localizedTheme.textTheme,
      ),
    );
    return MaterialApp(
      theme: theme,
      home: Scaffold(
        appBar: AppBar(
          title: Text('AppBar!'),
        ),
        body: Text('Some text'),
      ),
    );
  }
}
user_61153360

You could use Theme.of(context) like this:

@override
Widget build(BuildContext context) {
  return MaterialApp(
    theme: Theme.of(context).copyWith(
      appBarTheme: AppBarTheme(
        color: Colors.transparent,
        brightness: Brightness.light,
        elevation: 0,
        textTheme: Theme.of(context).textTheme,
        iconTheme: Theme.of(context).iconTheme,
      ),
    ),
    home: Scaffold(
      appBar: AppBar(
        title: Text('AppBar!'),
      ),
      body: Text('Some text'),
    ),
  );
}
user_119384620

I found a solution. MaterialApp->builder function.

https://api.flutter.dev/flutter/material/MaterialApp/builder.html

  Widget build(BuildContext context) {
    return MaterialApp(
        builder: (context, widget) {
          var baseTheme = Theme.of(context);
          return Theme(
              data: baseTheme.copyWith(
                appBarTheme: AppBarTheme(color: Colors.transparent),
              ),
              child: widget);
        },
        home: HomeView());
  }
user_9934340
Related