dimensions_theme 0.0.1 dimensions_theme: ^0.0.1 copied to clipboard
A theme extension to define app dimensions such as blank spaces or paddings inside your theme.
📏 dimensions_theme #
dimensions_theme is a flutter package that introduces the concept of a "Dimensions" theme, which allows for the centralization of app dimensions such as padding, margins, and border radii. This approach offers the benefit of enabling dynamic changes to dimensions based on factors like screen size and user settings. Furthermore, the package includes pre-built widgets and utilities for implementing the theme in a declarative manner. Defining dimensions in a centralized location facilitates global changes and helps maintain a consistent aesthetic throughout the app, potentially saving time and effort in the development process.
Core concept #
The Dimensions
class let you define a set of dimensions related to a specific property family. Currently, there are four such families: spaces, insets, radius, and borderWidth. Each of these families has seven tokens that represent a specific size: largest, larger, large, medium, small, smaller, and smallest. This set of tokens is intended to provide sufficient granularity and flexibility to meet most design needs.
In addition to the Dimensions class, this package provides specialized widgets and utilities that match one of the dimensions tokens. These utilities are designed to make the code more semantically relevant and to promote a declarative style.
Space[Size]
The Space widget is an empty SizedBox that reads its size value from the Dimensions
class. There is one Space[Size]
widget for each dimensions token. The Space widget also provides .w
and .h
constructors to specify size in only one direction, width or height respectively.
EdgeInsets[Size]
The EdgeInsets
utility class is used to construct EdgeInsets objects with values read from the Dimensions
theme. There is one EdgeInsets[Size]
class for each dimensions token. The EdgeInsets class provides methods for creating various configurations of EdgeInsets, such as all, left, right, top, bottom, horizontal, and vertical.
Usage #
Add [Dimensions] extension to your theme
import 'package:dimensions_theme/dimensions_theme.dart';
...
/// Defines your dimensions
final spaceDimensions = SpaceDimensions(
largest: 55,
larger: 40,
large: 30,
medium: 20,
small: 15,
smaller: 10,
smallest: 5,
),
/// Use from constructor to auto-fill missing values
/// if you don't need all the tokens
final insetsDimensions = InsetDimensions.from(
large: 22,
medium: 20,
small: 18,
);
final borderWidthsDimensions = BorderWidthDimensions(...),
final radiiDimensions = RadiusDimensions(...),
MaterialApp(
...
theme: ThemeData(
extensions: [
Dimensions( /// Register the Dimensions theme extension
spaces: spaceDimensions,
insets: insetsDimensions,
borderWidth: borderWidths,
radii: radiusDimensions,
),
],
),
)
Direct usage
final double spaceSmall = Dimensions.of(context).spaces.small;
final Radius radiusLarge = Dimensions.of(context).radii.large;
Blank space widgets
SpaceLarger(), // SizedBox.square(dimension: Dimensions.of(context).spaces.Larger)
SpaceMedium.w(), // SizedBox(width: Dimensions.of(context).spaces.medium)
SpaceSmallest.h(), // SizedBox(height: Dimensions.of(context).spaces.smallest)
EdgeInsets
// EdgeInsets.all(Dimensions.of(context).insets.smallest)
EdgeInsetsSmallest.of(context).all
// EdgeInsets.only(left: Dimensions.of(context).insets.smaller)
EdgeInsetsSmaller.of(context).left
EdgeInsetsSmall.of(context).top
EdgeInsetsMedium.of(context).right
EdgeInsetsLarge.of(context).bottom
// EdgeInsets.symmetric(horizontal: Dimensions.of(context).insets.large)
EdgeInsetsLarger.of(context).vertical
// EdgeInsets.horizontal(Dimensions.of(context)horizontal.insets.largest)
EdgeInsetsLargest.of(context).horizontal
EdgeInsets composition
Padding(
padding: EdgeInsetsComposer.of(context).only(
left: EdgeInsetsLargest(),
top: EdgeInsetsLarge(),
right: EdgeInsetsSmall(),
),
),
Padding(
padding: EdgeInsetsComposer.of(context).symmetric(
horizontal: EdgeInsetsLarge(),
vertical: EdgeInsetsSmall(),
),
),
Contribution | Bug report | Feature request #
Please fill and issue on github