Skip to content

Files

Latest commit

 

History

History
805 lines (674 loc) · 15.5 KB

roadmap.md

File metadata and controls

805 lines (674 loc) · 15.5 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
    • 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