How to Use a TextPainter to Draw Text In Flutter?

· 4 min read
How to Use a TextPainter to Draw Text In Flutter
How to Use a TextPainter to Draw Text In Flutter

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?

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:

Text Painter in Flutter
Text Painter in Flutter

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 GuideFlutter ProjectsCode 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

Leave a Reply