The full code to my blog post on how to build a Random Image Generator Flutter App with the flet python framework.

random-image-gen.py

import flet as ft
import random


class ImageCard(ft.Card):
    # normal elevation of this card (when not hovered)
    NORMAL_ELEVATION = 3
    # elevation of this card when hovered
    HOVERED_ELEVATION = 7

    def __init__(self):
        super().__init__()
        # set the elevation of the card to normal
        self.elevation = self.NORMAL_ELEVATION
        self.random_id = random.randint(0, 1050)    # get a random number/id
        # images are gotten from https://picsum.photos | I hardcoded a size of 200x300
        self.random_img_url = f"https://picsum.photos/id/{self.random_id}/200/300"

        # defines the responsiveness of this card (what amount of space should be occupied) on different window sizes
        # see docs https://flet.dev/docs/controls/responsiverow/
        self.col = {"xs": 12, "sm": 6, "md": 5, "lg": 4, "xl": 3, "xxl": 2.4}

        # the content of this card
        self.content = ft.Container(
            content=ft.Column(
                [
                    ft.Row(
                        controls=[
                            ft.Image(src=self.random_img_url)
                        ],
                        alignment=ft.MainAxisAlignment.CENTER
                    ),
                    ft.Row(
                        [
                            ft.IconButton(
                                icon=ft.icons.COPY, on_click=self.copy_img_url,
                                icon_color=ft.colors.BLUE, tooltip="Copy URL"
                            ),
                            ft.IconButton(
                                icon=ft.icons.DOWNLOAD, on_click=self.launch_img_url,
                                icon_color=ft.colors.GREEN, tooltip="Download image"
                            ),
                            ft.IconButton(
                                icon=ft.icons.DELETE, on_click=self.delete_img_card,
                                icon_color=ft.colors.RED, tooltip="Delete card"
                            ),
                        ],
                        alignment=ft.MainAxisAlignment.SPACE_EVENLY
                    ),
                ],
            ),
            padding=10,
            on_hover=self.hover_elevation,
            border_radius=18,
        )

    def launch_img_url(self, e):
        """Opens the image in the browser, so the user downloads from there. See it as a way to avoid copyright issues."""
        self.page.launch_url(self.random_img_url)

    def copy_img_url(self, e):
        """Copies the url of this image to the clipboard, and then shows a snackbar to notify the user."""
        self.page.set_clipboard(self.random_img_url)
        self.page.show_snack_bar(
            ft.SnackBar(ft.Text("Image URL copied to clipboard."), open=True)
        )

    def delete_img_card(self, e):
        """When the 'delete' btn is clicked, this card is deleted, and then shows a snackbar to notify the user."""
        self.page.images_row.controls.remove(self)
        self.update()
        self.page.update()
        self.page.show_snack_bar(
            ft.SnackBar(ft.Text("Deletion successful!"), open=True)
        )

    def hover_elevation(self, e):
        """When the card is hovered, increase the elevation and vice-versa."""
        self.elevation = self.HOVERED_ELEVATION if self.elevation == self.NORMAL_ELEVATION else self.NORMAL_ELEVATION
        self.update()


def main(page: ft.Page):
    page.title = "Random Image Generator"
    page.theme_mode = "light"
    page.horizontal_alignment = "center"  # center the controls in the page - just for a beautiful UI

    page.appbar = ft.AppBar(
        title=ft.Text("Random Image Generator"),
        center_title=True,
        bgcolor=ft.colors.BLUE,
        color=ft.colors.WHITE
    )

    def generate_image(e):
        # if any error occurs while creating this card or adding it to the page, show a snackbar with the error
        try:
            page.images_row.controls.append(ImageCard())
            page.update()
        except Exception as error:
            page.show_snack_bar(
                ft.SnackBar(ft.Text(f"An error occurred. {error}"), open=True)
            )

    img_gen_btn = ft.FilledButton(
        text="Generate a Random Image",
        on_click=generate_image
    )

    # a responsive row to store all the cards containing images
    page.images_row = ft.ResponsiveRow()

    page.add(
        img_gen_btn,
        ft.Column(
            [page.images_row],
            scroll=ft.ScrollMode.HIDDEN,
            expand=True
        )
    )


# ft.app(target=main)  # add view=ft.WEB_BROWSER to open the app in the browser
ft.app(target=main, view=ft.WEB_BROWSER)