Skip to main content

SearchBar

A Material Design search bar. It visually looks like a TextField with the difference that, tapping on it opens a search view.

Examples​

Live example

Basic Example​

import flet as ft

def main(page):

    def close_anchor(e):
        text = f"Color {e.control.data}"
        print(f"closing view from {text}")
        anchor.close_view(text)

    def handle_change(e):
        print(f"handle_change e.data: {e.data}")

    def handle_submit(e):
        print(f"handle_submit e.data: {e.data}")

    def handle_tap(e):
        print(f"handle_tap")

    anchor = ft.SearchBar(
        view_elevation=4,
        divider_color=ft.colors.AMBER,
        bar_hint_text="Search colors...",
        view_hint_text="Choose a color from the suggestions...",
        on_change=handle_change,
        on_submit=handle_submit,
        on_tap=handle_tap,
        controls=[
            ft.ListTile(title=ft.Text(f"Color {i}"), on_click=close_anchor, data=i)
            for i in range(10)
        ],
    )

    page.add(
        ft.Row(
            alignment=ft.MainAxisAlignment.CENTER,
            controls=[
                ft.OutlinedButton(
                    "Open Search View",
                    on_click=lambda _: anchor.open_view(),
                ),
            ],
        ),
        anchor,
    )


ft.app(target=main)

Properties​

autofocus​

Whether the text field should focus itself if nothing else is already focused.

Defaults to False.

bar_bgcolor​

Defines the background color of the search bar. See Radio.fill_color for usage examples.

bar_hint_text​

Defines the text to be shown in the search bar when it is empty and the search view is close. Usually some text that suggests what sort of input the field accepts.

bar_leading​

A Control to display before the text input field when the search view is close. This is typically an Icon or an IconButton.

bar_overlay_color​

Defines the highlight color that's typically used to indicate that the search bar is focused, hovered, or pressed. See Radio.fill_color for usage examples.

bar_trailing​

A Control to display after the text input field when the search view is close.

These controls can represent additional modes of searching (e.g voice search), an avatar, or an overflow menu and are usually not more than two.

capitalization​

Enables automatic on-the-fly capitalization of entered text. See TextField.capitalization for possible values.

controls​

The list of controls to be displayed below the search bar when in search view. These controls are usually ListTiles and will be displayed in a ListView.

divider_color​

The color of the divider when in search view.

full_screen​

Defines whether the search view grows to fill the entire screen when the search bar is tapped. Defaults to False.

header_hint_style​

Defines the style of view_hint_text.

header_text_style​

Defines the style of the text being edited on the search view.

keyboard_type​

The type of action button to use for the keyboard. See TextField.keyboard_type for possible values.

value​

The text in the search bar.

view_bgcolor​

Defines the background color of the search view.

view_elevation​

Defines the elevation of the search view.

view_hint_text​

Defines the text to be displayed when the search bar's input field is empty.

view_leading​

A Control to display before the text input field when the search view is open. This is typically an Icon or an IconButton.

Defaults to a back button which closes/pops the search view.

view_shape​

Defines the shape of the search view. See Container.shape for possible values.

view_side​

Defines the color and weight of the search view's outline.

view_surface_tint_color​

Defines the color of the search view's surface tint.

view_trailing​

A list of Controls to display after the text input field when the search view is open. Defaults to a close button which closes/pops the search view.

Events​

on_change​

Fires when the typed input in the search bar has changed.

on_submit​

Fires when user presses ENTER while focus is on SearchBar.

on_tap​

Fires when the search bar is tapped.

Methods​

close_view(text)​

Closes the search view. The text parameter (defaults to an empty string) is the text to be shown in the search bar after the search view is closed.

open_view()​

Opens the search view.