CODEWITHSUNDEEP
flutterdart
Lucas
Lucas

Reputation: 2842

Using AppBarTheme causes default text size?

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

Upvotes: 5

Views: 9242

Answers (4)

Erkan
Erkan

Reputation: 766

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

Upvotes: 1

Pablo Barrera
Pablo Barrera

Reputation: 10963

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

Upvotes: 1

Lucas
Lucas

Reputation: 2842

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

Upvotes: 1

Dan
Dan

Reputation: 81

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.

Upvotes: 7

Related Questions