Skip to main content
Material Design controls implement Google’s Material Design language, providing a modern and clean aesthetic commonly used in Android applications and progressive web apps.

​
Overview

Material controls feature:
  • Elevation and shadow effects for depth
  • Ripple effects on interactive elements
  • Bold colors and high contrast
  • Smooth, physics-based animations
  • Responsive layouts

​
Buttons

Material Design offers several button styles for different contexts:

ElevatedButton

Raised button with shadow, used for primary actions

FilledButton

Filled button with bold background color

OutlinedButton

Button with border outline, for secondary actions

TextButton

Flat button without background, for tertiary actions

​
Example

import flet as ft

def main(page: ft.Page):
    page.add(
        ft.ElevatedButton(
            "Elevated",
            icon=ft.Icons.ADD,
            on_click=lambda e: print("Elevated clicked")
        ),
        ft.FilledButton(
            "Filled",
            icon=ft.Icons.SEND,
            on_click=lambda e: print("Filled clicked")
        ),
        ft.OutlinedButton(
            "Outlined",
            icon=ft.Icons.EDIT,
            on_click=lambda e: print("Outlined clicked")
        ),
        ft.TextButton(
            "Text",
            icon=ft.Icons.INFO,
            on_click=lambda e: print("Text clicked")
        ),
    )

ft.app(target=main)

​
Input Controls

TextField

Single or multi-line text input

Checkbox

Binary selection control

Radio

Single selection from multiple options

Switch

Toggle between two states

Slider

Select a value from a range

Dropdown

Select from a dropdown list

​
TextField Example

import flet as ft

def main(page: ft.Page):
    def on_text_change(e):
        print(f"Text changed: {e.control.value}")
    
    page.add(
        ft.TextField(
            label="Name",
            hint_text="Enter your name",
            helper_text="This is your display name",
            on_change=on_text_change
        ),
        ft.TextField(
            label="Password",
            password=True,
            can_reveal_password=True
        ),
        ft.TextField(
            label="Bio",
            multiline=True,
            min_lines=3,
            max_lines=5
        ),
    )

ft.app(target=main)

​
Checkbox and Switch Example

import flet as ft

def main(page: ft.Page):
    def checkbox_changed(e):
        print(f"Checkbox value: {e.control.value}")
    
    page.add(
        ft.Checkbox(
            label="I agree to the terms",
            value=False,
            on_change=checkbox_changed
        ),
        ft.Switch(
            label="Enable notifications",
            value=True,
            on_change=lambda e: print(f"Switch: {e.control.value}")
        ),
    )

ft.app(target=main)

​
Display Controls

Card

Material card with elevation

ListTile

Standard list item with icon and text

DataTable

Display structured data in rows and columns

Chip

Compact element representing an attribute or action

Badge

Small status indicator

Divider

Horizontal line to separate content

​
Card and ListTile Example

import flet as ft

def main(page: ft.Page):
    page.add(
        ft.Card(
            content=ft.Container(
                content=ft.Column([
                    ft.ListTile(
                        leading=ft.Icon(ft.Icons.ALBUM),
                        title=ft.Text("Song Title"),
                        subtitle=ft.Text("Artist Name"),
                        trailing=ft.IconButton(
                            icon=ft.Icons.PLAY_ARROW,
                            on_click=lambda e: print("Play")
                        ),
                    ),
                    ft.Row([
                        ft.TextButton("Share"),
                        ft.TextButton("Download"),
                    ]),
                ]),
                padding=10,
            ),
            elevation=5,
        )
    )

ft.app(target=main)

AppBar

Top app bar with title and actions

NavigationBar

Bottom navigation bar

NavigationRail

Side navigation rail

NavigationDrawer

Sliding drawer navigation

Tabs

Tabbed navigation interface

​
AppBar Example

import flet as ft

def main(page: ft.Page):
    page.appbar = ft.AppBar(
        title=ft.Text("My App"),
        center_title=True,
        bgcolor=ft.Colors.BLUE,
        actions=[
            ft.IconButton(ft.Icons.SEARCH),
            ft.IconButton(ft.Icons.MORE_VERT),
        ],
    )
    
    page.add(ft.Text("Content goes here"))

ft.app(target=main)

​
Progress Indicators

ProgressBar

Linear progress indicator

ProgressRing

Circular progress indicator

​
Progress Example

import flet as ft
import time

def main(page: ft.Page):
    # Indeterminate progress
    page.add(
        ft.ProgressRing(),
        ft.ProgressBar(),
    )
    
    # Determinate progress
    progress = ft.ProgressBar(value=0.5, width=200)
    page.add(progress)

ft.app(target=main)

​
Selectors

DatePicker

Select a date from a calendar

TimePicker

Select a time

Autocomplete

Text field with autocomplete suggestions

​
DatePicker Example

import flet as ft
import datetime

def main(page: ft.Page):
    def date_picker_changed(e):
        print(f"Selected date: {e.control.value}")
    
    date_picker = ft.DatePicker(
        first_date=datetime.datetime(2020, 1, 1),
        last_date=datetime.datetime(2030, 12, 31),
        on_change=date_picker_changed,
    )
    
    page.overlay.append(date_picker)
    
    page.add(
        ft.ElevatedButton(
            "Pick Date",
            icon=ft.Icons.CALENDAR_MONTH,
            on_click=lambda e: date_picker.pick_date()
        )
    )

ft.app(target=main)

​
Dialogs and Overlays

AlertDialog

Modal dialog for important decisions

BottomSheet

Sheet that slides up from bottom

SnackBar

Brief message at bottom of screen

Banner

Important message at top of screen

​
AlertDialog Example

import flet as ft

def main(page: ft.Page):
    def close_dialog(e):
        dialog.open = False
        page.update()
    
    dialog = ft.AlertDialog(
        title=ft.Text("Confirm Action"),
        content=ft.Text("Are you sure you want to proceed?"),
        actions=[
            ft.TextButton("Cancel", on_click=close_dialog),
            ft.TextButton("OK", on_click=close_dialog),
        ],
    )
    
    page.overlay.append(dialog)
    
    page.add(
        ft.ElevatedButton(
            "Show Dialog",
            on_click=lambda e: (setattr(dialog, 'open', True), page.update())
        )
    )

ft.app(target=main)

​
Special Controls

FloatingActionButton

Prominent circular action button

PopupMenuButton

Menu that appears on press

Tooltip

Informational popup on hover

SearchBar

Expandable search input

​
Next Steps

​
API Reference

For detailed properties and methods, see:

Build docs developers (and LLMs) love

Get started for freeTalk to us