roadmap.md 15 KB

Flet Roadmap

Sprint 1

  • Controls

    • Common
    • Control
    • Page
    • Layout
    • Container
    • Row (flex - default mode, wrap)
    • Column (flex - default mode, wrap)
    • Stack
    • ListView
    • GridView
    • Divider
    • VerticalDivider
    • App structure and navigation
    • Tabs
    • AppBar
    • NavigationRail
    • Basic controls
    • Text
    • Icon
    • Image (+custom assets directory for Flet server see here).
    • CircleAvatar
    • ProgressBar
    • ProgressRing
    • Buttons
    • ElevatedButton
    • FilledButton
    • FilledTonalButton
    • OutlinedButton
    • TextButton
    • IconButton
    • FloatingActionButton
    • PopupMenuButton
    • Input and selections
    • TextField
    • Dropdown
    • Checkbox
    • RadioGroup and Radio
    • Slider
    • Switch
    • Dialogs, alerts and panels
    • Banner
    • SnackBar
    • AlertDialog
  • Flet Client

    • Web
    • Windows ("client" mode - started from Python)
    • macOS ("client" mode - started from Python)
  • Flet Daemon

    • "assets" directory with static content
  • Samples apps

    • Counter
    • To-Do
    • Icon browser
    • Chat
  • Website

    • Controls S1 reference
    • Introduction
    • Home page
    • Blog post
    • Python Guide
    • Deployment (+how to change favicon.ico)
      • Deployment to Replit
      • Deployment to Fly.io

Sprint 2

  • Authentication
  • Controls

    • Navigation
    • NavigationDrawer
    • NavigationBar
    • Layout
    • Row (responsive)
    • Column (responsive)
    • Behavior
    • Visual Density (more)
    • Early detection of layout issues (like enabling scrolling in unbounded controls) with Layout Builder.
    • Scroll speed on Windows Desktop The issue
  • Flet Client

    • Web
    • Loading splash
    • Windows ("host" mode with hot reload)
    • macOS ("host" mode with hot reload)

Year 2022

  • Grids
  • Charts
  • Navigation controls and Routing
  • Responsive layout
  • Adaptive controls
  • Animations
  • PubSub
  • DB

Controls

✓ Status Flet Pglet Sprint
Layout
Container Stack S1
Row Stack horizontal=True S1 (flex, wrap)
Column Stack horizontal=False S1 (flex, wrap)
Stack - S1
ListView Stack horizontal=False S1
Divider -
Spacer -
GridView - S1
SplitView SplitStack
Card -
Basic controls
Text Text S1
Markdown Text markdown=True
Icon Icon S1
Image Image S1
CircleAvatar Persona S1
Chip -
To-Do Link
ProgressBar Progress S1
ProgressRing Spinner S1
Buttons
ElevatedButton Button primary=True S1
OutlinedButton Button primary=False S1
TextButton Button action=True S1
IconButton Button icon={icon_name} S1
PopupMenuButton Button with MenuItems
FloatingActionButton - S1
Input and selections
Checkbox Checkbox S1
Radio ChoiceGroup S1
Dropdown Dropdown S1
- ComboBox
DatePicker DatePicker
TimePicker -
[Example] SearchBox
Slider Slider S1
TextField Textbox S1
Switch Toggle S1
SpinBox SpinButton
Dialogs, alerts, and panels
Banner Message S1
SnackBar - S1
AlertDialog Dialog S1
SimpleDialog -
BottomSheet -
ExpansionPanel -
App structure and navigation
Appbar
BottomNavigationBar
Drawer
TabBar
Tabs Tabs
Grids
DataTable Grid
Table -
Utility controls
- Html
- IFrame
- Persona

Clients (Flet View)

  • Web - S1
  • Windows - S1
  • macOS - S1
  • iOS
  • Android

Colors

Icons

Full list of Material icons

Control

Base control class.

Properties:

  • visible
  • disabled

  • expand (int) - The control is forced to fill the available space inside Row or Column. Flex factor specified by the property. Default is 1. The property has affect only for direct descendants of Row and Column controls. (Wrap control into Expanded).

  • flex (S2) (int) - The child can be at most as large as the available space (but is allowed to be smaller) inside Row or Column. Flex factor specified by the property. Default is 1. The property has affect only for direct descendants of Row and Column controls. (Wrap control into Flexible with fit=FlexFit.loose).

The only difference if you use Flexible instead of Expanded, is that Flexible lets its child have the same or smaller width than the Flexible itself, while Expanded forces its child to have the exact same width of the Expanded. But both Expanded and Flexible ignore their children’s width when sizing themselves.

  • width - wrap into SizedBox
  • height - wrap into SizedBox
  • minHeight (S2) - wrap into ConstrainedBox
  • maxHeight (S2) - wrap into ConstrainedBox
  • minWidth (S2) - wrap into ConstrainedBox
  • maxWidth (S2) - wrap into ConstrainedBox

  • fit (S2)

  • fitAlign (S2) - Wrap into FittedBox

  • opacity - allows to specify transparency of the control, hide it completely or blend with another if used with Stack. 0.0 - hidden, 1.0 - fully visible. See https://api.flutter.dev/flutter/widgets/Opacity-class.html.

More info:

ListView

Docs:

Properties:

  • scrollDirection - vertical (default), horizontal.
  • padding
  • spacing
  • autoScroll - scroll to end on items update

ListTile (S2)

Docs: https://api.flutter.dev/flutter/material/ListTile-class.html

Properties:

  • contentPadding
  • ...

GridView

Docs: https://api.flutter.dev/flutter/widgets/GridView-class.html

Properties:

  • scrollDirection - vertical (default), horizontal.
  • padding
  • runsCount
  • spacing
  • runSpacing

Card

Docs: https://api.flutter.dev/flutter/widgets/Card-class.html

Divider

Docs: https://api.flutter.dev/flutter/widgets/Divider-class.html

Properties:

  • height
  • thickness
  • indent
  • endIndent
  • color

Text

Docs: https://api.flutter.dev/flutter/material/Text-class.html

Selectable text docs: https://api.flutter.dev/flutter/material/SelectableText-class.html

TextTheme: https://api.flutter.dev/flutter/material/TextTheme-class.html

  • value
  • textAlign - center, end, justify, left, right, start (for RTL and LTR texts)
  • size
  • weight - bold, normal, w100, w200, ... see all
  • italic
  • style (more details)
  • pre (S2) - more info
  • color
  • bgColor
  • overflow - (TextOverflow) clip, ellipsis, fade, visible
  • selectable
  • tooltip
  • noWrap

Icon

Docs: https://api.flutter.dev/flutter/widgets/Icon-class.html

Icons list: https://raw.githubusercontent.com/flutter/flutter/master/packages/flutter/lib/src/material/icons.dart

Properties:

  • semanticLabel (S2) - Text to announce in accessibility modes

Image

Docs: https://api.flutter.dev/flutter/widgets/Image-class.html

Properties:

  • opacity (S2) - override control's opacity
  • semanticLabel (S2)

RadioGroup

Properties:

  • value - selected value
  • content

Events:

  • change

Radio

Docs: https://api.flutter.dev/flutter/material/Radio-class.html

Properties:

  • label
  • labelPosition
  • value - radio's value
  • tooltip
  • autofocus

Events:

  • focus
  • blur

Slider

Docs: https://api.flutter.dev/flutter/material/Switch-class.html

Properties:

  • value
  • label - use {value}
  • min
  • max
  • divisions
  • tooltip
  • autofocus

Events:

  • change
  • focus
  • blur

Switch

Docs: https://api.flutter.dev/flutter/material/Switch-class.html

Properties:

  • label
  • labelPosition
  • value
  • tooltip
  • autofocus

Events:

  • change
  • focus
  • blur

Checkbox

Docs: https://api.flutter.dev/flutter/material/Checkbox-class.html

Properties:

  • value
  • tristate
  • label
  • labelPosition
  • tooltip
  • autofocus

Events:

  • change
  • focus
  • blur

Dropdown

Docs: https://api.flutter.dev/flutter/material/DropdownButtonFormField-class.html

Properties:

  • label
  • icon
  • border
  • filled
  • hintText
  • helperText
  • counterText
  • errorText
  • prefix: Control
  • suffix: Control
  • tooltip

  • value

  • options

  • autofocus

Events:

  • change
  • focus
  • blur

TextField

Docs: https://api.flutter.dev/flutter/material/TextFormField-class.html

Properties:

  • label
  • icon
  • border
  • filled
  • hintText
  • helperText
  • counterText
  • errorText
  • prefix: Control
  • suffix: Control
  • tooltip
  • autofocus

  • value

  • keyboardType

  • multiline

  • minLines

  • maxLines

  • password

  • canRevealPassword - true/false

  • readOnly

  • shiftEnter

  • textAlign

Events:

  • change
  • focus
  • blur

AlertDialog

Docs: https://api.flutter.dev/flutter/material/AlertDialog-class.html

Properties:

  • open - bool
  • modal - true/false (barrierDismissible)
  • title (Control)
  • titlePadding
  • content (Control)
  • contentPadding
  • actions (Controls)
  • actionsPadding
  • actionsAlignment (mainAxisAlignment)

Events:

  • dismiss - fires when non-modal dialog is dismissed by clicking an area outside it.

Banner

Docs: https://api.flutter.dev/flutter/material/MaterialBanner-class.html

Properties:

  • open - bool
  • leading (Control)
  • leadingPadding
  • content (Control)
  • contentPadding
  • actions (Controls)
  • forceActionsBelow
  • bgColor

SnackBar

Docs: https://api.flutter.dev/flutter/material/SnackBar-class.html

Properties:

  • open
  • removeCurrentSnackBar
  • content (Control)
  • action - action button label
  • duration (S2)
  • behavior (S2)
  • bgColor (S2)
  • margin (S2)
  • padding (S2)
  • width (S2)

Events:

  • action - when action button clicked

Tabs

Properties:

  • tabs
  • value
  • animationDuration - in milliseconds

Events:

  • change

Tab

  • key
  • text
  • tabContent
  • content
  • icon

SplitView

Docs: https://pub.dev/packages/split_view