automatic return to the line in a text type component

[ClementGld]

``we must be able to return to the line when the text component take the total size of the flex in a text type component.
Actual : the value of a text component is displayed entirely on one line and the other block beside it must be taken out of the screen

in this picture we see the normal behavior of a text component

in this picture we can see the block exercice 3 go out of the screen

                type: "flex",
                spacing: 2,
                direction: "col",
                padding: { top: 2, bottom: 2, right: 2, left: 2 },
                children: [{
                    type: "styledContainer",
                    color: 0xFFFFFFFF,
                    border: {
                        top: {
                            width: 0.5,
                            color: 0xFFDCE0E7
                        },
                        left: {
                            width: 0.5,
                            color: 0xFFDCE0E7
                        },
                        bottom: {
                            width: 0.5,
                            color: 0xFFDCE0E7
                        },
                        right: {
                            width: 0.5,
                            color: 0xFFDCE0E7
                        }
                    },
                    boxShadow: {
                        blurRadius: 10,
                        offset: {
                            dx: 4,
                            dy: 4
                        },
                        color: 0xFF000000
                    },
                    child: {
                        type: "flex",
                        spacing: 2,
                        padding: { right: 1.5, left: 1.5 },
                        mainAxisAlignment: "spaceEvenly",
                        fillParent: true,
                        crossAxisAlignment: "center",
                        direction: "col",
                        children: [
                            {
                                type: "text",
                                value: "Nom du chien",
                                style: "headline2"
                            },
                            {
                                type: "flex",
                                mainAxisAlignment: "spaceBetween",
                                fillParent: true,
                                spacing: 2,
                                children: [
                                    {
                                        type: "flex",
                                        direction: "col",
                                        spacing: 2,
                                        padding: { top: 1, bottom: 1 },
                                        crossAxisAlignment: "center",
                                        children: [
                                            {
                                                type: "text",
                                                value: "Exercice 1 :",
                                                style: "headline3"
                                            },
                                            {
                                                type: "text",
                                                value: "Promenade"
                                            },
                                            {
                                                type: "text",
                                                value: "Description : Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed tempor mauris.  Pellentesque nulla lorem, laoreet sit amet risus sed, tincidunt accumsan mi. Interdum tincidunt accumsan mi. Interdum"
                                            },
                                            {
                                                type: "text",
                                                value: "1/5"
                                            }
                                        ]
                                    },
                                    {
                                        type: "flex",
                                        direction: "col",
                                        spacing: 2,
                                        padding: { top: 1, bottom: 1 },
                                        crossAxisAlignment: "center",
                                        children: [
                                            {
                                                type: "text",
                                                value: "Exercice 2 :",
                                                style: "headline3"
                                            },
                                            {
                                                type: "text",
                                                value: "Titre "
                                            },
                                            {
                                                type: "text",
                                                value: "Description : Lorem Ipsum"
                                            },
                                            {
                                                type: "text",
                                                value: "5/5"
                                            }
                                        ]
                                    }, {
                                        type: "flex",
                                        direction: "col",
                                        spacing: 2,
                                        padding: { top: 1, bottom: 1 },
                                        crossAxisAlignment: "center",
                                        children: [
                                            {
                                                type: "text",
                                                value: "Exercice 3 :",
                                                style: "headline3"
                                            },
                                            {
                                                type: "text",
                                                value: "Titre"
                                            },
                                            {
                                                type: "text",
                                                value: "Description : Lorem Ipsum dolor sit amet consectetur adipiscing elit"
                                            },
                                            {
                                                type: "text",
                                                value: "3/5"
                                            }
                                        ]
                                    }

                                ]
                            },
                        ]
                    }
                }]```

[jonas-martinez]

The problem is that Flutter's Text component only makes the Text multi-line if it has reached the end of its parent but on Lenra we currently only use infinite width components. There are no means to define a fixed size for a component so that the Text would be multi-lined.

As seen with @taorepoara IRL, we might want to implement the Flexible component which is a sort of "fixed width" component thanks to weights applied to it.