Flutter Text Styling – Italic, Bold, Mixed

Here is how to Style Text in Flutter to be Italic, Bold and even Mixed – having a text with multiple spans with different styling.

Flutter Text Styling – Italic

If you want a “Regular Italic” text style in Flutter, you simply use:

fontStyle: FontStyle.italic

There is no separate weight for “Regular Italic” — it is just 400 weight + italic.

---

✅ Example

Text(
  'Regular Italic Text',
  style: TextStyle(
    fontFamily: 'my font family',
    fontWeight: FontWeight.w400, // Regular (400)
    fontStyle: FontStyle.italic, // Italic
    fontSize: 16,
  ),
);

What about Bold

To style Bold text in Flutter, you use:

fontWeight: FontWeight.bold

or more precisely:

fontWeight: FontWeight.w700

---

✅ Bold Text Example

Text(
  'Bold Text',
  style: TextStyle(
    fontFamily: 'my_family',
    fontWeight: FontWeight.bold, // or FontWeight.w700
    fontSize: 16,
  ),
);

---

💡 Bold + Italic (Bold Italic)

If you want Bold Italic, use both:

Text(
  'Bold Italic Text',
  style: TextStyle(
    fontFamily: 'my_family',
    fontWeight: FontWeight.w700,
    fontStyle: FontStyle.italic,
    fontSize: 16,
  ),
);

 

How to have a Text with two styles

To display text with two (or more) different styles in Flutter, you use RichText + TextSpan or Text.rich().

---

✅ Easiest Way — Using Text.rich

Text.rich(
  TextSpan(
    text: 'Hello ',                     // first part
    style: TextStyle(
      fontSize: 16,
      color: Colors.black,
    ),
    children: [
      TextSpan(
        text: 'World!',                 // second part
        style: TextStyle(
          fontSize: 16,
          color: Colors.blue,
          fontWeight: FontWeight.bold,
          decoration: TextDecoration.underline,
        ),
      ),
    ],
  ),
);

✅ Alternative — Using RichText

RichText(
  text: TextSpan(
    children: [
      TextSpan(
        text: 'First style text ',
        style: TextStyle(
          fontSize: 16,
          color: Colors.black,
        ),
      ),
      TextSpan(
        text: 'Second style text',
        style: TextStyle(
          fontSize: 16,
          color: Colors.red,
          fontWeight: FontWeight.bold,
        ),
      ),
    ],
  ),
);