text_to_path_maker 0.5.7

  • Readme
  • Changelog
  • Example
  • Installing
  • 81

Text to Path Maker #

This is a pure Flutter and Dart package that allows you to convert text--both characters and icons--into paths. It can generate SVG path strings and Flutter Path objects too.

Additionally, this package offers a bunch of methods you can use to animate those paths.

At the core of this package is a .ttf file parser, written in pure Dart. You can, if you want to, use it to read the font tables present in your TrueType font file.

Getting started #

You must always start by calling the parseTTFAsset() method available in the PMFontReader class to parse your font asset. Currently, only .ttf files are supported.

Once the font has been parsed, you'll have access to a PMFont object. You can call its generatePathForCharacter() method to convert any character into a Path object. Note that this method expects you to pass the character code of the character.

Next, you'll want to use the PMTransform.moveAndScale() method to position and scale the path. This is usually necessary because, by default, the paths can be quite large.

At this point, you can render the Path object onto any Canvas object. If you want to animate the path, however, you must call the PMPieces.breakIntoPieces() method. This method splits the path into tiny paths, depending on the precision you specify. These tiny paths, when rendered sequentially, will create the illusion of the character being drawn.

There's also a utility PMPainter class, which extends the CustomPainter class. You can use this to quickly render your animation using a CustomPaint widget.

Refer to the example code to learn more.

Notes #

This package is still a work in progress. It works reasonably well with most fonts, but there's no guarantee that it will handle every single font you have. It has been tested with Roboto, FontAwesome, and Material Icons. If you find a bug, you can raise file it on this project's GitHub repository.

[0.5.0] - 11th February 2019 #

  • Initial release.

[0.5.3] - 11th February 2019 #

  • Removed unnecessary code and assets.

[0.5.6] - 11th February 2019 #

  • Improved health checks.

[0.5.7] - 11th February 2019 #

  • More efficient path generation now.


import 'package:flutter/material.dart';
import 'package:flutter/services.dart' show rootBundle;
import 'package:text_to_path_maker/text_to_path_maker.dart';
import 'dart:typed_data';

void main() {

class Home extends StatefulWidget {
  State<StatefulWidget> createState() {
    return _Home();

class _Home extends State<Home> with SingleTickerProviderStateMixin {
  PMFont myFont;
  Path myPath1;
  Path myPath2;

  PMPieces path1Pieces;

  Animation<int> animation;
  AnimationController controller;

  var z = 0;
  var ready = false;

  void initState() {

    rootBundle.load("assets/font2.ttf").then((ByteData data) {
      // Create a font reader
      var reader = PMFontReader();

      // Parse the font
      myFont = reader.parseTTFAsset(data);

      // Generate the complete path for a specific character
      myPath1 = myFont.generatePathForCharacter(101);

      // Move it and scale it. This is necessary because the character
      // might be too large or upside down.
      myPath1 = PMTransform.moveAndScale(myPath1, -130.0, 180.0, 0.1, 0.1);

      // Break the path into small pieces for the animation
      path1Pieces = PMPieces.breakIntoPieces(myPath1, 0.01);

      // Create an animation controller as usual
      controller =
          AnimationController(vsync: this, duration: new Duration(seconds: 2));

      // Create a tween to move through all the path pieces.
      animation = IntTween(begin: 0, end: path1Pieces.paths.length - 1)

      animation.addListener(() {
        setState(() {
          z = animation.value;

      setState(() {
        ready = true;

  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      body: Container(
          child: Column(children: [
            Row(children: [
                  child: Text("Forward"),
                  onPressed: ready
                      ? () {
                      : null),
                  child: Text("Reverse"),
                  onPressed: ready
                      ? () {
                      : null),
                ? CustomPaint(
                    painter: PMPainter(path1Pieces.paths[z],
                        indicatorPosition: path1Pieces.points[z]))
                : Text("Loading")
          padding: EdgeInsets.all(16)),
      appBar: AppBar(title: Text("Example")),

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:

  text_to_path_maker: ^0.5.7

2. Install it

You can install packages from the command line:

with Flutter:

$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:

import 'package:text_to_path_maker/text_to_path_maker.dart';
Describes how popular the package is relative to other packages. [more]
Code health derived from static analysis. [more]
Reflects how tidy and up-to-date the package is. [more]
Weighted score of the above. [more]
Learn more about scoring.

We analyzed this package on Apr 1, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.1
  • pana: 0.13.6
  • Flutter: 1.12.13+hotfix.8

Health suggestions

Fix lib/src/pm_font_reader.dart. (-0.50 points)

Analysis of lib/src/pm_font_reader.dart reported 1 hint:

line 24 col 33: Unnecessary cast.

Maintenance suggestions

Package is getting outdated. (-13.42 points)

The package was last published 59 weeks ago.


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies