Improve Solitaire Tutorial

[perrotuerto]

Hi, I wonder if there are any plans to update this tutorial.

With the previous tutorials, I have been sending PRs to fix little things, and I have the intention to do the same with this tutorial.

But I wonder how many changes I should do. I don't intend to rewrite the tutorial, just fix it so it can be followed as intended.

For example, in the first step there is this code snippet:

import flet as ft

def main(page: ft.Page):
    card = ft.GestureDetector(
        left=0,
        top=0,
        content=ft.Container(bgcolor=ft.Colors.GREEN, width=70, height=100),
    )

    page.add(ft.Stack(controls=[card], width=1000, height=500))

ft.run(main)

But running this generates this error: GestureDetector should have at least one event handler defined.

So to fix it, the block should be:

import flet as ft

def main(page: ft.Page):
    def drag(e):
        ...
    
    card = ft.GestureDetector(
        on_pan_update=drag,
        left=0,
        top=0,
        content=ft.Container(bgcolor=ft.Colors.GREEN, width=70, height=100),
    )

    page.add(ft.Stack(controls=[card], width=1000, height=500))

ft.run(main)

With this, the tutorial follows as expected.

Is it fine if I add these changes?

Thanks for the tutorials, they are really nice!

[ndonkoHenri]

Sure, you can open a PR to improve it - thanks in advance!
Let know if you need help to find your way in the codebase.

[perrotuerto]

I might have questions about the behavior. For example, ft.MouseCursor.MOVE doesn't show any change in the cursor, but others, like GRAB or GRABBING does. Where do you want me to ask this? May be in the PR we can have this conversation, make changes as necessary, and so on.

Let me know!

[ndonkoHenri]

We can discuss that here. Here is a MouseCursor showcase example, and MOVE works on my end (macOS 15).

import flet as ft


def cursor_card(cursor: ft.MouseCursor) -> ft.Control:
    return ft.GestureDetector(
        mouse_cursor=cursor,
        content=ft.Container(
            width=250,
            height=100,
            padding=12,
            border=ft.Border.all(1, ft.Colors.ERROR),
            border_radius=10,
            bgcolor=ft.Colors.SURFACE_CONTAINER_LOW,
            content=ft.Column(
                spacing=4,
                alignment=ft.MainAxisAlignment.CENTER,
                horizontal_alignment=ft.CrossAxisAlignment.CENTER,
                controls=[
                    ft.Text(cursor.name, weight=ft.FontWeight.BOLD),
                ],
            ),
        ),
    )


def main(page: ft.Page):
    page.padding = 20
    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER

    page.appbar = ft.AppBar(title="MouseCursor Showcase")
    page.add(
        ft.Text(
            "Hover each card to compare cursor styles. "
            "Cursor rendering can vary by OS and browser.",
        ),
        ft.Row(
            wrap=True,
            spacing=12,
            scroll=ft.ScrollMode.AUTO,
            alignment=ft.MainAxisAlignment.CENTER,
            controls=[cursor_card(cursor) for cursor in ft.MouseCursor],
        ),
    )


ft.run(main)

If it doesnt work with this example, maybe you could share your Flet version and OS details.

[perrotuerto]

DISAPPEARING and MOVE are the only ones that don't change the cursor.

Info:

Flet: 0.80.2
Flutter: 3.38.6
Pyodide: 0.27.7
OS: Arch Linux x86_64
Kernel: Linux 6.18.5-arch1-1
DE: GNOME 49.2
Cursor: Adwaita (24px)