Auto style text in flutter

Question

I have use an API for Gemini AI, this AI sends me a text with stars and tags for format the text like this:

**Knowledge and Information:**

**Answer questions:** Provide factual information and knowledge on a wide range of topics.
**Summarize text:** Extract and condense key points from written content.
**Translate languages:** Convert text between different languages.
**Generate text:** Create original text, such as stories, articles, and poems.
**Calculate and convert:** Perform mathematical operations and convert units.

I want to format this text in flutter so the title be large as the AI sends, How can I do it?

I tried Gemini AI model so I want help for reformat the text that it sends in Flutter.

Answer 1

If your responses are covered with tags and in HTML form, you should use flutter_html.

This package is easy and ready to use.

Answer 2

You can do it manually, we check if our text has doubls stars, if it has, we bold it otherwise we show it like normal texts.

Use below code to bold texts that are covered with 2 stars in beginning and end like ****

import 'package:flutter/material.dart';
// It uses a [RichText] widget to display 
  a [text] with a [style] and a
// [TextStyle.fontWeight] of [FontWeight.bold] for the bold texts
// The bold texts are the ones between two asterisks, for example:
// "This is a **bold text**"
class BoldableText extends StatelessWidget {
  final String text;
  final TextStyle? style;
  final TextAlign? textAlign;
  final bool isSelectable;

  const BoldableText(this.text,
      {super.key, this.isSelectable = false, this.style, this.textAlign});

  @override
  Widget build(BuildContext context) {
    final List<TextSpan> children = [];
    final List<String> split = text.split('**');
    for (int i = 0; i < split.length; i++) {
      if (i % 2 == 0) {
        children.add(TextSpan(text: split[i], style: style));
      } else {
        children.add(TextSpan(
            text: split[i],
            style: (style ?? const TextStyle())
                .copyWith(fontWeight: FontWeight.bold)));
      }
    }
    if (isSelectable) {
      return SelectableText.rich(
        TextSpan(children: children),
        style: style,
        textAlign: textAlign,
      );
    }
    return Text.rich(
      TextSpan(children: children),
      style: style,
      textAlign: textAlign,
    );
  }
}

Happy Coding :)