Paddinger: Flutter Padding widgets generator

Paddinger is a new package to help you deal with Flutter paddings and here you’ll discover how!

Have you ever been tired of writing Padding and EdgeInsets boilerplate everytime you need to add padding to a widget? I was, so I started looking for something to simplify this task. Furthermore, the necessary code to create declarative UIs can become very long and difficult to read, so, if there is a way to reduce it even by a few lines it’s something always worth to be considered.

I found out I was not the only one who was tired of this Padding boilerplate because, searching for a solution, I found someone else struggling with the same problem. One of the solution I found was Padder, which is available on Github and on pub.dev. It’s a cool set of widgets which can help you dealing with paddings.

Unfortunately, it was not what I was looking for, but having found valid proofs that there was a problem affecting someone else other than me, I decided to build what I needed on my own, and so Paddinger was born.

What is Paddinger?

Paddinger is a code generator for Flutter: it builds Padding widgets for you based on the values you have in your design system. An example is worth a thousand words, so here it is. Assuming you have

const double PADDING_NORMAL = 8;

with Paddinger you will obtain a set of widgets like

NormalAllPadding
NormalLeftPadding
NormalTopPadding
NormalRightPadding
NormalBottomPadding
NormalHorizontalPadding
NormalVerticalPadding
NormalLeftTopPadding
NormalLeftBottomPadding
NormalRightTopPadding
NormalRightBottomPadding

just by annotating with @paddinger the constants you want the widgets to be generated for, like

@paddinger const double PADDING_NORMAL = 8;

Then, you can use the generated widgets like every other one. Assuming you want to give a padding of 8 to a Text, instead of writing

Padding(
  padding: const EdgeInsets.all(PADDING_NORMAL),
  child: Text(
    'MyText',
  ),
)

you can just write

NormalAllPadding(
  child: Text(
    'MyText',
  ),
)

which imho is far easier to remember, to write, to read and IDE code completion will come to rescue!

How to use Paddinger in your project?

dependencies:
  paddinger_annotations: [latestVersionHere]

dev_dependencies:
  paddinger: [latestVersionHere]

• Create a file where you will add all your PADDING_ constants, the file could be named paddings.dart.
• Add your favourite material or cupertino import like:

// ignore: unused_import
import 'package:flutter/material.dart';

Now run the code generation with flutter pub run build_runner build --delete-conflicting-outputs and your widgets will be generated and ready to be used!

You can have a look at the example in the Github repository or on pub.dev.

Happy Fluttering!

Originally published at https://www.emanuelepapa.dev on May 16, 2021.