CustomText - Custom Widget Series

Welcome to another article for my Custom Widgets Series. In this series I share some tips and code about creating reusable and advanced flutter widgets. These widgets are used by me and many professionals out there in production level flutter apps. Now they are available to you!

Table of Contents

1. Introduction
2. Usage
3. Code
4. Credits

Introduction

Are you guys tired of writing down the Text widget in flutter with tedious amount of boilerplate for even the simplest of styling? Do you wish you didn't have to touch the TextStyle for just changing one or two fields? Now there is a way to quickly create fixed style texts, with much simpler properties.

Moreover, I am sure you have struggled with the RichText API to just print simple multi styled text or make a certain link clickable without affecting the rest of the para. This widget introduces simple and intuitive ways to make that happen. You won't ever need to touch RichText again.

CustomText ✨

A wrapper around Text widget to directly pass in frequent properties like:

• color
• font size
• font weight
• max lines

etc. without creating seperate TextStyle. You can see the it in the example below.

CustomText(
  message ?? 'FindingJobsNearYou',
  fontSize: 18,
  letterSpacing: 0.3,
  color: context.colorScheme.onPrimary,
  fontWeight: FontWeight.bold,
),

Style Factories

Moreover, it has factories for different styles like .body(), .subtitle(), and .title(). They have certain font sizes, weights and colors predefined according to my choice so I can use them in a plug n play fashion.

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    // Title
    CustomText.body(
      title,
      fontWeight: FontWeight.bold,
    ),

    Insets.gapH10,

    // Message
    CustomText.subtitle(
      message,
      maxLines: 3,
    ),

    Insets.gapH10,

    // Time
    CustomText.label(
      time,
      color: context.colorScheme.onSurface.withValues(alpha: 0.6),
    ),
  ],
)

Rich text

Then comes in the heavy lifting factory .rich() for the annoyingly complex RichText.

See how simple the API is? All you have to do is use .rich() factory. You no longer need to fight between Text and TextSpan. Just pass in instance of another CustomText as textWidget. Also, notice the Insets.gap widget? It is a simple SizedBox. You can pass any widget in between the text without worrying about WidgetSpan. And just like that you can create complex text widgets.

Links and clickable text

Very often you want to make a text clickable with some custom callback. You can wrap it with InkWell or similar widgets but it is cumbersome. And, it is even more difficult to make only a part of the text clickable.

Now just pass in isLink: true and onLinkTap() callback to the CustomText or simply use the .link() constructor. See the below example of creating a complex hyperlinked legal statement.

// Legal Links
CustomText.rich(
  text: 'By signing you agree to the ',
  maxLines: 2,
  lineHeight: 1.7,
  fontSize: 14,
  letterSpacing: -0.1,
  textAlign: TextAlign.center,
  children: [
    CustomText.link(
      'Terms',
      fontWeight: FontWeight.bold,
      fontSize: 14,
      letterSpacing: -0.1,
      onLinkTap: () {
        AppUtils.openUrl(AppConstants.termsOfServiceUrl);
      },
    ),
    CustomText.body(
      ' and ',
      fontSize: 14,
      letterSpacing: -0.1,
    ),
    CustomText.link(
      'Privacy Policy',
      fontSize: 14,
      letterSpacing: -0.1,
      fontWeight: FontWeight.bold,
      onLinkTap: () {
        AppUtils.openUrl(AppConstants.privacyPolicyUrl);
      },
    ),
  ],
),

Code

Here is the crux of it all, the code for this amazing widget. I decided to place it at the end to avoid confusion, because it was important to see the usage and benefits before the implementation. I have included it as gist so I can update it in the future, if needed.

Credits

If you like it, please keep following me as I have around 40 such widgets and I will post many more of these.