色を使ってみる実験から
flet.Colorsのクラスの変数を取得
色の定数っぽいものをページの背景にして表示
ソースリスト
import flet as ft
def main(page: ft.Page):
colors=s.replace("'","").replace(" ","").split(",")
print(colors,len(colors))
for y in range(20):
page.add(
ft.Container(
width=200,
height=10,
border=ft.border.all(1, ft.Colors.BLACK),
content=ft.FilledButton("Primary color"),
theme=ft.Theme(color_scheme=ft.ColorScheme(primary=getattr(ft.Colors, colors.pop(0))))
)
)
#print(vars(ft.Colors))
s="""'WHITE10', 'WHITE12', 'WHITE24', 'WHITE30', 'WHITE38', 'WHITE54', 'WHITE60', 'WHITE70', 'WHITE', 'TRANSPARENT', 'BLACK12', 'BLACK26', 'BLACK38', 'BLACK45', 'BLACK54', 'BLACK87', 'BLACK', 'RED', 'RED_50', 'RED_100', 'RED_200', 'RED_300', 'RED_400', 'RED_500', 'RED_600', 'RED_700', 'RED_800', 'RED_900', 'PINK', 'PINK_50', 'PINK_100', 'PINK_200', 'PINK_300', 'PINK_400', 'PINK_500', 'PINK_600', 'PINK_700', 'PINK_800', 'PINK_900', 'PURPLE', 'PURPLE_50', 'PURPLE_100', 'PURPLE_200', 'PURPLE_300', 'PURPLE_400', 'PURPLE_500', 'PURPLE_600', 'PURPLE_700', 'PURPLE_800', 'PURPLE_900', 'DEEP_PURPLE', 'DEEP_PURPLE_50', 'DEEP_PURPLE_100', 'DEEP_PURPLE_200', 'DEEP_PURPLE_300', 'DEEP_PURPLE_400', 'DEEP_PURPLE_500', 'DEEP_PURPLE_600', 'DEEP_PURPLE_700', 'DEEP_PURPLE_800', 'DEEP_PURPLE_900', 'INDIGO', 'INDIGO_50', 'INDIGO_100', 'INDIGO_200', 'INDIGO_300', 'INDIGO_400', 'INDIGO_500', 'INDIGO_600', 'INDIGO_700', 'INDIGO_800', 'INDIGO_900', 'BLUE', 'BLUE_50', 'BLUE_100', 'BLUE_200', 'BLUE_300', 'BLUE_400', 'BLUE_500', 'BLUE_600', 'BLUE_700', 'BLUE_800', 'BLUE_900', 'LIGHT_BLUE', 'LIGHT_BLUE_50', 'LIGHT_BLUE_100', 'LIGHT_BLUE_200', 'LIGHT_BLUE_300', 'LIGHT_BLUE_400', 'LIGHT_BLUE_500', 'LIGHT_BLUE_600', 'LIGHT_BLUE_700', 'LIGHT_BLUE_800', 'LIGHT_BLUE_900', 'CYAN', 'CYAN_50', 'CYAN_100', 'CYAN_200', 'CYAN_300', 'CYAN_400', 'CYAN_500', 'CYAN_600', 'CYAN_700', 'CYAN_800', 'CYAN_900', 'TEAL', 'TEAL_50', 'TEAL_100', 'TEAL_200', 'TEAL_300', 'TEAL_400', 'TEAL_500', 'TEAL_600', 'TEAL_700', 'TEAL_800', 'TEAL_900', 'GREEN', 'GREEN_50', 'GREEN_100', 'GREEN_200', 'GREEN_300', 'GREEN_400', 'GREEN_500', 'GREEN_600', 'GREEN_700', 'GREEN_800', 'GREEN_900', 'LIGHT_GREEN', 'LIGHT_GREEN_50', 'LIGHT_GREEN_100', 'LIGHT_GREEN_200', 'LIGHT_GREEN_300', 'LIGHT_GREEN_400', 'LIGHT_GREEN_500', 'LIGHT_GREEN_600', 'LIGHT_GREEN_700', 'LIGHT_GREEN_800', 'LIGHT_GREEN_900', 'LIME', 'LIME_50', 'LIME_100', 'LIME_200', 'LIME_300', 'LIME_400', 'LIME_500', 'LIME_600', 'LIME_700', 'LIME_800', 'LIME_900', 'YELLOW', 'YELLOW_50', 'YELLOW_100', 'YELLOW_200', 'YELLOW_300', 'YELLOW_400', 'YELLOW_500', 'YELLOW_600', 'YELLOW_700', 'YELLOW_800', 'YELLOW_900', 'AMBER', 'AMBER_50', 'AMBER_100', 'AMBER_200', 'AMBER_300', 'AMBER_400', 'AMBER_500', 'AMBER_600', 'AMBER_700', 'AMBER_800', 'AMBER_900', 'ORANGE', 'ORANGE_50', 'ORANGE_100', 'ORANGE_200', 'ORANGE_300', 'ORANGE_400', 'ORANGE_500', 'ORANGE_600', 'ORANGE_700', 'ORANGE_800', 'ORANGE_900', 'DEEP_ORANGE', 'DEEP_ORANGE_50', 'DEEP_ORANGE_100', 'DEEP_ORANGE_200', 'DEEP_ORANGE_300', 'DEEP_ORANGE_400', 'DEEP_ORANGE_500', 'DEEP_ORANGE_600', 'DEEP_ORANGE_700', 'DEEP_ORANGE_800', 'DEEP_ORANGE_900', 'BROWN', 'BROWN_50', 'BROWN_100', 'BROWN_200', 'BROWN_300', 'BROWN_400', 'BROWN_500', 'BROWN_600', 'BROWN_700', 'BROWN_800', 'BROWN_900', 'BLUE_GREY', 'BLUE_GREY_50', 'BLUE_GREY_100', 'BLUE_GREY_200', 'BLUE_GREY_300', 'BLUE_GREY_400', 'BLUE_GREY_500', 'BLUE_GREY_600', 'BLUE_GREY_700', 'BLUE_GREY_800', 'BLUE_GREY_900', 'RED_ACCENT', 'RED_ACCENT_100', 'RED_ACCENT_200', 'RED_ACCENT_400', 'RED_ACCENT_700', 'PINK_ACCENT', 'PINK_ACCENT_100', 'PINK_ACCENT_200', 'PINK_ACCENT_400', 'PINK_ACCENT_700', 'PURPLE_ACCENT', 'PURPLE_ACCENT_100', 'PURPLE_ACCENT_200', 'PURPLE_ACCENT_400', 'PURPLE_ACCENT_700', 'DEEP_PURPLE_ACCENT', 'DEEP_PURPLE_ACCENT_100', 'DEEP_PURPLE_ACCENT_200', 'DEEP_PURPLE_ACCENT_400', 'DEEP_PURPLE_ACCENT_700', 'INDIGO_ACCENT', 'INDIGO_ACCENT_100', 'INDIGO_ACCENT_200', 'INDIGO_ACCENT_400', 'INDIGO_ACCENT_700', 'BLUE_ACCENT', 'BLUE_ACCENT_100', 'BLUE_ACCENT_200', 'BLUE_ACCENT_400', 'BLUE_ACCENT_700', 'LIGHT_BLUE_ACCENT', 'LIGHT_BLUE_ACCENT_100', 'LIGHT_BLUE_ACCENT_200', 'LIGHT_BLUE_ACCENT_400', 'LIGHT_BLUE_ACCENT_700', 'CYAN_ACCENT', 'CYAN_ACCENT_100', 'CYAN_ACCENT_200', 'CYAN_ACCENT_400', 'CYAN_ACCENT_700', 'TEAL_ACCENT', 'TEAL_ACCENT_100', 'TEAL_ACCENT_200', 'TEAL_ACCENT_400', 'TEAL_ACCENT_700', 'GREEN_ACCENT', 'GREEN_ACCENT_100', 'GREEN_ACCENT_200', 'GREEN_ACCENT_400', 'GREEN_ACCENT_700', 'LIGHT_GREEN_ACCENT', 'LIGHT_GREEN_ACCENT_100', 'LIGHT_GREEN_ACCENT_200', 'LIGHT_GREEN_ACCENT_400', 'LIGHT_GREEN_ACCENT_700', 'LIME_ACCENT', 'LIME_ACCENT_100', 'LIME_ACCENT_200', 'LIME_ACCENT_400', 'LIME_ACCENT_700', 'YELLOW_ACCENT', 'YELLOW_ACCENT_100', 'YELLOW_ACCENT_200', 'YELLOW_ACCENT_400', 'YELLOW_ACCENT_700', 'AMBER_ACCENT', 'AMBER_ACCENT_100', 'AMBER_ACCENT_200', 'AMBER_ACCENT_400', 'AMBER_ACCENT_700', 'ORANGE_ACCENT', 'ORANGE_ACCENT_100', 'ORANGE_ACCENT_200', 'ORANGE_ACCENT_400', 'ORANGE_ACCENT_700', 'DEEP_ORANGE_ACCENT', 'DEEP_ORANGE_ACCENT_100', 'DEEP_ORANGE_ACCENT_200', 'DEEP_ORANGE_ACCENT_400', 'DEEP_ORANGE_ACCENT_700', 'GREY', 'GREY_50', 'GREY_100', 'GREY_200', 'GREY_300', 'GREY_400', 'GREY_500', 'GREY_600', 'GREY_700', 'GREY_800', 'GREY_900'"""
ft.app(main)
Canvasにいろいろな図形をサンプルから貼り付けて表示してみる
Canvasはいろいろな環境でも使い方に一番苦労するイメージがあります
ソースリスト
import math
import flet as ft
import flet.canvas as cv
def main(page: ft.Page):
page.title = "Canvas に図形を描く & コピーする"
stroke_paint = paint = ft.Paint(stroke_width=2, style=ft.PaintingStyle.STROKE, color=ft.Colors.BLACK)
fill_paint = paint = ft.Paint(style=ft.PaintingStyle.FILL)
# 元のキャンバス
cp = cv.Canvas(
[
#cv.Fill(),
cv.Circle(0, 0, 200, ft.Paint(color=ft.Colors.YELLOW)),
cv.Circle(50, 50, 50, ft.Paint(color=ft.colors.RED)), # 赤い円
cv.Rect(20, 20, 40, 40, ft.Paint(color=ft.colors.WHITE)), # 緑の四角
cv.Circle(100, 100, 50, stroke_paint),
cv.Circle(80, 90, 10, stroke_paint),
cv.Circle(84, 87, 5, fill_paint),
cv.Circle(120, 90, 10, stroke_paint),
cv.Circle(124, 87, 5, fill_paint),
cv.Arc(70, 95, 60, 40, 0, math.pi, paint=stroke_paint),
cv.Text(
200,
100,
"Rotated",
ft.TextStyle(weight=ft.FontWeight.BOLD, size=30),
spans=[
ft.TextSpan(
"around top_center",
ft.TextStyle(italic=True, color=ft.Colors.GREEN, size=20),
)
],
alignment=ft.alignment.top_center,
rotate=math.pi * 0.15,
),
],
width=float("inf"),
expand=True,
)
# 横に並べる
#page.add(ft.Row([canvas1, canvas2]))
page.add(ft.Row([cp, cp]))
ft.app(target=main)
