CODEWITHSUNDEEP
flutter
Joimee Cajandab
Joimee Cajandab

Reputation: 315

Override flutter textTheme

Is there a way to extend the styles of the Theme.of(context).textTheme.bodyText2 in specific cases like this?

I would like to add color to the AppBar text while using the bodyText2 theme

Sample Code:

main.dart

void main() {
  // =========================================================================
  // THEME COLORS
  // =========================================================================

  final primary = Color(0xff222222);
  final dimmed = Color(0xff838383);

  // =========================================================================
  // ENTRY POINT
  // =========================================================================

  runApp(MaterialApp(
    debugShowCheckedModeBanner: false,
    theme: ThemeData(
      fontFamily: 'Avenir',
      textTheme: TextTheme(
        bodyText1: TextStyle(
          fontFamily: 'Avenir',
          fontSize: 16,
        ),
        bodyText2: TextStyle(
          fontFamily: 'Avenir',
          fontWeight: FontWeight.w700,
          fontSize: 16,
        ),
      ),
      primaryColor: primary,
      accentColor: dimmed,
    ),
    home: App(),
  ));
}

IsaAppBar.dart

// =========================================================================
// IsaAppBar State
// =========================================================================
class _IsaAppBarState extends State<IsaAppBar> {
  String get title => widget.title;

  @override
  Widget build(BuildContext context) {
    return AppBar(
        backgroundColor: Theme.of(context).primaryColor,
        title: Align(
            alignment: Alignment.topLeft,
            child: Text('ISA', style: Theme.of(context).textTheme.bodyText2)));
  }
}

Upvotes: 2

Views: 2990

Answers (1)

ByteMe
ByteMe

Reputation: 1670

You can achieve this with the .copyWith() method

return AppBar(
        backgroundColor: Theme.of(context).primaryColor,
        title: Align(
          alignment: Alignment.topLeft,
          child: Text('ISA',
              style: Theme.of(context)
                  .textTheme
                  .bodyText2
                  .copyWith(color: Colors.black)),
        ),
      );

Upvotes: 4

Related Questions