dimensions_theme

Description:

dimensions theme

📏 dimensions_theme #
dimensions_theme provides a theme extension to easily define and access app dimensions such as blank spaces, padding, border radius, and other dimensions within the Flutter theme.
Define your dimensions #
// Uses tokens that best fit your project needs. You can also use multiple enums
enum Dimension {
xlarge,
large,
medium,
small,
xsmall,
}

...

MaterialApp(
theme: ThemeData(
extensions: const [
DimensionsTheme({
Dimension.xlarge: 20,
Dimension.large: 16,
Dimension.medium: 12,
Dimension.small: 8,
Dimension.xsmall: 4,
}),
],
),
);
copied to clipboard
Uses multiple enum for dimensions #
The Dimensions theme extension supports using multiple enums as dimension tokens.
This can be useful if you want to give different kinds of dimensions value their own enum.
enum Space {
xlarge,
large,
medium,
small,
xsmall,
}

enum Padding {
xlarge,
large,
medium,
small,
xsmall,

screen,
}

...

MaterialApp(
theme: ThemeData(
extensions: const [
DimensionsTheme({
Space.xlarge: 20,
Space.large: 16,
Space.medium: 12,
Space.small: 8,
Space.xsmall: 4,

Padding.xlarge: 20,
Padding.large: 16,
Padding.medium: 12,
Padding.small: 8,
Padding.xsmall: 4,
Padding.screen: 20,
}),
],
),
);
copied to clipboard
Consume dimensions values #
You can access any dimension value using the get:
Dimensions.of(context).get(Dimension.small);
copied to clipboard
Additionally, this package provides helpers to make it easier to work with defined dimensions.
Padding #
The padding context extension constructs EdgeInsets using the values defined in the dimensions theme for a given dimension token.
Padding(
padding: context.padding.all(Dimension.small)
child: ...
)
copied to clipboard
This extension provides counterparts to all EdgeInsets constructors but uses Dimension tokens instead of raw double values.
context.padding.all(Dimension.small)

context.padding.symmetric(
horizontal: Dimension.medium,
vertical: Dimensions.small,
)

context.padding.only(
left: Dimension.large
top: Dimension.large,
)
copied to clipboard
Blank spaces #
The Space widget creates a SizedBox with the values defined in the dimensions theme for a given dimension token.
Column(
children: [
SomeWidget(),
Space(Dimensions.small),
SomeWidget(),
]
)
copied to clipboard
Alternatively, you can use the SpaceDimensionsMixin to construct Space widgets directly from your tokens:
/// Add `SpaceDimensionsMixin` to your dimension token responsible for spaces
enum Spaces with SpaceDimensionsMixin {
large,
medium
small,
}

...

Column(
children: [
SomeWidget(),
Spaces.small(),
SomeWidget(),
]
)
copied to clipboard
All space widgets come with .w and .h constructors to restrict the blank space in one axis, respectively width and height.
Space.h(Dimensions.small)
Space.w(Dimensions.small)

Spaces.small.h()
Spaces.small.w()
copied to clipboard
Border radius #
The radius context extension constructs Radius using the values defined in the dimensions theme for a given dimension token.
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
context.radius.circular(Dimensions.large),
),
),
)
copied to clipboard
This extension provides counterparts to all Radius constructors but uses Dimension tokens instead of raw double values.
context.radius.elliptical(Dimensions.large);
context.radius.circular(Dimensions.small, Dimensions.large);
copied to clipboard
The extension also provides a counterpart to BorderRadius.circular().
Container(
decoration: BoxDecoration(
borderRadius: borderRadius.circular(Dimensions.large),
),
)
copied to clipboard