App bar title text is by default shows in plain white color. But sometimes app developer wants to Change App Bar Title Text Color in Flutter mobile application. We can easily set App bar title text color using Text style Color. App bar supports Text widget which can support all the text styling options including Color.
Contents in this project Change App Bar Title Text Color in Flutter iOS Android:
1. Import material.dart package in your app’s main.dart file.
|
1 |
import 'package:flutter/material.dart'; |
2. Call our main MyApp class using void main runApp() method.
|
1 |
void main() => runApp(MyApp()); |
3. Create our main class named as MyApp extends with States less widget.
|
1 2 3 4 |
class MyApp extends StatelessWidget { } |
4. Create Scaffold widget in Widget build area in MyApp.
|
1 2 3 4 5 6 7 8 9 10 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( ) ); } } |
5. Creating App bar in Scaffold widget with Text widget and set Text color using color property. We are setting color using HEX color code and the FFFFFF means pure white.
- title : Used to set Title text in App bar.
- color : Used to set Color of text widget.
- backgroundColor : Used to set background color of App bar.
|
1 2 3 4 5 6 |
appBar: AppBar( title: Text('Set App Bar Title Text Color', style: TextStyle(color: Color(0xffFFFFFF)), ), backgroundColor: Color(0xFF2E7D32), ), |
6. Creating Center widget with some text in body area of Scaffold widget.
|
1 2 3 4 5 |
Center( child: Text('Set App Bar Title Text Color', style: TextStyle(fontSize: 24),) ) |
7. Complete source code for main.dart file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Set App Bar Title Text Color', style: TextStyle(color: Color(0xffFFFFFF)), ), backgroundColor: Color(0xFF2E7D32), ), body: Center( child: Text('Set App Bar Title Text Color', style: TextStyle(fontSize: 24),) ) ) ); } } |
Screenshot:
