Flutter实现多文字不同颜色显示的方案咨询

Hey there! I get it—trying plugins that don’t deliver can be frustrating. Let’s walk through the most reliable ways to display partially colored text in your Flutter app, both with native widgets and better plugin alternatives.

1. Use Text.rich (Simplest for Static Text) #

This is the go-to method for combining text segments with different styles. It’s a wrapper around RichText that’s easier to use when you just need styled text without extra layout controls.

Text.rich(
  TextSpan(
    // Base style for the entire text (optional)
    style: TextStyle(color: Colors.black87, fontSize: 16),
    children: <TextSpan>[
      TextSpan(text: 'I love '),
      TextSpan(
        text: 'Flutter',
        style: TextStyle(color: Colors.blueAccent, fontWeight: FontWeight.bold),
      ),
      TextSpan(text: ' because it lets me create '),
      TextSpan(
        text: 'beautiful UIs',
        style: TextStyle(color: Colors.green, fontSize: 18),
      ),
      TextSpan(text: ' easily!'),
    ],
  ),
)

Each TextSpan can have its own style property to set color, font weight, size, and more. Perfect for static text where you control the content directly.

2. Use RichText (For Advanced Layout) #

If you need more control over text alignment, line spacing, or text direction, use RichText directly. It’s more flexible than Text.rich for complex text layouts.

RichText(
  textAlign: TextAlign.justify,
  textDirection: TextDirection.ltr,
  text: TextSpan(
    style: TextStyle(color: Colors.grey[700], fontSize: 15),
    children: [
      TextSpan(text: 'Did you know? '),
      TextSpan(
        text: 'RichText',
        style: TextStyle(color: Colors.orange, fontStyle: FontStyle.italic),
      ),
      TextSpan(text: ' lets you customize every aspect of your text, including '),
      TextSpan(
        text: 'line height',
        style: TextStyle(color: Colors.purple, decoration: TextDecoration.underline),
      ),
      TextSpan(text: ' and alignment.'),
    ],
  ),
)

3. Handle HTML Content with flutter_html (Better Plugin Alternative) #

The old flutter_html_view plugin is outdated—switch to flutter_html instead. It supports inline styles, modern HTML elements, and is actively maintained.

First, add the dependency to your pubspec.yaml:

dependencies:
  flutter_html: ^3.0.0 # Check for the latest version on pub.dev

Then use it to render HTML with colored text:

Html(
  data: '''
    <div>
      <p>Here’s some <span style="color: #ff5722; font-size: 20px;">orange text</span> using inline CSS.</p>
      <p>You can also use <strong style="color: #2196f3;">blue bold text</strong> or <em style="color: #9c27b0;">purple italic text</em>.</p>
    </div>
  ''',
)

4. Use flutter_markdown with Inline HTML #

If you prefer Markdown but need colored text, the flutter_markdown package supports embedding HTML directly in your Markdown content.

Add the dependency:

dependencies:
  flutter_markdown: ^0.6.16 # Check for latest version

Then render your Markdown with inline HTML styles:

MarkdownBody(
  data: '''
    This is regular Markdown text.
    <span style="color: #4caf50;">This is green text using HTML in Markdown</span>
    ### Heading with <span style="color: #f44336;">red text</span>
  ''',
)

All these methods should solve your problem—pick the one that fits your use case best!

内容的提问来源于stack exchange，提问作者Caffeinatedwolf