Exemplos: Badge e Canvas

Exemplo 1: uso do Controle Badge

import flet as ft

def main(page: ft.Page):

    def clicou(e):
        badge.text=str(int(badge.text)+1)
        page.update()

    badge=ft.Badge(
        text="1",
        content=ft.Icon(ft.icons.PHONE, size=40),
        bgcolor="#ff0000",
        text_color="#000000",
    )

    page.navigation_bar = ft.NavigationBar(
        destinations=[ft.NavigationBarDestination(icon_content=badge, label="Soma Um")],
        on_change=clicou
    )
    page.add()

ft.app(main)

A figura 1-A mostra o estado inicial do Badge e 1-B mostra o estado final, após 4 cliques sobre o controle.

Exemplo 2: uso do Canvas.Shapes

O exemplo abaixo mostra casos simples de uso de Color, Circle, Arc, Rect e Line.

import flet as ft
import flet.canvas as cv
import math

def main(page: ft.Page):
    risco = ft.Paint(stroke_width=2, style=ft.PaintingStyle.STROKE)
    pintar = ft.Paint(style=ft.PaintingStyle.FILL)
    cnv = cv.Canvas(
        [
            cv.Color(ft.colors.GREEN_50),                             # A
            cv.Circle(100, 100, 40, risco),                           # B
            cv.Circle(100, 100, 30, risco),                           # C
            cv.Circle(100, 100, 10, pintar),                          # D
            cv.Arc(180, 90, 60, 40, 0, 2*math.pi, paint=risco),       # E
            cv.Arc(180, 80, 60, 20, math.pi, math.pi, paint=risco),   # F
            cv.Rect(165, 60, 90, 80, 15, risco),                      # G
            cv.Line(280, 70, 340, 130, risco),                        # H
            cv.Line(280, 130, 340, 70, risco),                        # I
            cv.Oval(267, 70, 90, 60, risco)                           # J
        ],
    )
    page.add(cnv)

ft.app(main)

Exemplo 3: uso do Canvas.Path, LineTo, MoveTo

O exemplo abaixo mostra casos simples de uso de Paint, Path, MoveTo, LineTo e Close.

import flet as ft
import flet.canvas as cv
import math

def main(page: ft.Page):
    page.bgcolor=ft.colors.AMBER_100

    def mudar(e):
        caminho1.paint=preenche if caminho1.paint==risco else risco
        caminho2.paint=preenche if caminho2.paint==risco else risco
        caminho1.update()
        caminho2.update()

    risco=ft.Paint(stroke_width=2, style=ft.PaintingStyle.STROKE)
    preenche=ft.Paint(style=ft.PaintingStyle.FILL)
    caminho1=cv.Path(
        [
            cv.Path.MoveTo(25, 25),
            cv.Path.LineTo(105, 25),
            cv.Path.LineTo(25, 105),
            cv.Path.Close()
        ],
        paint=risco
    )
    caminho2=cv.Path(
        [
            cv.Path.MoveTo(125, 125),
            cv.Path.LineTo(125, 45),
            cv.Path.LineTo(45, 125),
            cv.Path.Close()
        ],
        paint=preenche
    )
    page.add(
        ft.ElevatedButton("Mudar estilo de Paint", on_click=mudar),
        cv.Canvas([caminho1, caminho2])
    )
ft.app(main)

Exemplo 3: uso do Canvas.Circle, Rect

O exemplo abaixo mostra casos simples de uso de canvas.Circle, canvas.Rect, canvas.Path, canvas.Path.MoveTo, canvas.QuadraticTo e rotações.

import flet as ft
import flet.canvas as cv

def main(page: ft.Page):
    page.bgcolor=ft.colors.GREEN_200

    gr1=ft.PaintRadialGradient((60, 90), 50, colors=[ft.colors.YELLOW, ft.colors.BLUE])
    grad1=ft.Paint(gradient=gr1, style=ft.PaintingStyle.FILL)
    gr2=ft.PaintRadialGradient((250, 90), 50, colors=[ft.colors.BLACK, ft.colors.RED])
    grad2=ft.Paint(gradient=gr2, style=ft.PaintingStyle.FILL)
    risco=ft.Paint(stroke_width=4, style=ft.PaintingStyle.STROKE)

    fig1=cv.Circle(60, 90, 50, grad1)
    fig2=cv.Path([cv.Path.MoveTo(110, 130), cv.Path.QuadraticTo(160, 1, 210, 130, 1)], paint=risco)
    fig3=cv.Rect(230, 50, 70, 60, 1, grad2)
    fig4=cv.Rect(240, 60, 70, 60, 1, risco)

    page.add(cv.Canvas([fig1,fig2, fig3, fig4]))

ft.app(main)

Exemplo 5: uso do Canvas.Text

O exemplo abaixo mostra casos simples de uso de canvas.Text, estilos e rotações.

import flet as ft, flet.canvas as cv, math

def main(page: ft.Page):
    page.bgcolor=ft.colors.WHITE

    estilo1=ft.TextStyle(weight=ft.FontWeight.BOLD, color=ft.colors.GREEN, size=40)
    estilo2=ft.TextStyle(weight=ft.FontWeight.BOLD, color=ft.colors.RED, size=30)

    texto1=cv.Text(0, 0, "Um texto comum", ft.TextStyle(color=ft.colors.BLUE, size=30))
    texto2=cv.Text(180, 100, "Um texto", estilo1, alignment=ft.alignment.top_center, rotate=math.pi/4)
    texto3=cv.Text(130, 140, "rotacionado", estilo2, alignment=ft.alignment.top_center, rotate=math.pi/4)

    page.add(cv.Canvas([texto1, texto2, texto3]))

ft.app(main)

Exemplo 5: uso do Canvas.Point

O código do próximo exemplo coleta pares de pontos em duas listas, representando seno e cosseno mas as mesmas amplitudes e diferentes comprimentos de onda. As duas listas são representados por meio do canvas.Points.

import flet as ft, flet.canvas as cv, math

def main(page: ft.Page):
    page.bgcolor=ft.colors.WHITE
    risco1=ft.Paint(stroke_width=2, style=ft.PaintingStyle.STROKE, color=ft.colors.BLUE_ACCENT)
    risco2=ft.Paint(stroke_width=2, style=ft.PaintingStyle.STROKE, color=ft.colors.RED)

    seno1=[]
    seno2=[]
    for x in range(500):
        seno1.append((x,50+50*math.sin(.05*x)))
        seno2.append((x,50+50*math.cos(.5*x)))

    cnv=cv.Canvas(
        [
            cv.Points(points=seno1, paint=risco1, point_mode=cv.PointMode.POLYGON),
            cv.Points(points=seno2, paint=risco2, point_mode=cv.PointMode.POLYGON)
        ]
    )
    page.add(cnv)

ft.app(main)