How to change Flutter App Bar Title Text Color?

Flutter App Bar Title Text Color

To change text color of Flutter App Bar, you can use TextStyle for the title property of AppBar class.

A sample code snippet to change the title text color of app bar is given below.

appBar: AppBar(
  title: Text(
    'Flutter Tutorial - googleflutter.com',
    style: TextStyle(color: Color(0xffffffaa)),
  ),
),

As we are giving Text widget for the text of Application Bar, we can change the color of text of AppBar by setting the color for Text widget.

Example 1: Change Text Color for Flutter AppBar Title

Create a basic Flutter application, and replace the code in main.dart with the following code.

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: 'Flutter Tutorial',
    home: MyApp(),
    debugShowCheckedModeBanner: false,
  ));
}

class MyApp extends StatefulWidget {
  @override
  _State createState() => _State();
}

class _State extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Color(0xaaffffff),
        title: Text(
          'Flutter Tutorial - googleflutter.com',
          style: TextStyle(color: Color(0xff238c00)),
        ),
      ),
      body: Container(),
    );
  }
}

Run this Flutter Application in Android or Apple mobile phone. You should see a screenshot as shown below.

Screenshot

Change Flutter App Bar Title Text Color

Summary

In this Flutter Tutorial, we learned how to change the text color of Title in App Bar.

Desclaimer: We are not affiliated, associated, authorized, endorsed by, or in any way officially connected with the Google, Apple or Flutter, or any of its subsidiaries or its affiliates. The names Google, Apple and Flutter as well as related names, marks, emblems and images are registered trademarks of their respective owners. This site googleflutter.com covers tutorials related to Flutter developed by Google.