flutter_text_drawable 0.3.1

  • Readme
  • Changelog
  • Example
  • Installing
  • 61

flutter_text_drawable #

Pub Github Language License Tests

A flutter package that gives you the flexibility to create and customize text user avatars like Gmail and Contacts. It also provides a TextDrawableListTile widget which wraps around the material ListTile widget to provide easy control when using TextDrawable with a ListTile.

Basic Usage #

Simply add the TextDrawable to your widget tree like so:

  text: "Some Text",

Respond to Tap Events (Like Gmail) #

TextDrawable widget has an option to receive tap events and switch between the text being displayed and a checked icon.
Just set isTappable = true.
If you wish to receive a callback when the widget is tapped, pass in a function which accepts a bool to the onTap property.

  text: "$index",
  isTappable: true,
  onTap: (val) {
    print("$index selected: $val");
  boxShape: BoxShape.rectangle,
  borderRadius: BorderRadius.circular(8),

TextDrawableListTile usage #

The TextDrawableListTile requires to parameters for a minimal usage - drawableText (String) and title (Widget). It supports all the params of the material ListTile widgets. The leading TextDrawable text animates into a check icon when tile is longPressed.
When selected = true, long press events will not have any effect.

Can be used like so:
  itemCount: 3,
  itemBuilder: (context, index) {
    return TextDrawableListTile(
      drawableText: "$index",
      title: Text("$index"),

TextDrawable Properties available #

textStringThe text you wish to display. Only first character will be displayed.
heightdoubleHeight of the TextDrawable widget.
widthdoubleWidth of the TextDrawable widget. Defaults to 48.
backgroundColorColorBackground color to for the widget. If not specified, a random color will be generated.
textStyleTextStyleTextStyle for the text to be displayed. Default fontSize is 18. color is determined based on contrast with the backgroundColor.
boxShapeBoxShapeShape of the widget. Defaults to BoxShape.circle.
borderRadiusBorderRadiusGeometryBorder radius of the widget. Only specify this if boxShape == BoxShape.rectangle.
durationDurationSpecify duration of animation between text and checked icon. Defaults to current theme animation duration.
isTappableboolSet to true when you want the widget to recognize taps. Typical selection behaviour found in the Gmail app.
onTapFunction(bool)Callback received when widget is tapped. It emits its current selected status.

Example #

Check the examples tab or take a look at the example file.

License #

This project has been licensed under the MIT License. Check the LICENSE file for the details.

[0.3.1] - 01-July-2020 #

  • Added flip animation when swapping text and icon.

[0.3.0] - 22-May-2020 #

  • Exposed isSelected param of TextDrawable for more flexibility and control.
  • Added TextDrawableListTile widget. Useful for selectable tiles.

[0.2.1] - 21-May-2020 #

  • Added pub badge to Readme

[0.2.0] - 21-May-2020 #

  • Make widget tappable with isTappable param.
  • Receive onTap callback.
  • Animate between text and icon when widget is tapped.
  • Removed colorGenerator param.

[0.1.2] - 21-May-2020 #

  • Added widget test for the TextDrawable widget

[0.1.1] - 19-May-2020 #

  • Documented package

[0.1.0] - 19-May-2020 #

  • Initial package release


import 'package:flutter/material.dart';
import 'package:flutter_text_drawable/flutter_text_drawable.dart';

void main() {
    title: 'Flutter Text Drawable Demo',
    theme: ThemeData(primaryColor: Colors.green),
    home: MyApp(),

class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text('Flutter Text Drawable Demo'),
      body: Column(
        children: [
          // Using TextDrawable alone
            shrinkWrap: true,
            itemCount: 3,
            itemBuilder: (context, index) {
              return ListTile(
                leading: TextDrawable(
                  text: "$index",
                  isTappable: true,
                title: Text("Standalone Item $index"),
          SizedBox(height: 50),
          // Using the TextDrawableListTile widget
            shrinkWrap: true,
            itemCount: 3,
            itemBuilder: (context, index) {
              return TextDrawableListTile(
                drawableText: "$index",
                title: Text("TextDrawableListTile Item $index"),
                onTap: null,

Use this package as a library

1. Depend on it

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

  flutter_text_drawable: ^0.3.1

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:flutter_text_drawable/flutter_text_drawable.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 Jul 11, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.4
  • pana: 0.13.14
  • Flutter: 1.17.5

Analysis suggestions

Package not compatible with SDK dart


  • flutter_text_drawable that is a package requiring null.


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.12 1.14.13
meta 1.1.8 1.2.2
sky_engine 0.0.99
typed_data 1.1.6 1.2.0
vector_math 2.0.8 2.1.0-nullsafety
Dev dependencies
test any