How to Use a TextPainter to Draw Text In Flutter?

• General

Text Widget allows you to display text in your Flutter Application. In today’s article, We will go through How to Use a TextPainter to Draw Text In Flutter?

Learn how to harness the power of TextPainter to draw custom text in Flutter with precision and flexibility. In this insightful blog post, explore the capabilities of TextPainter and discover how to manipulate text properties, such as font size, style, and color, to create visually appealing and dynamic text elements. Delve into practical examples and code snippets that demonstrate various use cases of TextPainter, including drawing text on custom canvases and implementing text animations. Whether you’re building a unique UI or adding custom typography to your app, this tutorial will equip you with the knowledge and skills to leverage TextPainter effectively. Unleash your creativity and master the art of drawing text with TextPainter in Flutter today.

How to Use a TextPainter to Draw Text In Flutter?

User needs to change TextSpan line to

TextSpan span = new TextSpan(style: new TextStyle(color: Colors.grey[600]), text: 'Yrfc');

Apparently, it was either drawing the text invisibly or as white background color.

In the TextPainter Constructor, need also specify the TextDirection parameter, otherwise, you’ll receive an exception

TextSpan span = new TextSpan(style: new TextStyle(color: Colors.blue[800]), text: name);
TextPainter tp = new TextPainter(text: span, textAlign: TextAlign.left, textDirection: TextDirection.ltr);
tp.layout();
tp.paint(canvas, new Offset(5.0, 5.0));

To paint in flutter you use the CustomPaint Widget. The CustomPaint Widget takes a CustomPainter object as a parameter. In that class, you have to override the paint method, which gives you a canvas that you can paint on. Here is a code snippet for the same.

@override
void paint(Canvas canvas, Size size) {
  final textStyle = TextStyle(
    color: Colors.black,
    fontSize: 30,
  );
  final textSpan = TextSpan(
    text: 'Hello, world.',
    style: textStyle,
  );
  final textPainter = TextPainter(
    text: textSpan,
    textDirection: TextDirection.ltr,
  );
  textPainter.layout(
    minWidth: 0,
    maxWidth: size.width,
  );
  final offset = Offset(50, 100);
  textPainter.paint(canvas, offset);
}

We will get output like a below:

Notes:

• If you are using a white background, be sure to set the text color to some other color besides white, which is the default.
• Flutter makes an effort to not assume a text direction, so you need to set it explicitly. The abbreviation ltr stands for left-to-right, which languages like English use. The other option is rtl (right-to-left), which languages like Arabic and Hebrew use. This helps to reduce bugs when the code is used in language contexts that developers were not thinking about.

Context

Here is the main.dart code so that you can see it in context.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: HomeWidget(),
      ),
    );
  }
}

class HomeWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: CustomPaint( //                       <-- CustomPaint widget
        size: Size(300, 300),
        painter: MyPainter(),
      ),
    );
  }
}

class MyPainter extends CustomPainter { //         <-- CustomPainter class
  @override
  void paint(Canvas canvas, Size size) {
    //                                             <-- Insert your painting code here.
  }
  
  @override
  bool shouldRepaint(CustomPainter old) {
    return false;
  }
}

Conclusion:

Thanks for being with us on a Flutter Journey !!!

In this article, we have been through How to Use setState In Flutter…

Keep Learning !!! Keep Fluttering !!!

Still confused about something in flutter?? Do let us know!!

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge of Flutter

Written by Nirali Patel

Nirali Patel is a dedicated Flutter developer with over two years of experience, specializing in creating seamless mobile applications using Dart. With a passion for crafting user-centric solutions, Nirali combines technical proficiency with innovative thinking to push the boundaries of mobile app development.