Adaptive apps

이번에는 adaptive app(하나의 코드를 가지고 사용자의 기기에 따라 그모습을 달리하는 앱)을 개발하는 데 필요한 것을 보고자 한다.

아래는 간단한 예로 iOS와 Android에서 다른 모습을 보여준다:

import flet as ft


def main(page):

    page.adaptive = True

    page.appbar = ft.AppBar(
        leading=ft.TextButton("New", style=ft.ButtonStyle(padding=0)),
        title=ft.Text("Adaptive AppBar"),
        actions=[
            ft.IconButton(ft.cupertino_icons.ADD, style=ft.ButtonStyle(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="Bookmark",
            ),
        ],
        border=ft.Border(
            top=ft.BorderSide(color=ft.cupertino_colors.SYSTEM_GREY2, width=0)
        ),
    )

    page.add(
        ft.SafeArea(
            ft.Column(
                [
                    ft.Checkbox(value=False, label="Dark Mode"),
                    ft.Text("First field:"),
                    ft.TextField(keyboard_type=ft.KeyboardType.TEXT),
                    ft.Text("Second field:"),
                    ft.TextField(keyboard_type=ft.KeyboardType.TEXT),
                    ft.Switch(label="A switch"),
                    ft.FilledButton(content=ft.Text("Adaptive button")),
                    ft.Text("Text line 1"),
                    ft.Text("Text line 2"),
                    ft.Text("Text line 3"),
                ]
            )
        )
    )


ft.app(target=main)

page.adaptive = True로 설정하여 iOS와 Android에서 멋진 앱을 만들 수 있다.

Material and Cupertino controls

대부분 컨트롤은 Material디자인에 기반된 것이지만,그에 대응하는 많은 Cupertino컨트롤이라고 불리우는 iOS스타일 컨트롤이 있다.

Cupertino 스타일이 가능한 컨트롤은 기본값이 False인 adaptive 프러퍼티를 가지며 True가 되면 기기에 따라 다른 모습을 보일 것이다:

ft.Checkbox(adaptive=True, value=True, label="Adaptive Checkbox")

Flet은 page.platform 프러퍼티값을 확인하고 ft.PagePlatform.IOS 또는 ft.PagePlatform.MACOS이면 Cupertino 컨트롤을 만든다. 아니라면 Material이다.