What is a text widget in Flutter?
Mobile applications have become a part of our everyday lives, and users spend a lot of time navigating through or getting information from them. Despite all the complexities we pack into our Flutter apps (such as navigation, animations, dialogs, and so on), the best way to present any information would be through text. This ensures that the user gets their information in a language they are comfortable with.
The text widget
The function of displaying a string in a Flutter app is handled by a text widget, as we know everything Flutter offers to style the UI is a widget. The text widget can simply be used by creating the text widget class and passing the required parameter string.
Text('This is My String, i am the only required parameter');
This is the simplest implementation of the text widget as it simply returns a string with single style to the UI. The text widget can then be used anywhere, such as in columns, rows, containers, the center etc.
Styling a text widget
Styling is very important in mobile development, as users are drawn to nice text styling. The text widget offers users a wide array of styling options to choose from.
Let’s look at the implementation of the text widget class.
Text(String data, {Key? key, TextStyle? style, StrutStyle? strutStyle, TextAlign? textAlign, TextDirection? textDirection, Locale? locale, bool? softWrap, TextOverflow? overflow, double? textScaleFactor, int? maxLines, String? semanticsLabel, TextWidthBasis? textWidthBasis, TextHeightBehavior? textHeightBehavior, Color? selectionColor})
Above is the text widget class constructor, and at close look, we see that the constructor defines the string to be the only compulsory variable, while all others are optional.
One of the variables is the style property that takes a TextStyle object. This allows us to change the basic appearance of the text, such as the fontsize, fontweight, color, fontstyle etc.
Constructor parameters
fontsize: This variable takes anintvalue, which determines the size of the text.fontweight: This parameter allows the text to take on a bold-like appearance. We can specify if we want the text to be bold by setting this property toFontWeight.boldor using the custom weight option, for exampleFontWeight.w[weightValue]i.e.FontWeight.w900.color: This property allows us to change the color of the text to our desired one in theMaterialAppColorclass.fontstyle: We use this to italicize the text i.e.fontStyle: FontStyle.italic.custom fonts: We can apply custom fonts using thefontfamilyproperty while making sure to include the font-family files in our project.
Code example
Let’s look at an example of a simple Flutter application that returns a text widget.
import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Tutorial',home: Scaffold(appBar: AppBar(title: Text('Flutter Text Widget Tutorial'),),body: Center(child: Text('Hello World'),),),);}}
Explanation
Line 1: We import the material package.
Line 3: We call the
void main()function.Line 5: We create a
MyAppStatelessWidgetclass that returns aMaterialAppwidget.Line 10: We pass a string as the title.
Line 11: We set the home parameter to a scaffold.
Lines 12–13: We also set the
AppBarof the scaffold and its title, which is a text widget.Lines 15–16: We then center a text widget using the center widget in the body parameter of the scaffold.
RichText is another variation of the text widget, which allows for further customization of strings and their presentation. We can read more about this in the Flutter widget documentation.
We have so far treated the popular properties and characteristics of the Flutter text widget, which should be enough to start styling and customizing our texts. So the next time we encounter any unusual text designs on the UI/UX interface, we can rest easy knowing that the Flutter text widget will take care of it.