-
Notifications
You must be signed in to change notification settings - Fork 29
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'dev' of https://github.com/ShalmonAnandas/mirai into dev
- Loading branch information
Showing
4 changed files
with
137 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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" | ||
} | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 | ||
} | ||
] | ||
} | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 | ||
} |