Slides used during my talk at droidcon London 2021 https://www.droidcon.com/2021/11/22/supercharge-flutter-declarative-ui-with-code-generation/

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

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

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

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

5. 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

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

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

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

9. How to create these
widgets?

10. Paddinger

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

12. 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;

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

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

15. 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

16. 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);
}

17. 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

18. Let's deep dive inside
paddinger source code!

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

20. 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

21. 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

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

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

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

25. 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)}
''';
}

26. 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);
}
''';
}

27. 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);
}

28. 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();
}

29. 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

30. How can you test the
generated code?

31. 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<Exception>()));
});

32. 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");
});

33. 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
''');
});

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

35. Can you generate
whatever you want?

36. Yes!
Don't limit your
imagination!

37. Thank you!

38. Drop a line to info@zest.one
Get in touch with me
https://www.emanuelepapa.dev
We are hiring @ ZestOne