Using AppBarTheme causes default text size? - flutter

Question

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'),
),
);
}
}

Answer 1

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.

Answer 2

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'),
),
);
}
}

Answer 3

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'),
),
);
}

Answer 4

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());
}