Supercharge Flutter Declarative UI with code generation Emanuele Papa droidcon London 2021 

Working at Zest One in Chiasso, Switzerland Who I am? Emanuele Papa, Android Developer Find me at www.emanuelepapa.dev 

Declarative UI Imperative UI -> Declarative UI Jetpack Compose and SwiftUI Unfortunately, not perfect yet No more XML or UIKit 

Padding in Flutter Padding( padding: EdgeInsets.all(16.0), child: Text("Hello droidcon!") ); 

What we want - Make the code easy to write - Avoid errors caused by distraction - Minimize code duplication - Make the IDE our best friend - Improve our productivity 

Looking for improvements Someone else experienced the same struggle Some libraries are available on GitHub 

It's an improvement, but you still need to add the Padding value manually The missing thing PaddingTop(16.0, child: Text("Hello droidcon!")); 

Design System Padding No need to add the Padding value manually, it's specified in the class name MediumTopPadding(child: Text("Hello droidcon!")); 

How to create these widgets? 

Paddinger 

How to use Paddinger? dependencies: paddinger_annotations: [latestVersionHere] dev_dependencies: paddinger: [latestVersionHere] Add these dependencies to your pubspec.yaml 

How to use Paddinger? Create a paddings.dart file which contains your PADDING_ definitions @paddinger const double PADDING_MEDIUM = 16.0; @paddinger const double PADDING_LARGE = 24.0; 

How to use Paddinger? Add material or cupertino import Add part directive // ignore: unused_import import 'package:flutter/material.dart'; part 'paddings.g.dart'; 

Start the code generation Now run flutter pub run build_runner build --delete-conflicting- outputs 

What's the result? MediumAllPadding MediumLeftPadding MediumTopPadding MediumRightPadding MediumBottomPadding MediumHorizontalPadding MediumVerticalPadding MediumLeftTopPadding MediumLeftBottomPadding MediumRightTopPadding MediumRightBottomPadding paddings.g.dart LargeAllPadding LargeLeftPadding LargeTopPadding LargeRightPadding LargeBottomPadding LargeHorizontalPadding LargeVerticalPadding LargeLeftTopPadding LargeLeftBottomPadding LargeRightTopPadding LargeRightBottomPadding 

What's the result? class MediumAllPadding extends Padding { const MediumAllPadding({Key? key, required Widget child}) : super( key: key, padding: const EdgeInsets.all(PADDING_MEDIUM), child: child); } 

Do not add it to your version control system How to use them Just import paddings.dart in your widgets, it also contains all the generated classes created in paddings.g.dart 

Let's deep dive inside paddinger source code! 

Paddinger source code Monorepo with 2 projects: - paddinger - paddinger_annotations 

Paddinger source code ///Annotation used by paddinger to identify PADDING_ constants class Paddinger { const Paddinger(); } ///Helper object for [Paddinger] annotation const paddinger = Paddinger(); paddinger.dart 

Paddinger source code dependencies: analyzer: ^1.5.0 build: ^2.0.0 source_gen: ^1.0.0 recase: ^4.0.0 paddinger_annotations: ^0.1.1 #local development #paddinger_annotations: # path: ../paddinger_annotations/ dev_dependencies: test: 1.16.8 pubspec.yaml 

Paddinger source code builders: paddinger_generator: import: "package:paddinger/paddinger.dart" builder_factories: ["paddingerGenerator"] build_extensions: {".dart": [".paddinger.g.part"]} build.yaml 

Paddinger source code ///Paddinger generator used with [Builder] Builder paddingerGenerator(BuilderOptions options) => SharedPartBuilder([PaddingerGenerator()], 'paddinger_generator'); paddinger.dart 

Paddinger source code class PaddingerGenerator extends GeneratorForAnnotation { @override FutureOr generateForAnnotatedElement( Element element, ConstantReader annotation, BuildStep buildStep) { final constantName = element.name!; validatePaddingConstantName(constantName); final generatedName = toNameForGeneration(constantName); return generatePaddingWidgets(generatedName, constantName); } } paddinger_generator.dart 

Paddinger source code String generatePaddingWidgets(String paddingName, String constantName) { return ''' ${_addStartComment(paddingName)} ${_addAllPadding(paddingName, constantName)} ${_addOnlyPaddings(paddingName, constantName)} ${_addSymmetricPaddings(paddingName, constantName)} ${_addMissingCombinationPaddings(paddingName, constantName)} ${_addEndComment(paddingName)} '''; } 

Paddinger source code String _addAllPadding(String paddingName, String constantName) { return ''' class ${paddingName}AllPadding extends Padding { const ${paddingName}AllPadding({Key? key, required Widget child}) : super( key: key, padding: const EdgeInsets.all($constantName), child: child); } '''; } 

Paddinger source code class MediumAllPadding extends Padding { const MediumAllPadding({Key? key, required Widget child}) : super( key: key, padding: const EdgeInsets.all(PADDING_MEDIUM), child: child); } 

Paddinger source code String _addOnlyPaddings(String paddingName, String constantName) { final onlyPaddingKeys = PaddingDirection.values .map((paddingDirection) => paddingDirection.asPascalCase); final onlyPaddingWidgets = onlyPaddingKeys.map((paddingKey) => ''' class $paddingName${paddingKey}Padding extends Padding { const $paddingName${paddingKey}Padding({Key? key, required Widget child}) : super( key: key, padding: const EdgeInsets.only(${paddingKey.toLowerCase()}: $constantName), child: child); } ''').toList(); return onlyPaddingWidgets.join(); } 

Paddinger source code class MediumLeftPadding extends Padding { const MediumLeftPadding({Key? key, required Widget child}) : super( key: key, padding: const EdgeInsets.only(left: PADDING_MEDIUM), child: child); } class MediumTopPadding extends Padding { const MediumTopPadding({Key? key, required Widget child}) : super( key: key, padding: const EdgeInsets.only(top: PADDING_MEDIUM), child: child); } ///two more classes: MediumRightPadding and MediumBottomPadding 

How can you test the generated code? 

Test the generated code test( 'GIVEN a valid padding constant name, WHEN validatePaddingConstantName(), THEN it returns normally', () { expect( () => validatePaddingConstantName("PADDING_MEDIUM"), returnsNormally); }); test( 'GIVEN a not valid padding constant name, WHEN validatePaddingConstantName(), THEN an exception is thrown', () { expect(() => validatePaddingConstantName("PADDIN_MEDIUM"), throwsA(isA())); }); 

Test the generated code test( 'GIVEN a valid padding constant name, WHEN toNameForGeneration(), THEN a valid name is generated', () { expect(toNameForGeneration("PADDING_MEDIUM"), "Medium"); }); test( 'GIVEN a valid padding constant name with two underscores, WHEN toNameForGeneration(), THEN a valid name is generated', () { expect(toNameForGeneration("PADDING_VERY_LARGE"), "VeryLarge"); }); 

Test the generated code test( 'GIVEN a valid paddingName and a valid constantName, WHEN generatePaddingWidgets(), THEN valid padding widgets are generated', () { expect(generatePaddingWidgets("Medium", "PADDING_MEDIUM"), ''' // ************************************************************************** // START Medium // ************************************************************************** class MediumAllPadding extends Padding { const MediumAllPadding({Key? key, required Widget child}) : super( key: key, padding: const EdgeInsets.all(PADDING_MEDIUM), child: child); } ///Other classes here, this line is not part of the real generated code '''); }); 

Nice helpful tips IDE code completion will be able to: - suggest you all the available Padding classes - transforms TLMP into TopLeftMediumPadding 

Can you generate whatever you want? 

Yes! Don't limit your imagination! 

Thank you! 

Drop a line to [email protected] Get in touch with me https://www.emanuelepapa.dev We are hiring @ ZestOne