How To Change Flutter Text Color-Example Code

Flutter text color

In this Flutter post, we will be changing Flutter text color using a super simple Flutter example code so you can have a practical knowledge of how to change Flutter text color in your own Flutter apps as well. A detailed step by step explanation will be provided. Let’s not put off any longer and begin customizing Flutter text color.

What is Flutter Text Color?

Flutter text color is the color of text in Flutter text widget. First we will see the default color of Flutter text and then practically change the color of Flutter text with an easy example. So let’s jump right into it.

Default Flutter Text Color

To see what the default color of Flutter text widget is, you have to implement a simple Flutter text widget with some text and that’s it. See the below code:

Text('This is the default text color')
Flutter text default color
The default Flutter text color is shown in the image given above. So now we both know what the default color of Flutter text widget is, let’s now see how to change that color.

Change Flutter Text Color

In order to change the color of Flutter text, you have to make use of the style constructor of Flutter text widget and pass it text style class, then by using the color constructor of that text style class, we can easily change the color of text. This color constructor takes a color so we have passed it a red color for demonstration. See the code given below:

Text(
       'This is the custom text color',
       style: TextStyle(color: Colors.red)
          )
Flutter text color
The Flutter text color is changed successfully and can be seen in the above image.
So in this way you can easily change the Flutter text color in your own Flutter app as well. If you still have any doubts then comment it down. I would love to clear all your doubts regarding Flutter text color customization.
In the below section, a complete source code is provided in which the above mentioned customized Flutter text color is available.

Flutter Text Color Customization Source Code

Flutter text color

import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Homepage(),
    );
  }
}
class Homepage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
            body: Center(
      child: Padding(
          padding: const EdgeInsets.all(15),
          child: Text(
            'This is the custom text color',
            style: TextStyle(color: Colors.red,
            ),
          )),
    )));
  }
}

Conclusion

To conclude, hope you now will easily change the Flutter text color in Flutter text widget. Don’t hesitate to submit your feedback regarding this post. I’ve also prepared other articles regarding Flutter widgets, remarkable Flutter templates with free code source, Flutter app development, Flutter animations, and many more. Thanks for reading this post.

Leave a Comment

Your email address will not be published.