Semantic portal
Manipulating text
The following examples show how to specify fonts and other text attributes. They also show how to transform text strings, customize spacing, and create excerpts.
Adjusting text spacing
Var container = Container( // grey box
child: Center(
child: Container( // red box
child: Text(
"Lorem ipsum",
style: TextStyle(
color: Colors.white,
fontSize: 24,
fontWeight: FontWeight.w900,
letterSpacing: 4,
),
),
decoration: BoxDecoration(
color: Colors.red[400],
),
padding: EdgeInsets.all(16),
),
),
width: 320,
height: 240,
color: Colors.grey[300],
);In Flutter, you specify white space as logical pixels (negative values are allowed) for the letterSpacing and wordSpacing properties of a TextStyle child of a Text widget.
Making inline formatting changes
Var container = Container( // grey box
child: Center(
child: Container( // red box
child: RichText(
text: TextSpan(
style: bold24Roboto,
children: <TextSpan>[
TextSpan(text: "Lorem "),
TextSpan(
text: "ipsum",
style: TextStyle(
fontWeight: FontWeight.w300,
fontStyle: FontStyle.italic,
fontSize: 48,
),
),
],
),
),
decoration: BoxDecoration(
color: Colors.red[400],
),
padding: EdgeInsets.all(16),
),
),
width: 320,
height: 240,
color: Colors.grey[300],
);To display text that uses multiple styles (in this example, a single word with emphasis), use a RichText widget instead. Its text property can specify one or more TextSpan widgets that can be individually styled.
Creating text excerpts
Var container = Container( // grey box
child: Center(
child: Container( // red box
child: Text(
"Lorem ipsum dolor sit amet, consec etur",
style: bold24Roboto,
overflow: TextOverflow.ellipsis,
maxLines: 1,
),
decoration: BoxDecoration(
color: Colors.red[400],
),
padding: EdgeInsets.all(16),
),
),
width: 320,
height: 240,
color: Colors.grey[300],
);N Flutter, use the maxLines property of a Text widget to specify the number of lines to include in the excerpt, and the overflow property for handling overflow text.