spacing_generator 0.4.0+5
spacing_generator: ^0.4.0+5 copied to clipboard
Code generation for spacings in Flutter. Automatically generate SizedBoxes and Paddings from defined sizes.
Spacing Generator #
Motivation #
Using consistent spacing in your app is very important for a good user experience.
Many times, these spacings are reused in many instances of SizedBox or EdgeInsets.
spacing_generator generates different instances of SizedBox and EdgeInsets depending on a
specified set of spacings.
For a spacing static const tiny = 2.0; the following elements will be generated:
- horizontal
SizedBox:SizedBox(width: 2.0) - vertical
SizedBox:SizedBox(height: 2.0) - vertical
EdgeInsets:EdgeInsets.symmetric(vertical: 2.0) - horizontal
EdgeInsets:EdgeInsets.symmetric(horizontal: 2.0) - all
EdgeInsets:EdgeInsets.all(2.0)
They can then easily be used with an extension on BuildContext:
// Paddings (EdgeInsets)
context.paddings
// Spacings (SizedBoxes)
context.spacings
Installation #
spacing_generator depends on these packages to work:
In your pubspec.yaml add the following dependencies:
dependencies:
spacing_generator_annotations: <latest version>
dev_dependencies:
spacing_generator: <latest version>
build_runner: any
Usage #
This package allows to simply generate spacings from a file like
import 'package:spacing_generator_annotation/spacing_generator_annotation.dart';
import 'package:flutter/material.dart'; // don't forget to import material
part 'spacings.g.dart';
@Spacing()
class SpaceValues {
static const tiny = 2.0;
static const small = 4.0;
}
Run the build_runner to generate code:
dart run build_runner build
It creates an extension that allows to use spacings and paddings like:
Widget build(BuildContext context) {
return Padding(
padding: context.paddings.allTiny,
child: Column(
children: [
const Text('Hello'),
context.spacings.horizontalSmall,
const Text('World'),
]
)
);
}
Alternatively, the generated files can also be accessed by instantiating the generated classes directly.
Widget build(BuildContext context) {
final paddings = Paddings();
final spaces = Spaces();
return Padding(
padding: paddings.allTiny,
child: Column(
children: [
const Text('Hello'),
spaces.horizontalSmall,
const Text('World'),
]
)
);
}
For more information see the example in the repository.