Text widget supports Text Styling which supports color property. We can pass here color code in different formats like Hex Colo code, Inbuilt color constants and RGB color codes. So in this tutorial we would create a flutter application and Set Text Color in Flutter iOS Android Example Tutorial.
Contents in this project Set Text Color in Flutter iOS Android Example:
1. Import material.dart package in your app’s main.dart file.
|
1 |
import 'package:flutter/material.dart'; |
2. Call our main MyApp widget class using void main runApp() function.
|
1 |
void main() => runApp(MyApp()); |
3. Create MyApp class extends with StatelessWidget.
|
1 2 3 4 |
class MyApp extends StatelessWidget { } |
4. Create Widget Build method in MyApp class with Scaffold default layout widget.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: SafeArea( child: ) ) ); } } |
5. Crete Center widget -> Column widget in SafeArea widget. Column widget supports multiple children.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: SafeArea( child: Center( child: Column( children: [ ] ) ) ) ) ); } } |
6. Create 3 Text widget in Column widget with text style color.
- Color(0xffFF1744) : Here 0xff + Hex color code.
- Colors.green : Inbuilt color constants.
- Color.fromARGB(255, 66, 165, 245) : ARGB color code.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
Text( 'Change Text Color in Flutter', style: TextStyle(fontSize: 25, color: Color(0xffFF1744)), ), Text( 'Change Text Color in Flutter', style: TextStyle(fontSize: 25, color: Colors.green), ), Text( 'Change Text Color in Flutter', style: TextStyle(fontSize: 25, color: Color.fromARGB(255, 66, 165, 245)), ), |
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 25 26 27 28 29 30 31 32 33 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: SafeArea( child: Center( child: Column( children: [ Text( 'Change Text Color in Flutter', style: TextStyle(fontSize: 25, color: Color(0xffFF1744)), ), Text( 'Change Text Color in Flutter', style: TextStyle(fontSize: 25, color: Colors.green), ), Text( 'Change Text Color in Flutter', style: TextStyle(fontSize: 25, color: Color.fromARGB(255, 66, 165, 245)), ), ] ) ) ) ) ); } } |
Screenshot:
