Creating Beautiful Text Layouts with Text and RichText — Flutter Basic Tutorial #1
--
Welcome to this tutorial on the Flutter Text & RichText widget. In this article, we will learn how to display and style text in a Flutter app using the Text widget.
Before we dive into the specifics of the Text widget, let’s first understand why it’s important to be able to display and style text in a Flutter app. Text is a crucial part of any user interface, as it allows us to convey information to the user. Whether it’s displaying a simple label, a longer piece of content, or even just a button with some text on it, being able to customize the appearance of text is crucial for creating a visually appealing and effective user interface.
Take my Flutter Course for FREE → https://bit.ly/31hxS4R
→ SOURCE CODE — EnLive App :
https://codingyourlife.gumroad.com/l/enlive-flutter-ui-kit-app
→ SOURCE CODE — Car Rental App : https://codingyourlife.gumroad.com/l/flutter-cental-car-app
→ SOURCE CODE - Aqua Workout App : https://codingyourlife.gumroad.com/l/flutter-aqua-workout-app
Basic Text Widget
Now that we’ve established the importance of the Text widget, let’s take a look at how to use it. To begin, here is an example of the basic usage of the Text widget:
import 'package:flutter/material.dart';
void main() => runApp(const TextApp());
class TextApp extends StatelessWidget {
const TextApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: Scaffold(
body: Center(
child: Text('Hello World'),
),
),
);
}
}
In this example, the Text widget displays the string ‘Hello World’ in the center of the screen using the Center widget. The Center widget is a layout widget that centers its child within itself, so this example will display the text ‘Hello World’ in the center of the screen.
Styled Text Widget
The Text widget has several optional parameters that you can use to customize its appearance and behavior. For example, you can use the style parameter to specify the font, color, and size of the text, the textAlign parameter to specify the alignment of the text within its bounds, and the maxLines parameter to specify the maximum number of lines the text should span. Here is an example that shows how to use some of these optional parameters:
Text(
'Hello World',
style: TextStyle(
fontSize: 32,
color: Colors.blue,
fontWeight: FontWeight.bold,
),
textAlign: TextAlign.center,
maxLines: 2,
)
In this example, we are using the style parameter to specify a font size of 32 and a color of blue for the text. We are also using the textAlign parameter to center the text within its bounds, and the maxLines parameter to limit the text to a maximum of two lines.
Styled Rich Text Widget
In addition to these options, the Text widget also has support for rich text formatting using the RichText widget. This allows you to style different parts of the text differently, such as making certain words bold or italic. Here is an example of how to use the RichText widget:
RichText(
text: const TextSpan(
style: TextStyle(
fontSize: 32,
color: Colors.blue,
),
children: [
TextSpan(
text: 'Bold text: ',
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
TextSpan(text: 'normal text'),
],
),
)
In this example, we are using the RichText widget to create a TextSpan with two children: the word ‘Hello’ in bold, and the rest of the text as normal. This allows us to style different parts of the text differently within the same widget.
One thing to note is that the Text widget is just one of many widgets that Flutter provides for displaying and styling text. If you need more advanced text formatting or layout options, you might want to consider using other widgets such as the TextField, TextFormField, or TextEditingController.
It’s also worth mentioning that in addition to the Text widget, Flutter also provides several other ways to display and style text. For example, you can use the ThemeData class to define default text styles for your app, and you can use the DefaultTextStyle widget to specify a default text style for a subtree of your app’s widget hierarchy.
Thank you for reading this article on Flutter. We hope you have found this tutorial on the Flutter Text & RichText widget helpful. If you have any other questions or comments, don’t hesitate to ask in the comments section below. We are always happy to help. Thanks for reading, and we’ll see you in the next tutorial!
Download My Apps → https://codingyourlife.gumroad.com
Buy Me a Coffee → https://www.buymeacoffee.com/faisalramdan17
My Portfolio → https://codecanyon.net/user/codingyourlife/portfolio
→ Take my Flutter Course for FREE:
→ SOURCE CODE — EnLive App :
→ SOURCE CODE — Car Rental App :
→ SOURCE CODE - Aqua Workout App :
