From a193e505d6d2efa9953742869bb936015efaaafc Mon Sep 17 00:00:00 2001 From: Carlos Costa Date: Wed, 14 Aug 2024 16:10:06 -0300 Subject: [PATCH] Update docs --- docs/vw_box.md | 6 +- docs/vw_button.md | 2 +- docs/vw_column.md | 3 +- docs/vw_if.md | 2 +- docs/vw_modal.md | 4 +- docs/vw_page.md | 4 +- docs/vw_reveal.md | 2 +- docs/vw_row.md | 2 +- docs/vw_screen_size_extension.md | 96 ++++++++++++++++++++++++++++++++ docs/vw_select.md | 7 ++- docs/vw_text.md | 6 +- docs/vw_timepicker.md | 2 +- 12 files changed, 117 insertions(+), 19 deletions(-) create mode 100644 docs/vw_screen_size_extension.md diff --git a/docs/vw_box.md b/docs/vw_box.md index 3d1f8f5..974c9f1 100644 --- a/docs/vw_box.md +++ b/docs/vw_box.md @@ -5,7 +5,7 @@ The `VWBox` is a custom widget that allows you to create a box with a background ## Features - Solid color -- Gradiend color +- Gradient color - Shadow - Blur effect with gradient and images - Image background @@ -50,7 +50,7 @@ VWBox( ## Properties | Property | Type | Description | -| ----------------- | --------------- | ---------------------------------------- | +|-------------------|-----------------|------------------------------------------| | `backgroundImage` | `ImageProvider` | The image to be used as background | | `height` | `double` | The height of the box | | `width` | `double` | The width of the box | @@ -62,7 +62,7 @@ VWBox( | `padding` | `EdgeInsets` | The padding of the box | | `margin` | `EdgeInsets` | The margin of the box | | `borderRadius` | `BorderRadius` | The border radius of the box | -| `splashColor` | `Color` | The splash color trigged after tap event | +| `splashColor` | `Color` | The splash color trigger after tap event | | `border` | `Border` | The border of the box | | `child` | `Widget` | The child of the box | diff --git a/docs/vw_button.md b/docs/vw_button.md index f1d99ed..24688d8 100644 --- a/docs/vw_button.md +++ b/docs/vw_button.md @@ -5,7 +5,7 @@ ## Properties | Property | Type | Description | Default Value | -| --------------------- | ----------------- | ----------------------------------------------------------------- | ---------------------------------------- | +|-----------------------|-------------------|-------------------------------------------------------------------|------------------------------------------| | `label` | String | The text that is displayed on the button. | `'Button'` | | `color` | Color | The background color of the button. | `Theme.of(context).colorScheme.primary` | | `gradient` | Gradient | The gradient of the button. | `null` | diff --git a/docs/vw_column.md b/docs/vw_column.md index ebdead5..5317eba 100644 --- a/docs/vw_column.md +++ b/docs/vw_column.md @@ -5,7 +5,7 @@ ## Parameters | Property | Type | Description | Default | -| --------------------- | ------------------ | ------------------------------------------------------ | -------------------------- | +|-----------------------|--------------------|--------------------------------------------------------|----------------------------| | `children` | List | The widgets to display in the column. | `[]` | | `gap` | double | The gap between the widgets in the column. | `0` | | `padding` | EdgeInsetsGeometry | The padding around the column. | `EdgeInsets.all(0)` | @@ -30,3 +30,4 @@ VWColumn( horizontalAlignment: CrossAxisAlignment.center, verticalAlignment: MainAxisAlignment.spaceAround, ) +``` diff --git a/docs/vw_if.md b/docs/vw_if.md index 818a754..57cd14a 100644 --- a/docs/vw_if.md +++ b/docs/vw_if.md @@ -14,7 +14,7 @@ VWIf( ## Properties | Property | Type | Description | Default | -| ----------- | --------- | ------------------------------------------------------------------------- | -------- | +|-------------|-----------|---------------------------------------------------------------------------|----------| | `condition` | `bool` | A boolean value that determines whether the `ifTrue` widget is displayed. | required | | `ifTrue` | `Widget` | The widget that is displayed when the `condition` is true. | required | | `ifFalse` | `Widget?` | The widget that is displayed when the `condition` is false. | null | diff --git a/docs/vw_modal.md b/docs/vw_modal.md index a4afca1..44bb659 100644 --- a/docs/vw_modal.md +++ b/docs/vw_modal.md @@ -5,7 +5,7 @@ ## Parameters | Property | Type | Description | -| -------------- | -------------- | ---------------------------------------------------------- | +|----------------|----------------|------------------------------------------------------------| | `context` | `BuildContext` | The build context of the page. | | `body` | `Widget` | The body of the dialog. | | `insetPadding` | `EdgeInsets` | The padding of the dialog. Defaults to EdgeInsets.all(30). | @@ -13,7 +13,7 @@ ## Methods | Method | Description | -| ----------------- | ------------------------------- | +|-------------------|---------------------------------| | `VWModal.open()` | Opens the modal on the screen. | | `VWModal.close()` | Closes the modal on the screen. | diff --git a/docs/vw_page.md b/docs/vw_page.md index 3a50ba6..50034a8 100644 --- a/docs/vw_page.md +++ b/docs/vw_page.md @@ -5,13 +5,13 @@ A sealed class that provides a method to open a new page. VWPage is a floating page, which means that it is not a full-screen page, but a page that floats above the current page. | Method | Description | -| ------ | ----------------- | +|--------|-------------------| | `open` | Opens a new page. | ## open method | Parameter | Type | Description | -| --------- | ------------ | ------------------------------------------------------------------------------------- | +|-----------|--------------|---------------------------------------------------------------------------------------| | `appBar` | AppBar | The header of the page. | | `context` | BuildContext | The BuildContext of the page. | | `body` | Widget | The body of the page. | diff --git a/docs/vw_reveal.md b/docs/vw_reveal.md index c91411e..701d6af 100644 --- a/docs/vw_reveal.md +++ b/docs/vw_reveal.md @@ -5,7 +5,7 @@ ## Properties | Property | Description | Default | -| ----------- | ----------------------------------------------------------------------------------------- | ----------------------- | +|-------------|-------------------------------------------------------------------------------------------|-------------------------| | `child` | The widget that will be revealed. This is a required property. | N/A | | `direction` | The direction from which the child widget will be revealed. This is an optional property. | `VWRevealDirection.top` | | `delay` | The delay before the reveal animation starts. This is an optional property. | N/A | diff --git a/docs/vw_row.md b/docs/vw_row.md index c9b53f2..c66a226 100644 --- a/docs/vw_row.md +++ b/docs/vw_row.md @@ -5,7 +5,7 @@ ## Parameters | Property | Type | Description | Default | -| --------------------- | ------------------ | ------------------------------------------------------------------------- | -------------------------- | +|-----------------------|--------------------|---------------------------------------------------------------------------|----------------------------| | `children` | List | The widgets to display in the row. | `[]` | | `gap` | double | The gap between the widgets in the row. | `0` | | `padding` | EdgeInsets | The padding around the row. | `EdgeInsets.all(0)` | diff --git a/docs/vw_screen_size_extension.md b/docs/vw_screen_size_extension.md new file mode 100644 index 0000000..385ff56 --- /dev/null +++ b/docs/vw_screen_size_extension.md @@ -0,0 +1,96 @@ +# VWScreenSizeExtension + +VW Screen Size Extension provide some useful methods to with responsiveness in flutter. + +Example: +- Get screen width por height applying a size as percentage and an offset. +- Get size of parent widget applying a size as percentage and an offset. +- Apply breakpoints based on screen width. + +Two objects are extended: `BuildContext` and `BoxConstraints`. + +## `context.screenWidth()` and `context.screenHeight()` + +Both methods are provided by the `BuildContext` object. + +```dart +Container( + width: context.screenWidth({ size: 0.5, offset: 100 }), + height: context.screenHeight({ size: 0.4, offset: 50 }), +) +``` + +**context.screenWidth({ size, offset })** + +| Property | Type | Description | Default | +|----------|----------|-----------------------------------------|---------| +| `size` | `double` | The size of the widget as a percentage. | `1` | +| `offset` | `double` | The value to offset the size. | `0` | + +**context.screenHeight({ size, offset })** + +| Property | Type | Description | Default | +|----------|----------|-----------------------------------------|---------| +| `size` | `double` | The size of the widget as a percentage. | `1` | +| `offset` | `double` | The value to offset the size. | `0` | + +## `boxWidth()` and `boxHeight()` + +These methods are provided by the `BoxConstraints` object. + +```dart +LayoutBuilder( + builder: (context, constraints) { + return VWRow( + horizontalAlignment:MainAxisAlignment.spaceBetween, + children: [ + Container( + color: Colors.black, + width: constraints.boxWidth(size: 0.5, offset: 10), + height: constraints.boxHeight(size: 0.5, offset: 10), + ), + ], + ); + }, +) +``` + +**boxWidth({ size, offset })** + +| Property | Type | Description | Default | +|----------|----------|-----------------------------------------|---------| +| `size` | `double` | The size of the widget as a percentage. | `1` | +| `offset` | `double` | The value to offset the size. | `0` | + +**boxHeight({ size, offset })** + +| Property | Type | Description | Default | +|----------|----------|-----------------------------------------|---------| +| `size` | `double` | The size of the widget as a percentage. | `1` | +| `offset` | `double` | The value to offset the size. | `0` | + +## `context.breakpoints()` + +These method are provided by the `BuildContext` object. It receives a `Map` as parameter, +the key is the screen breakpoint and the value will be returned when the breakpoint is +matched with the current screen width. + +```dart +Scaffold( + backgroundColor: context.breakPoint({ + 1200: Colors.red.shade200, + 1000: Colors.blue.shade200, + 800: Colors.pink.shade200, + 600: Colors.yellow.shade200, + 400: Colors.purple.shade200, + 0: Colors.grey.shade200, + }) +) +``` + +## `context.breakPoint()` + +| Property | Type | Description | Required | +|------------------------|-----------|------------------------------------------------------|----------| +| `Map` | `dynamic` | Map of breakpoints and values that will be returned. | `true` | + diff --git a/docs/vw_select.md b/docs/vw_select.md index 9e580aa..22e21b8 100644 --- a/docs/vw_select.md +++ b/docs/vw_select.md @@ -3,7 +3,7 @@ Select option widget based on bottom sheet. | Property | Type | Description | -| --------------------- | -------------------------------- | ----------------------------------------------------------------------- | +|-----------------------|----------------------------------|-------------------------------------------------------------------------| | `inputDecoration` | InputDecoration? | The decoration to show around the dropdown button. | | `options` | List | The list of options to display in the dropdown menu. | | `onSelected` | Function(dynamic value) | Called when the user selects an option. | @@ -11,14 +11,14 @@ Select option widget based on bottom sheet. | `titleTextStyle` | TextStyle? | The style to use for the title text. | | `headerBoxDecoration` | BoxDecoration? | The decoration to show around the header of the dropdown menu. | | `validator` | String? Function(String? value)? | Called when the user submits the form. | -| `borderRadius` | Double | The border radius of top rigth and top left corner of the bottom sheet. | +| `borderRadius` | Double | The border radius of top right and top left corner of the bottom sheet. | ## VWSelectOption A class that represents an option in the dropdown menu. | Property | Type | Description | -| ------------- | -------- | ----------------------------------------------------------------------- | +|---------------|----------|-------------------------------------------------------------------------| | `value` | dynamic | The value of the option. | | `listTile` | ListTile | The ListTile to display in the dropdown menu. | | `displayText` | String | The text to display in the dropdown button when the option is selected. | @@ -64,3 +64,4 @@ VWSelect( return null; }, ); +``` \ No newline at end of file diff --git a/docs/vw_text.md b/docs/vw_text.md index dd13c07..26beaa9 100644 --- a/docs/vw_text.md +++ b/docs/vw_text.md @@ -28,7 +28,7 @@ class MyWidget extends StatelessWidget { ## Properties | Property | Type | Description | -| ------------ | ------------ | ------------------------------------ | +|--------------|--------------|--------------------------------------| | text | `String` | The text to display. | | primaryColor | `Color?` | The primary color for styled words. | | markColor | `Color?` | The color used to mark styled words. | @@ -40,7 +40,7 @@ The `VWText` widget supports markup syntax to style specific words in the text. ## Markup Syntax -The markup syntax is a combination of HTML tags and special characters. The tags are enclosed in angle brackets (`<` and `>`) and can be used to apply different styles to the text. Before marking a word or phrase, you need to enclose it in square brackes `[]` and add the appropriate tag. +The markup syntax is a combination of HTML tags and special characters. The tags are enclosed in angle brackets (`<` and `>`) and can be used to apply different styles to the text. Before marking a word or phrase, you need to enclose it in square brakes `[]` and add the appropriate tag. **Example:** @@ -57,6 +57,6 @@ Here are some examples of how the markup syntax can be used: - `underline`: This will underline the text. - `mark`: This will mark the text with a different color. - `deleted`: This will make the text deleted. -- `overline`: This will make the text overline. +- `overline`: This will make the text over line. - `primary color`: This will use the primary color for the text. - `uppercase`: This will make the text uppercase. diff --git a/docs/vw_timepicker.md b/docs/vw_timepicker.md index 05319c1..6196bda 100644 --- a/docs/vw_timepicker.md +++ b/docs/vw_timepicker.md @@ -3,7 +3,7 @@ A StatefulWidget that provides a customizable time picker. | Property | Type | Description | -| ------------------ | ---------------------------- | -------------------------------------------------- | +|--------------------|------------------------------|----------------------------------------------------| | `onChanged` | `Function(TimeOfDay)` | Called when the user changes the time. | | `validator` | `String? Function(String?)?` | Called when the user submits the form. | | `decoration` | `InputDecoration?` | The decoration to show around the text field. |