Skip to content

Commit

Permalink
Update docs
Browse files Browse the repository at this point in the history
  • Loading branch information
@carllosnc
carllosnc committed Aug 14, 2024
1 parent 9199347 commit a193e50
Show file tree
Hide file tree
Showing 12 changed files with 117 additions and 19 deletions.
6 changes: 3 additions & 3 deletions docs/vw_box.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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 |
Expand All @@ -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 |

Expand Down
2 changes: 1 addition & 1 deletion docs/vw_button.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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` |
Expand Down
3 changes: 2 additions & 1 deletion docs/vw_column.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
## Parameters

| Property | Type | Description | Default |
| --------------------- | ------------------ | ------------------------------------------------------ | -------------------------- |
|-----------------------|--------------------|--------------------------------------------------------|----------------------------|
| `children` | List<Widget> | 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)` |
Expand All @@ -30,3 +30,4 @@ VWColumn(
horizontalAlignment: CrossAxisAlignment.center,
verticalAlignment: MainAxisAlignment.spaceAround,
)
```
2 changes: 1 addition & 1 deletion docs/vw_if.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 |
4 changes: 2 additions & 2 deletions docs/vw_modal.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,15 @@
## 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). |

## Methods

| Method | Description |
| ----------------- | ------------------------------- |
|-------------------|---------------------------------|
| `VWModal.open()` | Opens the modal on the screen. |
| `VWModal.close()` | Closes the modal on the screen. |

Expand Down
4 changes: 2 additions & 2 deletions docs/vw_page.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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. |
Expand Down
2 changes: 1 addition & 1 deletion docs/vw_reveal.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 |
Expand Down
2 changes: 1 addition & 1 deletion docs/vw_row.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
## Parameters

| Property | Type | Description | Default |
| --------------------- | ------------------ | ------------------------------------------------------------------------- | -------------------------- |
|-----------------------|--------------------|---------------------------------------------------------------------------|----------------------------|
| `children` | List<Widget> | 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)` |
Expand Down
96 changes: 96 additions & 0 deletions docs/vw_screen_size_extension.md
View file
Original file line number Diff line number Diff line change
@@ -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<int, dynamic>` 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<double, dynamic>` | `dynamic` | Map of breakpoints and values that will be returned. | `true` |

7 changes: 4 additions & 3 deletions docs/vw_select.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,22 +3,22 @@
Select option widget based on bottom sheet.

| Property | Type | Description |
| --------------------- | -------------------------------- | ----------------------------------------------------------------------- |
|-----------------------|----------------------------------|-------------------------------------------------------------------------|
| `inputDecoration` | InputDecoration? | The decoration to show around the dropdown button. |
| `options` | List<VWSelectOption> | The list of options to display in the dropdown menu. |
| `onSelected` | Function(dynamic value) | Called when the user selects an option. |
| `title` | String | The title of the dropdown button. |
| `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. |
Expand Down Expand Up @@ -64,3 +64,4 @@ VWSelect(
return null;
},
);
```
6 changes: 3 additions & 3 deletions docs/vw_text.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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. |
Expand All @@ -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:**

Expand All @@ -57,6 +57,6 @@ Here are some examples of how the markup syntax can be used:
- `<u>underline</u>`: This will underline the text.
- `<m>mark</m>`: This will mark the text with a different color.
- `<d>deleted</d>`: This will make the text deleted.
- `<o>overline</o>`: This will make the text overline.
- `<o>overline</o>`: This will make the text over line.
- `<pc>primary color</pc>`: This will use the primary color for the text.
- `<uc>uppercase</uc>`: This will make the text uppercase.
2 changes: 1 addition & 1 deletion docs/vw_timepicker.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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. |
Expand Down

0 comments on commit a193e50

Please sign in to comment.