diff --git a/website/pages/docs/overview/migration.md b/website/pages/docs/overview/migration.md index 399a26686..c02be4a98 100644 --- a/website/pages/docs/overview/migration.md +++ b/website/pages/docs/overview/migration.md @@ -24,6 +24,13 @@ To enhance readability, short aliases and shorthand property/method names are re Decorators' order was previously determined by their addition sequence. Now, we enforce specific ordering but also allow customizable orders. This might cause behavior changes in rare cases. For details, refer to the [decorators guide](https://fluttermix.com/docs/guides/decorators). +### StyledWidgets updates + +#### The new PressableBox + +To provide a more consistent way to use the gesture APIs, we developed a new widget that merges the functionalities of Box and `Pressable`. Thus, the new `PressableBox` can receive a style like a Box and also accept interactions and its variants, similar to a `Pressable`. For more information, see the [PressableBox guide](https://www.fluttermix.com/docs/widgets/pressable-box). +Keep in mind that the ideia is to reserve the old `Pressable` to more advanced cases. + ### Behavior changes #### Decorators diff --git a/website/pages/docs/widgets/flex.mdx b/website/pages/docs/widgets/flex.mdx index d1aa2ea43..c99db2601 100644 --- a/website/pages/docs/widgets/flex.mdx +++ b/website/pages/docs/widgets/flex.mdx @@ -164,16 +164,4 @@ Set the space (gap) between each child in the flex container. ```dart // Set a gap of 8 logical pixels between children. flex.gap(8); -``` - -### **Aliases** - -Shortcuts for creating `FlexSpecAttribute`s with `Row` or `Column` configurations. - -```dart -// Shortcut for setting up a Row attribute. -var myRow = flex.row(); - -// Shortcut for setting up a Column attribute. -var myColumn = flex.column(); -``` +``` \ No newline at end of file diff --git a/website/pages/docs/widgets/icon.mdx b/website/pages/docs/widgets/icon.mdx index 634820baa..5646800b0 100644 --- a/website/pages/docs/widgets/icon.mdx +++ b/website/pages/docs/widgets/icon.mdx @@ -30,7 +30,7 @@ Box( ); ``` -In the above example, the `StyledIcon` widget will inherit the icon size and color style from the `Box` widget. +In the above example, the `StyledIcon` widget will inherit the icon size and color style from the `Box` widget. However, remember that decorators attributes cannot be inherited. ## AnimatedStyledIcon diff --git a/website/pages/docs/widgets/image.mdx b/website/pages/docs/widgets/image.mdx index 531c57caa..5428a1504 100644 --- a/website/pages/docs/widgets/image.mdx +++ b/website/pages/docs/widgets/image.mdx @@ -1,3 +1,5 @@ ## Image -Coming soon. + + The StyledImage is in progress, if you would like to keep up to date with the progress, please follow the StyledImage issue. + diff --git a/website/pages/docs/widgets/pressable-box.mdx b/website/pages/docs/widgets/pressable-box.mdx index 83f2d8559..e697ba6bd 100644 --- a/website/pages/docs/widgets/pressable-box.mdx +++ b/website/pages/docs/widgets/pressable-box.mdx @@ -36,9 +36,9 @@ In the example above, the `PressableBox` will apply a blue background color to t `PressableBox` integrates with various context variant utilities that apply styles based on different widget states and gestures. Here are a few of the interaction states and their corresponding styling hooks: -- `onPress`: Styles applied when the widget is being pressed. -- `onLongPress`: Styles applied when the widget is being long-pressed. +- `onPressed`: Styles applied when the widget is being pressed. +- `onLongPressed`: Styles applied when the widget is being long-pressed. - `onDisabled`: Styles applied when the widget is disabled and therefore non-interactive. - `onEnabled`: Styles applied when the widget is enabled and interactive. -- `onFocus`: Styles applied when the widget gains focus. +- `onFocused`: Styles applied when the widget gains focus. - `onHover`: Styles applied when a pointer has hovered over a widget. diff --git a/website/pages/docs/widgets/text.mdx b/website/pages/docs/widgets/text.mdx index 849531851..5c8414491 100644 --- a/website/pages/docs/widgets/text.mdx +++ b/website/pages/docs/widgets/text.mdx @@ -16,7 +16,7 @@ StyledText( ## Inheritance -The **StyledText** widget has the **inherit** flag true by default. That means that the style attributes will be inherited from the parent widget. +The **StyledText** widget has the **inherit** flag true by default. That means that the style attributes will be inherited from the parent widget. However, remember that decorators attributes cannot be inherited. ```dart Box( @@ -78,6 +78,61 @@ Limit the number of lines for the text block: text.maxLines(2); ``` + +#### **textWidthBasis** + +Determine how text width is measured: + +```dart +// Measure text width based on the longest line +text.textWidthBasis.longestLine(); + +// Measure text width based on the parent container +text.textWidthBasis.parent(); +``` + +#### **textHeightBehavior** + +Define how text height adjustments are made: + +```dart +// Set a specified text height behavior +text.textHeightBehavior(...); // TextHeightBehavior instance +``` + +#### **textDirection** + +Set the reading directionality of the text: + +```dart +// Left-to-right text direction +text.textDirection.ltr(); + +// Right-to-left text direction +text.textDirection.rtl(); +``` + +#### **softWrap** + +Choose whether the text should soft-wrap: + +```dart +// Enable soft wrapping +text.softWrap(true); + +// Disable soft wrapping +text.softWrap(false); +``` + +#### **textScaleFactor** + +Adjust the text scale factor for sizing: + +```dart +// Increase text size by a factor of 1.5 +text.textScaleFactor(1.5); +``` + #### **`style`** Allows to style `TextStyle` attributes efficiently, creating a cohesive and maintainable text styling semantics. @@ -211,60 +266,6 @@ Set the locale for the text, affecting how it's displayed: text.style.locale(Locale('en')); // English locale ``` -#### **textWidthBasis** - -Determine how text width is measured: - -```dart -// Measure text width based on the longest line -text.textWidthBasis.longestLine(); - -// Measure text width based on the parent container -text.textWidthBasis.parent(); -``` - -#### **textHeightBehavior** - -Define how text height adjustments are made: - -```dart -// Set a specified text height behavior -text.textHeightBehavior(...); // TextHeightBehavior instance -``` - -#### **textDirection** - -Set the reading directionality of the text: - -```dart -// Left-to-right text direction -text.textDirection.ltr(); - -// Right-to-left text direction -text.textDirection.rtl(); -``` - -#### **softWrap** - -Choose whether the text should soft-wrap: - -```dart -// Enable soft wrapping -text.softWrap(true); - -// Disable soft wrapping -text.softWrap(false); -``` - -#### **textScaleFactor** - -Adjust the text scale factor for sizing: - -```dart -// Increase text size by a factor of 1.5 -text.textScaleFactor(1.5); -``` - ### **Directives** Transform text data through various case operations: