Flet tutorial 05 outlinedbutton basic introduction (tutorial includes source code)

What is? OutlinedButton

The outline button is a medium emphasis button . They contain important operations , But not the main operation in the application . The outline button is well matched with the fill button , Secondary operation replaced by indication .

Combat code

import flet
from flet import OutlinedButton, Page


def main(page: Page):
    page.title = "Basic outlined buttons"
    page.add(
        OutlinedButton(text="Outlined button"),
        OutlinedButton("Disabled button", disabled=True),
    )

flet.app(target=main)

With graph button

import flet
from flet import OutlinedButton, Page


def main(page: Page):
    page.title = "Outlined buttons with icons"
    page.add(
        OutlinedButton("Button with icon", icon="chair_outlined"),
        OutlinedButton(
            "Button with colorful icon",
            icon="park_rounded",
            icon_color="green400",
        ),
    )

flet.app(target=main)

Response Click

import flet
from flet import OutlinedButton, Page, Text


def main(page: Page):
    page.title = "Outlined button with 'click' event"

    def button_clicked(e):
        b.data += 1
        t.value = f"Button clicked {b.data} time(s)"
        page.update()

    b = OutlinedButton("Button with 'click' event", on_click=button_clicked, data=0)
    t = Text()

    page.add(b, t)

flet.app(target=main)

Custom buttons

import flet
from flet import (
    Column,
    Container,
    Icon,
    OutlinedButton,
    Page,
    Row,
    Text,
    icons,
    padding,
)


def main(page: Page):
    page.title = "Outlined buttons with custom content"
    page.add(
        OutlinedButton(
            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",
            ),
        ),
        OutlinedButton(
            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)