Flutter Tips #2: Using Rich Text in Flutter

When building a Flutter app, there are times when you need to display text with different styles, colors, or links within the same paragraph. The RichText widget allows you to achieve this efficiently by combining multiple text styles in a single widget.

Why Use Rich Text?

Rich text is useful for: ?? Highlighting important words or phrases ?? Styling parts of a text differently ?? Displaying inline links or clickable text ?? Creating dynamic UI components like Terms & Conditions or formatted descriptions

Many popular apps use rich text for blog previews, chat messages, and notifications.

How to Use RichText in Flutter

1?? Basic Example

The RichText widget works with TextSpan to define different styles in a single text block. Here’s a simple example:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: Text("Rich Text Example")),
        body: Center(
          child: RichText(
            text: TextSpan(
              text: 'Flutter is ',
              style: TextStyle(fontSize: 20, color: Colors.black),
              children: <TextSpan>[
                TextSpan(
                  text: 'awesome',
                  style: TextStyle(fontWeight: FontWeight.bold, color: Colors.blue),
                ),
                TextSpan(
                  text: ' and ',
                ),
                TextSpan(
                  text: 'powerful!',
                  style: TextStyle(fontStyle: FontStyle.italic, color: Colors.green),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}        

2?? Adding Clickable Links

You can make parts of the text clickable using GestureRecognizer.

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: Text("Clickable Rich Text")),
        body: Center(
          child: RichText(
            text: TextSpan(
              text: 'Check out ',
              style: TextStyle(fontSize: 18, color: Colors.black),
              children: <TextSpan>[
                TextSpan(
                  text: 'Flutter Docs',
                  style: TextStyle(color: Colors.blue, fontWeight: FontWeight.bold),
                  recognizer: TapGestureRecognizer()
                    ..onTap = () {
                      print("Flutter Docs Clicked");
                      // Open a URL or navigate to another screen
                    },
                ),
                TextSpan(text: ' for more information.'),
              ],
            ),
          ),
        ),
      ),
    );
  }
}        

Customization Options

? Change font size, color, and weight for different text parts ? Add clickable links to external pages ? Combine multiple text styles seamlessly ? Use Text.rich() as an alternative to RichText

Final Thoughts

Using RichText in Flutter helps create visually appealing and interactive text components. Whether for UI enhancements, call-to-action elements, or article previews, mastering RichText can elevate your app's design.