TextField in Flet

 The TextField component in Flet is a Material Design text input field that allows users to enter text using either a hardware keyboard or an onscreen keyboard. It provides various customization options, making it versatile for different use cases, from simple text inputs to password fields and multiline text areas.

Basic Usage of TextField

A basic TextField can be created using Flet with minimal configuration. Below is an example demonstrating different types of text fields:

import flet as ft

def main(page: ft.Page):
    def button_clicked(e):
        t.value = f"Textboxes values are:  '{tb1.value}', '{tb2.value}', '{tb3.value}', '{tb4.value}', '{tb5.value}'."
        page.update()

    t = ft.Text()
    tb1 = ft.TextField(label="Standard")
    tb2 = ft.TextField(label="Disabled", disabled=True, value="First name")
    tb3 = ft.TextField(label="Read-only", read_only=True, value="Last name")
    tb4 = ft.TextField(label="With placeholder", hint_text="Please enter text here")
    tb5 = ft.TextField(label="With an icon", icon=ft.Icons.EMOJI_EMOTIONS)
    b = ft.ElevatedButton(text="Submit", on_click=button_clicked)
    page.add(tb1, tb2, tb3, tb4, tb5, b, t)

ft.app(main)

Handling Text Changes

The on_change event allows real-time tracking of user input. Here’s an example:

import flet as ft

def main(page: ft.Page):
    def textbox_changed(e):
        t.value = e.control.value
        page.update()

    t = ft.Text()
    tb = ft.TextField(
        label="Textbox with 'change' event:",
        on_change=textbox_changed,
    )
    
    page.add(tb, t)

ft.app(main)

Password Field with Reveal Button

A password field can be created with an option to reveal the entered text:

import flet as ft

def main(page: ft.Page):
    page.add(
        ft.TextField(
            label="Password with reveal button", password=True, can_reveal_password=True
        )
    )

ft.app(main)

Multiline TextFields

For entering multi-line text, you can use the multiline property:

import flet as ft

def main(page: ft.Page):
    page.add(
        ft.TextField(label="Standard", multiline=True),
        ft.TextField(
            label="Disabled",
            multiline=True,
            disabled=True,
            value="line1\nline2\nline3\nline4\nline5",
        ),
        ft.TextField(
            label="Auto adjusted height with max lines",
            multiline=True,
            min_lines=1,
            max_lines=3,
        ),
    )

ft.app(main)

Customizing Borders

TextFields can be customized with different border styles:

import flet as ft

def main(page: ft.Page):
    page.add(
        ft.TextField(label="Underlined", border="underline", hint_text="Enter text here"),
        ft.TextField(label="Borderless", border="none", hint_text="Enter text here"),
    )

ft.app(main)

Using Prefixes and Suffixes

You can add prefixes and suffixes to a TextField, such as a URL prefix:

import flet as ft

def main(page: ft.Page):
    page.add(
        ft.TextField(label="With prefix", prefix_text="https://"),
        ft.TextField(label="With suffix", suffix_text=".com"),
        ft.TextField(
            label="With prefix and suffix", prefix_text="https://", suffix_text=".com"
        ),
    )

ft.app(main)

Key Properties of TextField

• adaptive: Creates a platform-adaptive text field (iOS/macOS vs. others).

• autocorrect: Enables or disables autocorrection.

• autofocus: Automatically focuses the field on page load.

• border: Sets the input field’s border type (outline, underline, or none).

• can_reveal_password: Allows toggling password visibility.

• color: Changes the text color.

• cursor_color, cursor_width, cursor_height: Customizes the cursor.

• error_text: Displays error messages below the field.

• fill_color: Sets the background color.

• hint_text: Adds placeholder text.

• icon, prefix_icon, suffix_icon: Adds icons before or after the text field.

• max_length: Limits character count.

• multiline: Enables multiple lines of text input.

• on_change, on_submit: Adds event listeners.

• password: Hides input for sensitive information.

• prefix_text, suffix_text: Adds text before or after input.

• text_align: Sets text alignment (left, center, right).

Conclusion

The TextField component in Flet is highly customizable and supports various configurations to meet different user requirements. Whether you need a simple text box, a password field, or a multi-line input, Flet’s TextField provides the flexibility to build efficient and user-friendly input fields.

Copyright Statement: Unless stated otherwise, all articles are original to this site, please credit the source when sharing.

Article link:http://pybeginners.com/python-flet/textfield-in-flet/

License Agreement:Attribution-NonCommercial 4.0 International License