Skip to content

Commit

Permalink
Merge branch 'dev' of https://github.com/ShalmonAnandas/mirai into dev
Browse files Browse the repository at this point in the history
  • Loading branch information
Shalmon Anandas committed Jan 16, 2025
2 parents 63dae1a + 26ab207 commit 0581fdc
Show file tree
Hide file tree
Showing 4 changed files with 137 additions and 3 deletions.
6 changes: 3 additions & 3 deletions website/docs/intro.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,9 @@ The Miraiverse consists of the following packages:

| Package | Description | Link |
|---------|-------------|----------------------------------------------------------------------------------------------------|
| [mirai](https://github.com/Securrency-OSS/mirai/tree/dev/packages/mirai) | The core package that provides the foundation for building server-driven UIs in Flutter. | [![pub package](https://img.shields.io/pub/v/mirai.svg)](https://pub.dev/packages/mirai) |
| [mirai_framework](https://github.com/Securrency-OSS/mirai/tree/dev/packages/mirai_framework) | A framework that extends the functionality of the core package and provides additional features for building server-driven UIs. | [![pub package](https://img.shields.io/pub/v/mirai_framework.svg)](https://pub.dev/packages/mirai_framework) |
| [mirai_webview](https://github.com/Securrency-OSS/mirai/tree/dev/packages/mirai_webview) | A package that enables you to embed web views in your server-driven UIs. | [![pub package](https://img.shields.io/pub/v/mirai_webview.svg)](https://pub.dev/packages/mirai_webview) |
| [mirai](https://github.com/BuildMirai/mirai/tree/dev/packages/mirai) | The core package that provides the foundation for building server-driven UIs in Flutter. | [![pub package](https://img.shields.io/pub/v/mirai.svg)](https://pub.dev/packages/mirai) |
| [mirai_framework](https://github.com/BuildMirai/mirai/tree/dev/packages/mirai_framework) | A framework that extends the functionality of the core package and provides additional features for building server-driven UIs. | [![pub package](https://img.shields.io/pub/v/mirai_framework.svg)](https://pub.dev/packages/mirai_framework) |
| [mirai_webview](https://github.com/BuildMirai/mirai/tree/dev/packages/mirai_webview) | A package that enables you to embed web views in your server-driven UIs. | [![pub package](https://img.shields.io/pub/v/mirai_webview.svg)](https://pub.dev/packages/mirai_webview) |


## Installation
Expand Down
40 changes: 40 additions & 0 deletions website/docs/widgets/image.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
# Image

The `Image` widget allows you to display an image in your Flutter app using JSON. It supports images from multiple sources, including assets, files, and network URLs, and provides customization options such as alignment, color, width, height, and fit.

To learn more about the equivalent Flutter widgets and their properties, refer to the [official Flutter documentation for Image](https://api.flutter.dev/flutter/widgets/Image-class.html).

## Properties

| Property | Type | Description |
| ----------- | ---------------- | --------------------------------------------------------------------------------------------------------- |
| `src` | `String` | The source of the image. For example, a URL for network images, file path for file images, or asset path. |
| `alignment` | `MiraiAlignment` | The alignment of the image within its container. Defaults to `MiraiAlignment.center`. |
| `imageType` | `MiraiImageType` | The type of the image source: `file`, `network`, or `asset`. Defaults to `MiraiImageType.network`. |
| `color` | `String?` | The color to blend with the image, provided in hex format (e.g., `#FF0000` for red). |
| `width` | `double?` | The width of the image in logical pixels. |
| `height` | `double?` | The height of the image in logical pixels. |
| `fit` | `BoxFit?` | How the image should be inscribed into the space allocated during layout. |

## Enum: MiraiImageType

| Value | Description |
| --------- | ------------------------------------------- |
| `file` | Load the image from a local file. |
| `network` | Load the image from a network URL. |
| `asset` | Load the image from Flutter's asset bundle. |

## Example JSON

```json
{
"type": "image",
"src": "https://example.com/image.png",
"alignment": "center",
"imageType": "network",
"color": "#FFFFFF",
"width": 200.0,
"height": 100.0,
"fit": "contain"
}
```
43 changes: 43 additions & 0 deletions website/docs/widgets/row.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
# Row

Mirai row allows you to build the Flutter row widget using JSON.
To know more about the row widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/widgets/Row-class.html).

## Properties

| Property | Type | Description |
| -------- | ----------------------- | ------------------------------------ |
| mainAxisAlignment | `MainAxisAlignment` | How the children should be placed along the main axis. |
| crossAxisAlignment | `CrossAxisAlignment` | How the children should be placed along the cross axis. |
| mainAxisSize | `MainAxisSize` | How much space should be occupied in the main axis. |
| textDirection | `TextDirection` | Determines the order to lay children out horizontally and how to interpret start and end in the horizontal direction. |
| spacing | `double` | How much space to place between children in the main axis. |
| children | `List<Map<String,dynamic>>` | The widgets below this widget in the tree. |

## Example JSON

```json
{
"type": "row",
"mainAxisAlignment": "center",
"crossAxisAlignment": "center",
"spacing": 12,
"children": [
{
"type": "image",
"src": "https://images.pexels.com/photos/2718416/pexels-photo-2718416.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
"width": 100
},
{
"type": "image",
"src": "https://images.pexels.com/photos/121629/pexels-photo-121629.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
"width": 100
},
{
"type": "image",
"src": "https://images.pexels.com/photos/1414642/pexels-photo-1414642.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
"width": 100
}
]
}
```
51 changes: 51 additions & 0 deletions website/docs/widgets/text_field.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
# Mirai TextField

The Mirai TextField allows you to build a Flutter text field widget using JSON. To know more about the text field widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/material/TextField-class.html).

## Properties

| Property | Type | Description |
|----------------------|-----------------------------|-----------------------------------------------------------------------------|
| decoration | `MiraiInputDecoration?` | The decoration to show around the text field. |
| initialValue | `String` | The initial value to be set in the text field. |
| keyboardType | `MiraiTextInputType?` | The type of keyboard to use for editing the text. |
| textInputAction | `TextInputAction?` | The action button to use for the keyboard. |
| textCapitalization | `TextCapitalization` | How the text should be capitalized. |
| style | `MiraiTextStyle?` | The style to use for the text being edited. |
| textAlign | `TextAlign` | How the text should be aligned horizontally. |
| textAlignVertical | `MiraiTextAlignVertical?` | How the text should be aligned vertically. |
| textDirection | `TextDirection?` | The direction in which the text flows. |
| readOnly | `bool` | Whether the text field is read-only. |
| showCursor | `bool?` | Whether to show the cursor. |
| expands | `bool` | Whether the text field should expand to fill its parent. |
| autofocus | `bool` | Whether the text field should focus itself if nothing else is already focused. |
| obscuringCharacter | `String` | The character to use when obscuring text. |
| maxLines | `int?` | The maximum number of lines for the text to span. |
| minLines | `int?` | The minimum number of lines for the text to span. |
| maxLength | `int?` | The maximum number of characters to allow in the text field. |
| obscureText | `bool` | Whether to hide the text being edited. |
| enableSuggestions | `bool` | Whether to show input suggestions as the user types. |
| enabled | `bool?` | Whether the text field is enabled. |
| cursorWidth | `double` | The width of the cursor. |
| cursorHeight | `double?` | The height of the cursor. |
| cursorColor | `String?` | The color of the cursor. |
| hintText | `String?` | The hint text to display when the text field is empty. |
| inputFormatters | `List<MiraiInputFormatter>` | The list of input formatters to apply to the text field. |

## Example JSON

```json
{
"type": "textField",
"initialValue": "Enter text here",
"decoration": {
"hintText": "Enter your name"
},
"style": {
"color": "#000000",
"fontSize": 16.0
},
"textAlign": "center",
"obscureText": false,
"maxLength": 50
}

0 comments on commit 0581fdc

Please sign in to comment.