S1 examples

client/lib/controls/create_control.dart

@@ -1,3 +1,7 @@
+import 'card.dart';
+import 'list_tile.dart';
+import 'navigation_rail.dart';
+
 import 'package:flutter/material.dart';
 import 'package:flutter_redux/flutter_redux.dart';
 

sdk/python/examples/controls/container/container-margin.py

@@ -0,0 +1,95 @@
+import flet
+from flet import (
+    Container,
+    ElevatedButton,
+    Page,
+    Row,
+    Text,
+    alignment,
+    border,
+    border_radius,
+    colors,
+    margin,
+    padding,
+)
+
+
+def main(page: Page):
+    page.title = "Containers with different margins"
+
+    c1 = Container(
+        content=ElevatedButton("container_1"),
+        bgcolor=colors.AMBER,
+        # padding=padding.all(10),
+        margin=margin.all(10),
+        width=150,
+        height=150,
+    )
+
+    c2 = Container(
+        content=ElevatedButton("container_2"),
+        bgcolor=colors.AMBER,
+        # padding=padding.all(20),
+        margin=margin.all(20),
+        width=150,
+        height=150,
+    )
+
+    c3 = Container(
+        content=ElevatedButton("container_3"),
+        bgcolor=colors.AMBER,
+        # padding=padding.symmetric(horizontal=10),
+        margin=margin.symmetric(vertical=10),
+        width=150,
+        height=150,
+    )
+
+    c4 = Container(
+        content=ElevatedButton("container_4"),
+        bgcolor=colors.AMBER,
+        # padding=padding.only(left=10),
+        margin=margin.only(left=10),
+        width=150,
+        height=150,
+    )
+
+    r = Row([c1, c2, c3, c4], spacing=0)
+    page.add(r)
+
+
+flet.app(target=main)
+
+
+# - bgColor (background color - `decoration: BoxDecoration.color`)
+# - alignment - `topLeft`, `topCenter`, `topRight`, `centerLeft`, `center`, `centerRight`, `bottomLeft`, `bottomCenter`, `bottomRight`
+# - border - width, color
+# - borderRadius
+# - verticalScroll (S2)
+# - horizontalScroll (S2)
+# - autoScroll (S2) - `end`, `start` ([example](https://stackoverflow.com/questions/43485529/programmatically-scrolling-to-the-end-of-a-listview)).
+# - content - child control of any type
+# - margin
+# - padding
+# - tooltip
+
+# Common Properties:
+
+# - visible
+# - disabled
+
+# - expand (int) - The control is forced to fill the available space inside Row or Column. Flex factor specified by the property. Default is 1. The property has affect only for direct descendants of Row and Column controls. (Wrap control into Expanded).
+# - flex (S2) (int) - The child can be at most as large as the available space (but is allowed to be smaller) inside Row or Column. Flex factor specified by the property. Default is 1. The property has affect only for direct descendants of Row and Column controls. (Wrap control into Flexible with fit=FlexFit.loose).
+
+# The only difference if you use Flexible instead of Expanded, is that Flexible lets its child have the same or smaller width than the Flexible itself, while Expanded forces its child to have the exact same width of the Expanded. But both Expanded and Flexible ignore their children’s width when sizing themselves.
+
+# - width - wrap into SizedBox
+# - height - wrap into SizedBox
+# - minHeight (S2) - wrap into ConstrainedBox
+# - maxHeight (S2) - wrap into ConstrainedBox
+# - minWidth (S2) - wrap into ConstrainedBox
+# - maxWidth (S2) - wrap into ConstrainedBox
+
+# - fit (S2)
+# - fitAlign (S2) - Wrap into FittedBox
+
+# - opacity - allows to specify transparency of the control, hide it completely or blend with another if used with Stack. 0.0 - hidden, 1.0 - fully visible. See https://api.flutter.dev/flutter/widgets/Opacity-class.html.

sdk/python/examples/controls/container/container-padding.py

@@ -0,0 +1,44 @@
+import flet
+from flet import Container, ElevatedButton, Page, Row, colors, padding
+
+
+def main(page: Page):
+    page.title = "Containers with different padding"
+
+    c1 = Container(
+        content=ElevatedButton("container_1"),
+        bgcolor=colors.AMBER,
+        padding=padding.all(10),
+        width=150,
+        height=150,
+    )
+
+    c2 = Container(
+        content=ElevatedButton("container_2"),
+        bgcolor=colors.AMBER,
+        padding=padding.all(20),
+        width=150,
+        height=150,
+    )
+
+    c3 = Container(
+        content=ElevatedButton("container_3"),
+        bgcolor=colors.AMBER,
+        padding=padding.symmetric(horizontal=10),
+        width=150,
+        height=150,
+    )
+
+    c4 = Container(
+        content=ElevatedButton("container_4"),
+        bgcolor=colors.AMBER,
+        padding=padding.only(left=10),
+        width=150,
+        height=150,
+    )
+
+    r = Row([c1, c2, c3, c4])
+    page.add(r)
+
+
+flet.app(target=main)

sdk/python/examples/controls/container/containers-alignment.py

@@ -0,0 +1,39 @@
+import flet
+from flet import Container, ElevatedButton, Page, Row, alignment, colors
+
+
+def main(page: Page):
+    page.title = "Containers with different alignments"
+
+    c1 = Container(
+        content=ElevatedButton("Center"),
+        bgcolor=colors.AMBER,
+        padding=15,
+        alignment=alignment.center,
+        width=150,
+        height=150,
+    )
+
+    c2 = Container(
+        content=ElevatedButton("Top left"),
+        bgcolor=colors.AMBER,
+        padding=15,
+        alignment=alignment.top_left,
+        width=150,
+        height=150,
+    )
+
+    c3 = Container(
+        content=ElevatedButton("-0.5, -0.5"),
+        bgcolor=colors.AMBER,
+        padding=15,
+        alignment=alignment.Alignment(-0.5, -0.5),
+        width=150,
+        height=150,
+    )
+
+    r = Row([c1, c2, c3])
+    page.add(r)
+
+
+flet.app(target=main)

sdk/python/examples/controls/container/containers-background-color.py

@@ -0,0 +1,30 @@
+from typing import Text
+
+import flet
+from flet import Container, ElevatedButton, OutlinedButton, Page, Text, colors
+
+
+def main(page: Page):
+    page.title = "Containers with different background color"
+
+    c1 = Container(
+        content=Text("Container_1"),
+        bgcolor="#FFCC0000",
+        padding=5,
+    )
+
+    c2 = Container(
+        content=Text("Container_2"),
+        bgcolor="#CC0000",
+        padding=5,
+    )
+
+    c3 = Container(
+        content=Text("Container_3"),
+        bgcolor=colors.RED,
+        padding=5,
+    )
+    page.add(c1, c2, c3)
+
+
+flet.app(target=main)

sdk/python/examples/controls/container/containers-borders.py

@@ -0,0 +1,86 @@
+import flet
+from flet import (
+    Container,
+    ElevatedButton,
+    Page,
+    Row,
+    alignment,
+    border,
+    border_radius,
+    colors,
+    padding,
+)
+
+
+def main(page: Page):
+    page.title = "Containers with different borders"
+
+    c1 = Container(
+        content=ElevatedButton("Center"),
+        bgcolor=colors.AMBER,
+        padding=15,
+        alignment=alignment.center,
+        border=border.all(10, colors.PINK_600),
+        border_radius=border_radius.all(30),
+        width=150,
+        height=150,
+    )
+
+    c2 = Container(
+        content=ElevatedButton("Top left"),
+        bgcolor=colors.AMBER,
+        padding=15,
+        alignment=alignment.top_left,
+        width=150,
+        height=150,
+    )
+
+    c3 = Container(
+        content=ElevatedButton("-0.5, -0.5"),
+        bgcolor=colors.AMBER,
+        padding=15,
+        alignment=alignment.Alignment(-0.5, -0.5),
+        width=150,
+        height=150,
+    )
+
+    r = Row([c1])
+    page.add(r)
+
+
+flet.app(target=main)
+
+
+# - bgColor (background color - `decoration: BoxDecoration.color`)
+# - alignment - `topLeft`, `topCenter`, `topRight`, `centerLeft`, `center`, `centerRight`, `bottomLeft`, `bottomCenter`, `bottomRight`
+# - border - width, color
+# - borderRadius
+# - verticalScroll (S2)
+# - horizontalScroll (S2)
+# - autoScroll (S2) - `end`, `start` ([example](https://stackoverflow.com/questions/43485529/programmatically-scrolling-to-the-end-of-a-listview)).
+# - content - child control of any type
+# - margin
+# - padding
+# - tooltip
+
+# Common Properties:
+
+# - visible
+# - disabled
+
+# - expand (int) - The control is forced to fill the available space inside Row or Column. Flex factor specified by the property. Default is 1. The property has affect only for direct descendants of Row and Column controls. (Wrap control into Expanded).
+# - flex (S2) (int) - The child can be at most as large as the available space (but is allowed to be smaller) inside Row or Column. Flex factor specified by the property. Default is 1. The property has affect only for direct descendants of Row and Column controls. (Wrap control into Flexible with fit=FlexFit.loose).
+
+# The only difference if you use Flexible instead of Expanded, is that Flexible lets its child have the same or smaller width than the Flexible itself, while Expanded forces its child to have the exact same width of the Expanded. But both Expanded and Flexible ignore their children’s width when sizing themselves.
+
+# - width - wrap into SizedBox
+# - height - wrap into SizedBox
+# - minHeight (S2) - wrap into ConstrainedBox
+# - maxHeight (S2) - wrap into ConstrainedBox
+# - minWidth (S2) - wrap into ConstrainedBox
+# - maxWidth (S2) - wrap into ConstrainedBox
+
+# - fit (S2)
+# - fitAlign (S2) - Wrap into FittedBox
+
+# - opacity - allows to specify transparency of the control, hide it completely or blend with another if used with Stack. 0.0 - hidden, 1.0 - fully visible. See https://api.flutter.dev/flutter/widgets/Opacity-class.html.

sdk/python/examples/controls/elevated-buttons/basic-elevated-buttons.py

@@ -0,0 +1,13 @@
+import flet
+from flet import ElevatedButton, Page
+
+
+def main(page: Page):
+    page.title = "Basic elevated buttons"
+    page.add(
+        ElevatedButton(text="Elevated button"),
+        ElevatedButton("Disabled button", disabled=True),
+    )
+
+
+flet.app(target=main)

sdk/python/examples/controls/elevated-buttons/elevated-button-with-click-event.py

@@ -0,0 +1,19 @@
+import flet
+from flet import ElevatedButton, Page, Text
+
+
+def main(page: Page):
+    page.title = "Elevated button with 'click' event"
+
+    def button_clicked(e):
+        b.data += 1
+        t.value = f"Button clicked {b.data} time(s)"
+        page.update()
+
+    b = ElevatedButton("Button with 'click' event", on_click=button_clicked, data=0)
+    t = Text()
+
+    page.add(b, t)
+
+
+flet.app(target=main)

sdk/python/examples/controls/elevated-buttons/elevated-buttons-with-custom-content.py

@@ -0,0 +1,45 @@
+import flet
+from flet import (
+    Column,
+    Container,
+    ElevatedButton,
+    Icon,
+    Page,
+    Row,
+    Text,
+    icons,
+    padding,
+)
+
+
+def main(page: Page):
+    page.title = "Elevated buttons with custom content"
+    page.add(
+        ElevatedButton(
+            width=150,
+            content=Row(
+                [
+                    Icon(name=icons.FAVORITE, color="pink"),
+                    Icon(name=icons.AUDIOTRACK, color="green"),
+                    Icon(name=icons.BEACH_ACCESS, color="blue"),
+                ],
+                alignment="spaceAround",
+            ),
+        ),
+        ElevatedButton(
+            content=Container(
+                content=Column(
+                    [
+                        Text(value="Compound button", size=20),
+                        Text(value="This is secondary text"),
+                    ],
+                    alignment="center",
+                    spacing=5,
+                ),
+                padding=padding.all(10),
+            ),
+        ),
+    )
+
+
+flet.app(target=main)