Page.design property

[FeodorFitsner]

Close #2588

Test code:

import logging

import flet as ft

# logging.basicConfig(level=logging.DEBUG)


def main(page):
    page.appbar = ft.CupertinoAppBar(
        leading=ft.TextButton("Edit"),
        middle=ft.Text("Some sample settings"),
        trailing=ft.CupertinoButton(ft.Icon(ft.cupertino_icons.ADD), padding=0),
        bgcolor=ft.colors.with_opacity(0.04, ft.cupertino_colors.SYSTEM_BACKGROUND),
    )

    page.navigation_bar = ft.NavigationBar(
        destinations=[
            ft.NavigationDestination(icon=ft.icons.EXPLORE, label="Explore"),
            ft.NavigationDestination(icon=ft.icons.COMMUTE, label="Commute"),
            ft.NavigationDestination(
                icon=ft.icons.BOOKMARK_BORDER,
                selected_icon=ft.icons.BOOKMARK,
                label="Explore",
            ),
        ],
        # bgcolor=ft.colors.with_opacity(0.1, ft.cupertino_colors.SYSTEM_GREY2),
    )

    page.window_width = 393
    page.window_height = 700
    page.theme_mode = ft.ThemeMode.LIGHT
    page.design = ft.PageDesign.ADAPTIVE
    page.theme = ft.Theme(
        color_scheme_seed=ft.colors.YELLOW,
        scrollbar_theme=ft.ScrollbarTheme(thumb_visibility=True, thickness=0),
    )
    # page.theme = ft.Theme(color_scheme=ft.ColorScheme(primary=ft.colors.BLUE))
    # page.bgcolor = ft.colors.YELLOW

    def dark_light_mode_changed(e):
        if page.theme_mode == ft.ThemeMode.LIGHT:
            page.theme_mode = ft.ThemeMode.DARK
        else:
            page.theme_mode = ft.ThemeMode.LIGHT
        page.update()

    dark_mode_checkbox = ft.Checkbox(
        value=False, label="Dark Mode", on_change=dark_light_mode_changed
    )

    print("Media:", page.media)
    page.on_media_change = lambda e: print("Page media changed:", e)
    page.on_resize = lambda e: print("Page resize:", page.width, page.height)

    # page.padding = 0
    page.scroll = ft.ScrollMode.ADAPTIVE
    page.padding = ft.padding.only(left=10, right=10)
    page.add(
        ft.SafeArea(
            ft.Column(
                [
                    ft.Text("Line longer than others", size=20),
                    ft.Text("Line 2"),
                    ft.Text("Line 3"),
                    dark_mode_checkbox,
                    ft.Switch(label="Something"),
                    ft.FilledButton(content=ft.Text("Just a button")),
                    ft.TextField(keyboard_type=ft.KeyboardType.TEXT),
                    ft.Text("Line 4"),
                    ft.Text("Line 3"),
                    ft.Text("Line 3"),
                    ft.Text("Line 3"),
                    ft.Text("Line 3"),
                    ft.Text("Line 3"),
                    ft.Text("Line 4"),
                    ft.Text("Line 30"),
                    ft.Text("Line 3"),
                    ft.Text("Line 3"),
                    ft.Text("Line 3"),
                    ft.Text("Line 4"),
                    ft.Text("Line 30"),
                    ft.Text("Line 3"),
                    ft.Text("Line 4"),
                    ft.Text("Line 3"),
                    ft.Text("Line 3"),
                    ft.Text("Line 3"),
                    ft.Text("Line 3"),
                    ft.Text("Line 3"),
                    ft.Text("Line 4"),
                    ft.Text("Line 30"),
                    ft.Text("Line 3"),
                    ft.Text("Line 3"),
                    ft.Text("Line 3"),
                    ft.Text("Line 4"),
                    ft.Text("Line 30"),
                    ft.Text("Line 3"),
                ]
            )
        )
    )


ft.app(target=main)