flet-mobile-preview

flet-mobile-preview

flet-mobile-preview is a Python package that provides a preview of an iPhone 13 interface using the Flet framework. This package allows you to simulate the appearance of an iPhone 13 on your desktop, making it easier to design and test mobile interfaces.

Installation

You can install the package using pip:

pip install flet-mobile-preview

Usage

Here is an example of how to use the flet-mobile-preview package:

import flet as ft
from flet_mobile_preview.iPhone import iPhone13

def main(page: ft.Page):
    def change_text_color(e):
        text.color = ft.Colors.random(exclude=["white"])
        text.update()

    phone = iPhone13(page=page, zoom=1)

    text = ft.Text("Hello Flet Devs", weight="bold", size=18, color="black")

    phone.body = ft.Column(
        controls=[text],
        alignment=ft.MainAxisAlignment.CENTER,
        horizontal_alignment=ft.CrossAxisAlignment.CENTER,
        expand=True,
        width=float("inf"),
    )

    phone.appBar = ft.AppBar(
        title=ft.Text("Flet App", size=16, color="white", weight="bold"),
        bgcolor="blue",
        leading=ft.Icon(ft.Icons.MENU, color="white"),
        actions=[
            ft.Icon(
                ft.Icons.NOTIFICATIONS,
                color="white",
                offset=ft.Offset(-0.5, 0),
            )
        ],
    )

    phone.floating_action_button = ft.FloatingActionButton(
        icon=ft.Icons.CHANGE_CIRCLE,
        bgcolor="blue",
        shape=ft.CircleBorder(),
        tooltip="Click to change text color",
        on_click=change_text_color,
    )

    phone.run()

ft.app(target=main)

Changing the Title Bar and Phone Bar Colors

You can customize the colors of the title bar and phone bar by setting the bg_color_title_bar and color_title_bar attributes of the iPhone13 class. Here is an example:

import flet as ft
from flet_mobile_preview.iPhone import iPhone13

def main(page: ft.Page):
    phone = iPhone13(page=page, zoom=1)

    phone.bg_color_title_bar = "green"
    phone.color_title_bar = "yellow"

    phone.run()

ft.app(target=main)

Customizing the Frame Color and Buttons of Frame Color

You can also customize the frame color and the buttons of the frame color by setting the color_frame and color_buttons_frame attributes. Here is an example:

import flet as ft
from flet_mobile_preview.iPhone import iPhone13

def main(page: ft.Page):
    phone = iPhone13(page=page, zoom=1)

    phone.color_frame = "purple"
    phone.color_buttons_frame = "orange"

    phone.run()

ft.app(target=main)

Adding a Floating Action Button and App Bar

You can add a floating action button and an app bar to the iPhone preview. Here is an example:

import flet as ft
from flet_mobile_preview.iPhone import iPhone13

def main(page: ft.Page):
    def change_text_color(e):
        text.color = ft.Colors.random(exclude=["white"])
        text.update()

    phone = iPhone13(page=page, zoom=1)

    text = ft.Text("Hello Flet Devs", weight="bold", size=18, color="black")

    phone.body = ft.Column(
        controls=[text],
        alignment=ft.MainAxisAlignment.CENTER,
        horizontal_alignment=ft.CrossAxisAlignment.CENTER,
        expand=True,
        width=float("inf"),
    )

    phone.appBar = ft.AppBar(
        title=ft.Text("Flet App", size=16, color="white", weight="bold"),
        bgcolor="blue",
        leading=ft.Icon(ft.Icons.MENU, color="white"),
        actions=[
            ft.Icon(
                ft.Icons.NOTIFICATIONS,
                color="white",
                offset=ft.Offset(-0.5, 0),
            )
        ],
    )

    phone.floating_action_button = ft.FloatingActionButton(
        icon=ft.Icons.CHANGE_CIRCLE,
        bgcolor="blue",
        shape=ft.CircleBorder(),
        tooltip="Click to change text color",
        on_click=change_text_color,
    )

    phone.run()

ft.app(target=main)

Features

• Simulate the appearance of an iPhone 13 on your desktop.
• Minimize, update, and close the preview window.
• Customize the title bar and phone bar colors.
• Customize the frame color and buttons of frame color
• Add floating action button and app bar.

License

This project is licensed under the MIT License. See the LICENSE file for details.

Contributing

Contributions are welcome! Please open an issue or submit a pull request on GitHub.

Author

This package is developed by Victoire243.

Acknowledgements

Special thanks to @Salakhddinov for giving the idea to create this package.