DEV Community

Ge Ji
Ge Ji

Posted on

Flutter Lesson 5:Text and Styles

Text is one of the most basic and important elements in any application. In Flutter, text display and style control are very flexible, capable of meeting various complex UI requirements. This lesson will detailedly introduce core components and style control methods related to text in Flutter, helping you master various text display techniques.

I. Detailed Explanation of Text Widget Properties

The Text widget is the basic component for displaying text in Flutter, providing rich properties to control the appearance and behavior of text.

Basic Properties 

Text( "Hello Flutter", // Text content to display style: TextStyle(...), // Text style textAlign: TextAlign.center, // Text alignment textDirection: TextDirection.ltr, // Text direction (left-to-right/right-to-left) softWrap: true, // Whether to wrap text automatically overflow: TextOverflow.ellipsis, // Text overflow handling maxLines: 2, // Maximum number of lines textScaleFactor: 1.0, // Text scaling factor semanticsLabel: "Hello Flutter", // Semantic label for accessibility )
Enter fullscreen mode Exit fullscreen mode

Detailed Explanation of Common Properties

  1. textAlign - Text alignment 
// Optional values TextAlign.left // Left alignment TextAlign.right // Right alignment TextAlign.center // Center alignment TextAlign.justify // Justified alignment TextAlign.start // Alignment at start of text direction TextAlign.end // Alignment at end of text direction
Enter fullscreen mode Exit fullscreen mode

2 . overflow - Text overflow handling

// Common values TextOverflow.clip // Clip overflowing content TextOverflow.fade // Fade out overflowing content TextOverflow.ellipsis // Show ellipsis (...) for overflow TextOverflow.visible // Allow content to overflow
Enter fullscreen mode Exit fullscreen mode

3 . softWrap - Automatic line wrapping control
- true (default): Text wraps when exceeding container width
- false: Text doesn't wrap, may cause overflow

4 . maxLines - Maximum line limit
- Set to null for no limit (default)
- Used with overflow property to control handling of text exceeding line limit


II. TextStyle for Style Control

TextStyle is the core class for controlling text appearance, with almost all text-related styles defined through it.

Common Style Properties 

TextStyle( fontSize: 16.0, // Font size, default 14 color: Colors.black87, // Text color fontWeight: FontWeight.w400, // Font weight fontStyle: FontStyle.normal, // Font style (normal/italic) letterSpacing: 0.5, // Letter spacing wordSpacing: 2.0, // Word spacing height: 1.5, // Line height, multiplier of font size backgroundColor: Colors.yellow, // Background color decoration: TextDecoration.none, // Text decoration (underline, etc.) decorationColor: Colors.red, // Decoration line color decorationStyle: TextDecorationStyle.solid, // Decoration line style fontFamily: "Roboto", // Font family shadows: [ // Text shadows Shadow( color: Colors.grey, offset: Offset(1, 1), blurRadius: 2, ) ], )
Enter fullscreen mode Exit fullscreen mode

Font Weight (fontWeight)

FontWeight defines the thickness of text, with common values including:

  • FontWeight.w100 - Thinest
  • FontWeight.w300 - Light
  • FontWeight.w400 - Normal (default)
  • FontWeight.w500 - Medium
  • FontWeight.w700 - Bold
  • FontWeight.w900 - Black
  • Shortcut: FontWeight.bold is equivalent to FontWeight.w700

Text Decoration (decoration)

You can add various decorative lines to text:

TextDecoration.none // No decoration TextDecoration.underline // Underline TextDecoration.overline // Overline TextDecoration.lineThrough // Line through
Enter fullscreen mode Exit fullscreen mode

Decoration line styles (decorationStyle):

TextDecorationStyle.solid // Solid line (default) TextDecorationStyle.dashed // Dashed line TextDecorationStyle.dotted // Dotted line TextDecorationStyle.double // Double line TextDecorationStyle.wavy // Wavy line
Enter fullscreen mode Exit fullscreen mode

III. DefaultTextStyle for Style Reuse

In actual development, we often need to maintain consistent text styles across different parts of an application. DefaultTextStyle allows us to set default text styles for an entire subtree of widgets, enabling style reuse.

Basic Usage 

DefaultTextStyle( // Set default text style style: const TextStyle( color: Colors.grey, fontSize: 14, fontFamily: 'sans-serif', ), // Text alignment textAlign: TextAlign.start, // Maximum lines maxLines: 2, // Overflow handling overflow: TextOverflow.ellipsis, // Child widget tree child: Column( children: const [ Text("This text uses the default style"), Text("This text also uses the default style"), // Can override default style Text( "This text uses a custom style", style: TextStyle( color: Colors.blue, fontSize: 16, ), ), ], ), )
Enter fullscreen mode Exit fullscreen mode

Practical Application Scenarios

DefaultTextStyle is particularly suitable for components containing multiple text elements such as lists and cards. It allows setting base styles uniformly while enabling individual styling where special styles are needed, ensuring consistency while maintaining flexibility.


IV. Rich Text with RichText and TextSpan

When needing multiple different styles within a single text passage, the Text widget is insufficient. We need to use RichText with TextSpan to achieve rich text effects.

Basic Usage of RichText 

RichText( text: TextSpan( // Base style, child TextSpans inherit this style: const TextStyle( color: Colors.black87, fontSize: 16, ), children: [ const TextSpan(text: "This is a section of"), TextSpan( text: "red bold text", style: const TextStyle( color: Colors.red, fontWeight: FontWeight.bold, ), // Can add tap event recognizer: TapGestureRecognizer() ..onTap = () { print("Tapped red bold text"); }, ), const TextSpan(text: "where this part"), TextSpan( text: "has an underline", style: const TextStyle( decoration: TextDecoration.underline, color: Colors.blue, ), ), const TextSpan(text: "."), ], ), // Text alignment textAlign: TextAlign.center, )
Enter fullscreen mode Exit fullscreen mode

Nested TextSpan Usage

TextSpan can be nested for more complex text structures:

RichText( text: TextSpan( style: const TextStyle(color: Colors.black, fontSize: 16), children: [ const TextSpan(text: "User Agreement:\n\n"), TextSpan( children: [ const TextSpan(text: "1. "), const TextSpan( text: "This agreement", style: TextStyle(fontWeight: FontWeight.bold), ), const TextSpan(text: "applies to all users.\n"), ], ), TextSpan( children: [ const TextSpan(text: "2. Users must comply with the"), TextSpan( text: "terms of service", style: const TextStyle(color: Colors.blue), recognizer: TapGestureRecognizer() ..onTap = () { // Navigate to terms of service page }, ), const TextSpan(text: "and related regulations."), ], ), ], ), )
Enter fullscreen mode Exit fullscreen mode

Practical Application Scenarios

Rich text is commonly used for:

  • Text paragraphs with different styles (e.g., agreement text)
  • Text with highlighted sections (e.g., search results)
  • Clickable text links (e.g., privacy policy links)
  • Mixed icons and text (via WidgetSpan)

WidgetSpan for Mixing Widgets and Text

WidgetSpan allows inserting other widgets within text for text-image mixing:

RichText( text: TextSpan( style: const TextStyle(color: Colors.black, fontSize: 16), children: [ const TextSpan(text: "Your points: "), WidgetSpan( child: Icon(Icons.star, color: Colors.yellow[700], size: 18), ), const TextSpan( text: " 1250", style: TextStyle(color: Colors.orange, fontWeight: FontWeight.bold), ), ], ), )
Enter fullscreen mode Exit fullscreen mode

V. Font Import and Custom Fonts

Flutter supports using custom fonts to give your app a unique text style. Using custom fonts requires the following steps:

Step 1: Prepare Font Files

  1. Create a fonts folder in the project root directory (if it doesn't exist)
  2. Place font files (usually .ttf or .otf format) in this folder
  3. It's recommended to create subfolders for different weights/styles to keep the structure clear: 
fonts/ OpenSans/ OpenSans-Regular.ttf OpenSans-Bold.ttf OpenSans-Italic.ttf
Enter fullscreen mode Exit fullscreen mode

Step 2: Configure Fonts in pubspec.yaml

Open the pubspec.yaml file in the project root directory and add font configurations:

flutter: fonts: - family: OpenSans # Font family name, used in code fonts: - asset: fonts/OpenSans/OpenSans-Regular.ttf # Regular font - asset: fonts/OpenSans/OpenSans-Bold.ttf weight: 700 # Bold weight - asset: fonts/OpenSans/OpenSans-Italic.ttf style: italic # Italic style
Enter fullscreen mode Exit fullscreen mode

Configuration explanation:

  • family: Font family name, used in TextStyle's fontFamily property
  • asset: Path to font file relative to project root
  • weight: Optional, specifies font weight (100-900)
  • style: Optional, specifies style (normal/italic)

After configuration, run flutter pub get to make the configuration effective.

Step 3: Use Custom Fonts

Reference custom fonts in TextStyle through the fontFamily property:

Text( "Text using custom font", style: TextStyle( fontFamily: "OpenSans", // Matches family in pubspec.yaml fontSize: 20, ), ) // Using bold variant Text( "Bold text with custom font", style: TextStyle( fontFamily: "OpenSans", fontWeight: FontWeight.w700, // Matches weight in configuration fontSize: 20, ), ) // Using italic variant Text( "Italic text with custom font", style: TextStyle( fontFamily: "OpenSans", fontStyle: FontStyle.italic, // Matches style in configuration fontSize: 20, ), )
Enter fullscreen mode Exit fullscreen mode

Step 4: Set Global Default Font

To use a custom font throughout the entire application, configure it through ThemeData:

MaterialApp( title: 'Custom Font Example', theme: ThemeData( // Set global font fontFamily: 'OpenSans', // Other theme configurations... ), home: const MyHomePage(), )
Enter fullscreen mode Exit fullscreen mode

VI. Practical Text Techniques

1. Responsive Font Sizes

Automatically adjust font size based on different screen sizes:

// Use MediaQuery to get screen information Text( "Responsive font", style: TextStyle( fontSize: MediaQuery.of(context).size.width * 0.05, // 5% of screen width ), ) // Use FittedBox to automatically fit container Container( width: 100, child: FittedBox( fit: BoxFit.scaleDown, child: Text("This text will automatically shrink to fit container width"), ), )
Enter fullscreen mode Exit fullscreen mode

2. Text Spacing and Line Height Adjustment 

Text( "Example text with adjusted line height and letter spacing. " "This is the second line to demonstrate line height effect.", style: TextStyle( fontSize: 16, letterSpacing: 1.2, // Letter spacing wordSpacing: 3.0, // Word spacing height: 1.8, // Line height, multiplier of font size ), textAlign: TextAlign.justify, )
Enter fullscreen mode Exit fullscreen mode

3. Text Selection and Copying

By default, text in the Text widget is not selectable. To enable text selection, use SelectableText:

SelectableText( "This text can be selected and copied. " "Long press to show context menu for copy operations.", style: const TextStyle(fontSize: 16), cursorColor: Colors.blue, // Cursor color selectionColor: Colors.blue.withOpacity(0.2), // Selected text background color onSelectionChanged: (selection, cause) { // Callback when selection state changes print("Selected text: ${selection.textInside('This text can be selected and copied. Long press to show context menu for copy operations.')}"); }, )
Enter fullscreen mode Exit fullscreen mode

Top comments (0)