Container

The container component that can be used to apply border, padding, constraints or decoration to its child.

Examples

Simple container

The most simple container will just wrap around a component. Here, your container is around the text component.

{
    "type": "container",
    "child": {
        "type": "text",
        "value": "Text inside a container",
    }
}

Container with padding

You can configure a container to let some space between your components with the padding or margin properties.

{
    "type": "container",
    "padding": {
        "top": 8,
        "left": 8,
        "bottom": 8,
        "right": 8
    },
    "child": {
        "type": "text",
        "value": "Text inside a container with padding"
    }
}

Container with border

You can add some styles properties to customize the look of your container. This allow you to create any design for your apps.

{
    "type": "container",
    // We use a width of 3 for each side of the border and a blue color
    "border": {
        "top": {"width": 3, "color": 0xFF36D8F1},
        "left": {"width": 3, "color": 0xFF36D8F1},
        "bottom": {"width": 3, "color": 0xFF36D8F1},
        "right": {"width": 3, "color": 0xFF36D8F1},
    },
    "child": {
        "type": "text",
        "value": "Text inside a container with border"
    }
}

Container with constraints

You can override the default constraints of your container. Here we set the size of our container to 100x100 pixels instead of using the parent component's size.

{
    "type": "container",
    "decoration": {"color": 0xFFFF0000},
    "constraints": {
        "minWidth": 100,
        "maxWidth": 100,
        "minHeight": 100,
        "maxHeight": 100,
    },
    "child": {
        "type": "text",
        "value": "Text inside a 100x100 container"
    }
},

Container with decoration

border is not enough ? You can provide more flexible and precise style properties to your component.

{
    "type": "container",
    "decoration": {
        "color": 0xFFE0F7F4,
        "borderRadius": {
            "topLeft": {
                "x": 10,
                "y": 10,
            },
            "bottomRight": {
                "x": 10,
                "y": 10,
            },
        },
        "boxShadow": {
            "color": 0x42000000,
            "blurRadius": 3,
            "spreadRadius": 3,
            "offset": {"dx": 5, "dy": 2}
        }
    },
    "child": {
        "type": "text",
        "value": "Text inside a container with decoration"
    }
}

Properties

Attribute	Description	Type
_type	The identifier of the component	container
alignment	The alignment to use.	string center bottomCenter bottomLeft bottomRight centerLeft centerRight topCenter topLeft topRight
border	Element of type Border	Border
child	Any component	Component
constraints	Element of type BoxConstraints	BoxConstraints
decoration	Element of type BoxDecoration	BoxDecoration
padding	Element of type Padding	Padding