Search code examples
flutterdarttextappbar

Flutter: How do you change the AppBar Title font?


Here's my first flutter app... Just learning and messing around a bit. I'm trying to figure out how to change the text of the title within the AppBar. Note that the text in the body changes, but the text in the app bar does not. Am I totally wrong here? I used this method based on other public questions on stack overflow on this topic. No luck on my end.

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
  home: Scaffold(
    appBar: AppBar(
      title: Text('My First App', style: TextStyle(fontFamily: 'Audowide'),),
      centerTitle: true,
      backgroundColor: Colors.cyan[700],
      brightness: Brightness.dark,
    ),
    body: Center(
      child: Text("Body Text!",
        style: TextStyle(
          fontSize: 20.0,
          fontWeight: FontWeight.bold,
          fontFamily: 'Audiowide',
          letterSpacing: 2.0,
          color: Colors.grey[500],
        ),
      ),
    ),
    floatingActionButton: FloatingActionButton(
      onPressed: () {}, // for later use
      backgroundColor: Colors.cyan[700],
      child: Text("Press"),
    ),
  ),
));

Solution

  • Step 1: Fix typo in your code change Audowide to Audiowide
    Step 2: Download https://fonts.google.com/specimen/Audiowide
    Step 3: Put file in directory assets/fonts
    Step 4: In pubspec.yaml

    fonts:
      - family: Audiowide
        fonts:
          - asset: assets/fonts/Audiowide-Regular.ttf
    

    enter image description here

    working demo

    enter image description here