Skip to main content

Flutter Format Bold Part of Text in Paragraph

In flutter we can make part of text bold or even apply color on. This is possible via Text.rich widget which makes multiple text span widgets. Inside this widget we pass TextSpan widget and define multiple sub child. Now we can apply different-different style on each TextSpan widget without breaking the text line.

Flutter Format Bold Part of Text in Paragraph:

1. Making Text Rich widget with bold style text inside it.
Text.rich(
        textAlign: TextAlign.center,
        TextSpan(
          text: 'Part Of Text ',
          style: TextStyle(fontSize: 28),
          children: [
            TextSpan(
                text: 'Bold',
                style:
                    TextStyle(fontWeight: FontWeight.bold, color: Colors.red)),
            TextSpan(
              text: ' Sample Text.',
            ),
          ],
        ),
      ))
2. Source code for main.dart file:
import 'package:flutter/material.dart';

void main() => runApp(const App());

class App extends StatelessWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
          body: Center(
              child: Text.rich(
        textAlign: TextAlign.center,
        TextSpan(
          text: 'Part Of Text ',
          style: TextStyle(fontSize: 28),
          children: [
            TextSpan(
                text: 'Bold',
                style:
                    TextStyle(fontWeight: FontWeight.bold, color: Colors.red)),
            TextSpan(
              text: ' Sample Text.',
            ),
          ],
        ),
      ))),
    );
  }
}
Screenshot:
Flutter Format Bold Part of Text in Paragraph

Comments