DEV Community

Cover image for Badges for the terminal - Dart Edition
Keff
Keff

Posted on

Badges for the terminal - Dart Edition

Hey there! ๐Ÿ‘‹

A while back I created a little node-js library called cli-badges for creating badges that you can print to the terminal.

Yup, those nifty little things we all know and love. The ones we add to our READMEs in order to add some more information about the project, like the version, downloads, test coverage, etc...

These thingies
Image of shields.io badges

They ended up looking something like this when printed to the terminal:
Image of cli-badges output

Whilst not the prettiest (as per usual in the terminal), it does the job. And in certain scenarios it can make for a better experience, like displaying tests results, test coverage, or any other information we could express in a key/value manner.

Why the port?

Like many other of my projects the reason usually is, that I was bored and wanted to code something up quickly. It has not been any different for this port.

Another reason is, that when I initially released cli-badges some other people in the community ported it to their prefered languages, like the python version made by haideralipunjabi.

I was bored today and as I'm recently using dart a lot (both professionally and for personal projects) I decided to port cli-badges to dart.

The result

This is how it ended up working:

var failedBadge  = Badge(label: 'failed', message: '2', theme: BadgeTheme.red);
var successBadge = Badge(label: 'success', message: '2').green();
var skippedBadge = Badge.yellow(label: 'skipped',  message: '2');

print(
    Badge.inline([
        failedBadge, 
        skippedBadge, 
        successBadge
    ]),
);
Enter fullscreen mode Exit fullscreen mode

The above would output something similar to the terminal:

Example output

The repo

It would be awesome if you could check the project out and give me and the project some feedback and love. ๐Ÿฅฐ

GitHub logo nombrekeff / cli_badges_dart

Quirky little dart library for generating badges for cli apps.

Takeaways

Named constructors

I love named constructors, they offer a nice way of adding multiple constructors that can have different default parameters. This can make your life as a developer quite a bit easier.

In cli_badges I used named constructors for easily creating themed badges:

Badge.yellow(label: 'skipped', message: '2');
Badge.red(label: 'skipped', message: '2');
Enter fullscreen mode Exit fullscreen mode

As opposed to this:

Badge(label: 'skipped', message: '2', theme: BadgeTheme.yellow);
Badge(label: 'skipped', message: '2', theme: BadgeTheme.red);
Enter fullscreen mode Exit fullscreen mode

This is how it's implemented:

Badge.red({
  required this.label,
  this.message,
  this.labelWidth,
  this.messageWidth,
}) : theme = BadgeTheme.red;

Badge.green({
  required this.label,
  this.message,
  this.labelWidth,
  this.messageWidth,
}) : theme = BadgeTheme.green;
Enter fullscreen mode Exit fullscreen mode

I added one for each of the available themes. This makes it much simpler and cleaner to create badges.

Override toString

Instead of creating a new method to build the badge string, we can override toString. This makes our class printable, just by passing it to print

print(Badge(label: 'I can be printed!'));
Enter fullscreen mode Exit fullscreen mode

As opposed to:

print(Badge(label: 'I can be printed!').makeString());
Enter fullscreen mode Exit fullscreen mode

This is how it's implemented:

@override
toString() {
  var label = _getLabel();
  var message = _getMessage();

  var coloredLabel = theme.colorLabel(label);
  var coloredMessage = theme.colorMessage(message);

  return '$coloredLabel$coloredMessage';
}
Enter fullscreen mode Exit fullscreen mode

That's it for this one, another quick little post! Let me end it with a question for you.

Can you find any use for this package? If so for what?

Top comments (1)

Collapse
 
nombrekeff profile image