- Fixed
TreeView
selection state behavior for items that are not expanded (#578) - Added support for Romanian language
- Update documentation
NavigationView
scrollbar can now be dragged (#472)PaneItemHeader
can now be used inside aPaneItemExpander
(#575)InfoBadge
no longer overflows when transitioning from compact mode to open mode inNavigationView
(#588)
- Add
NavigationView.paneBodyBuilder
for customization of widget built for body of pane. (#548) - Fixed
NavigationAppBar
unnecessary leading icon when no pane is provided inNavigationView
(#551) - Added
NavigationView.minimalPaneOpen
and, with it, the possibility to open minimal pane programatically (#564) - Assign an index to pane item expanders (#566)
- Update
NavigationView
compact mode transition TreeView
updates (#555):- BREAKING Added
TreeViewItemInvokeReason
parameter toTreeView.onItemInvoked
andTreeViewItem.onInvoked
. - Fix clearing out selection state on initial state build in certain cases for a single selection mode tree view.
- Fix single selection mode to properly deselect hidden child items when selecting a collapsed parent item.
- Add
TreeView.includePartiallySelectedItems
so that items who have children with a mixed selection state will be included in theonSelectionChanged
callback. - Add
TreeView.deselectParentWhenChildrenDeselected
optional behavior so that parent items can remain selected when all of their children are deselected. - Add
TreeViewItem.setSelectionStateForMultiSelectionMode
helper method and[TreeViewItem].selectedItems
extension method, to make it easier for application code to programmatically change selection state of items in a multi-selection mode tree view.
- BREAKING Added
- Added support for Uzbek language
PaneItemAction.body
is no longer required (#545)- Added
DropDownButton.onOpen
andDropDownButton.onClose
callbacks (#537) - Ensure
MenuFlyoutItem.onPressed
is called after the flyout is closed ifDropDownButton.closeAfterClick
is true (#520) - Ensure the
TimePicker
andDatePicker
popups will fit if the screen is small (#544) - Do not apply padding to
NavigationAppBar.leading
(#539) - Added
AutoSuggestBox.noResultsFoundBuilder
(#542) - Added
AutoSuggestBox.inputFormatters
(#542) - Added support for Hebrew language
-
BREAKING Removed
NavigationBody
. UsePaneItem.body
instead (#510/#531):
Before:NavigationView( pane: NavigationPane( items: [ PaneItem(icon: Icon(FluentIcons.add)), PaneItem(icon: Icon(FluentIcons.add)), PaneItem(icon: Icon(FluentIcons.add)), ], ), content: NavigationBody( children: [ _Item1(), _Item2(), _Item3(), ], ), ),
Now:
NavigationView( ... pane: NavigationPane( items: [ PaneItem( icon: Icon(FluentIcons.add), body: _Item1(), ), PaneItem( icon: Icon(FluentIcons.add), body: _Item2(), ), PaneItem( icon: Icon(FluentIcons.add), body: _Item3(), ), ], ), ),
Or if you don't have a pane, you can use the content like the following:
NavigationView( content: ScaffoldPage( header: PageHeader( title: titleRow, ), content: child, ), ),
either one attribute of pane or content must not be null
Use
NavigationView.transitionsBuilder
to create custom transitions -
Added
PaneItem.onTap
(#533) -
Compact pane is no longer toggled when item is selected (#533). To toggle it programatically, use
NavigationViewState.toggleCompactOpenMode
when an item is tapped -
Dynamic header height for open pane (#530)
-
Fixes memory leaks on
NavigationView
-
TreeView
updates:-
All items of the same depth level now have the same indentation. Before, only items with the same parent were aligned.
-
The hitbox for the expand icon of each item now uses the item's full height and is three times wider than the actual icon. This corresponds to the implementation in the explorer of Windows 10/11.
-
You can now choose whether the items of a TreeView should use narrow or wide spacing.
-
Do not invoke the tree view item on secondary tap (#526)
-
BREAKING
TreeView.onSecondaryTap
is now a(TreeViewItem item, TapDownDetails details)
callback: Before:TreeView( ..., onSecondaryTap: (item, offset) async {} ),
Now:
TreeView( ..., onSecondaryTap: (item, details) { final offset = details.globalPosition; }, )
-
Expand/collape items with right and left arrow keys, respectively (#517)
-
Added
TreeView.onItemExpandToggle
andTreeViewItem.onExpandToggle
(#522)
-
-
BREAKING
AutoSuggestBox
dynamic type support (#441):Before:
AutoSuggestBox( items: cats.map((cat) { return AutoSuggestBoxItem( value: cat, onFocusChange: (focused) { if (focused) debugPrint('Focused $cat'); } ); }).toList(), onSelected: (item) { setState(() => selected = item); }, ),
Now:
AutoSuggestBox<String>( items: cats.map((cat) { return AutoSuggestBoxItem<String>( value: cat, label: cat, onFocusChange: (focused) { if (focused) debugPrint('Focused \$cat'); } ); }).toList(), onSelected: (item) { setState(() => selected = item); }, ),
DisableAcrylic
now fully disable transparency of its decendentsAcrylic
s (#468)- Do not interpolate between infinite constraints on
TabView
(#430) - Do not rebuild the
TimePicker
popup when already rebuilding (#437) ToggleSwitch
updates:- Added
TextChangedReason.cleared
, which is called when the text is cleared by the user in anAutoSuggestBox
(#461) - Call
AutoSuggestBox.onChanged
when an item is selected using the keyboard (#483) Tooltip
overlay is now ignored when hovered (#443)- Do not add unnecessary padding in
DropdownButton
(#475) ComboBox
updates:- BREAKING Renamed
Combobox
toComboBox
- BREAKING Renamed
ComboboxItem
toComboBoxItem
- BREAKING Renamed
ComboBox.backgroundColor
toComboBox.popupColor
- Implement
EditableComboBox
, a combo box that accepts items that aren't listed (#244) ComboBox.isExpanded: false
now correctly sets the button width (#382)ComboBox
's items height are correctly calculated, as well as initial scroll offset (#472)- BREAKING
ComboBox.disabledHint
was renamed toComboBox.disabledPlaceholder
- Added
ComboBoxFormField
andEditableComboBoxFormField
(#373) ComboBox.comboBoxColor
is now correctly applied (#468)ComboBox
popup can't be opened if disabled
- BREAKING Renamed
- Implemented
PaneItemExpander
(#299) TimePicker
andDatePicker
popup now needs a minimum width of 260 (#494)- Correctly align
NavigationAppBar
content (#494) - BREAKING Added
InfoLabel.rich
.InfoLabel
is no longer a constant contructor (#494) - Always add
GlobalMaterialLocalizations
aboveReorderableListView
(#492) - BREAKING Removed
ContentDialog.backgroundDismiss
. UseshowDialog.barrierDismissable
(#490) - Reviewed focus (#496)
DatePicker
andTimePicker
now show the focus highlight. Their popup now can be controlled using the keyboardNavigationBody
now uses aFocusTraversalGroup
to handle focus This means the the content of the body will be fully traversed before moving on to another widget or group of widgets. Learn moreTreeViewItem
now shows the focus highlight. They can also be selected using the keyboardExpander
now shows the focus highlight
- Progress Indicators velocity is no longer affected by device frame rate (#502)
- Added
AutoSuggestBox.enabled
(#504) - Correctly keep the
NavigationView
animation state (cf0fae1 ,bd89ba6) - Calculate
selected
for all parents as soon as theTreeView
is built
-
NavigationView
mode fixes:- When top overflow menu is opened,
PaneItemHeader
no longer throws an unsupported error - When on top mode,
PaneItemHeader
is properly aligned to the other items. - Added
NavigationPaneThemeData.headerPadding
, which is applied toPaneItemHeader
on open, compact and minimal mode. It defaults to 10 pixels at the top - BREAKING
PaneItem.getPropertyFromTitle
is nowwidget.getProperty
:
Before:
getPropertyFromTitle<TextStyle>()
Now:
title.getProperty<TextStyle>()
This was changed because the properties of
PaneItemHeader
needed to be accessed, but the old version only supported to get the properties ofPaneItem.title
. It can be called on aText
,RichText
or in anIcon
widgetInheritedNavigationView
is now accessible on the top overflow menu- Added
NavigationPaneThemeData.selectedTopTextStyle
andNavigationPaneThemeData.unselectedTopTextStyle
, which is applied to the items on top mode - Fixed
content
focus on minimal mode - Updated default transitions for top mode:
HorizontalSlidePageTransition
- When top overflow menu is opened,
-
Fix incorrect translation of
TimePicker
in Traditional Chinese. -
Added
ScaffoldPage.resizeToAvoidBottomInset
(#444) -
Consider view padding for
NavigationAppBar
-
Scrollbar
updates (#356):- Correctly use
backgroundColor
to display the track color - Added
padding
andhoveringPadding
- Check if animation is disposed before using it (#446)
- Correctly use
-
Update
AutoSuggestBox
(#450):- Added
.enableKeyboardControls
. When true, items can be selected using the keyboard (#19) - Added
.sorter
, which lets you set a custom sort function for the suggestions.AutoSuggestBox.defaultItemSorter
is used by default - Overlay's height is now correctly calculated based on the screen size. It no longer overlaps the screen.
viewPadding
is also taken into consideration - Close the overlay if the textbox width is changes (#456)
.items
can be dynamically loaded (#387)- BREAKING
.items
is now aList<AutoSuggestBoxItem>
: Before:
AutoSuggestBox( items: [ 'Cat', 'Dog', 'Bird', 'Horse', ], ... ),
Now:
AutoSuggestBox( items: [ 'Cat', 'Dog', 'Bird', 'Horse', ].map((animal) { return AutoSuggestBoxItem( value: animal, // this takes a String child: Text('Animal $animal'), // this takes a Widget. If null, value is displayed as a text onFocusChange: (focused) { // this is called when the item is focused using the keyboard arrow keys if (focused) debugPrint('Focused animal $animal'); }, onSelected: () { // this is called when the item is selected debugPrint('Selected animal $animal'); } ); }).toList(), ... )
- Added
-
Combobox
updates (#454): -
Correctly check if a locale is supported (#455)
- Remove whitespace on
ContentDialog
if title is omitted (#418) - Apply correct color to the Date and Time Pickers button when selected (#415, #417)
- Expose more useful properties to
AutoSuggestBox
(#419) - BREAKING
PopupContentSizeInfo
was renamed toContentSizeInfo
- Reworked
ListTile
(#422):- BREAKING Removed
TappableListTile
- Added support for single and multiple selection. Use
ListTile.selectable
(#409) - Added focus support
- Use the Win UI design
- BREAKING Removed
- Reviewed animation durations (#421)
- BREAKING Removed
.animationDuration
and.animationCurve
fromScrollbarThemeData
- Added
expandContractAnimationDuration
andcontractDelay
toScrollbarThemeData
- BREAKING Removed
NavigationPaneSize
constraints are now correctly applied when in open mode (#336)NavigationIndicator
can't be invisble anymore when animation is stale (#335)- Updated
TabView
:-
BREAKING Removed
TabView.bodies
. Now,Tab.body
is used. BeforeTabView( tabs: [ Tab(text: Text('Tab 1')), Tab(text: Text('Tab 2')), ], bodies: [ Tab1Body(), Tab2Body(), ], ),
Now:
TabView( tabs: [ Tab( text: Text('Tab 1'), body: Tab1Body(), ), Tab( text: Text('Tab 2'), body: Tab2Body(), ), ], ),
-
Updated
TabView
tabs' constraints and padding -
Fixed tab width when
TabWidthBehavior
iscompact
-
FlutterLogo
is no longer the default tab Icon
-
DropDownButton
menu is now sized correctly according to the screen size- If there isn't enough space to display the menu on the preferred position,
Flyout
will display on the opposite position (#435)
-
Exposed private properties that makes it easier to create custom panes for
NavigationView
(#365):kCompactNavigationPaneWidth
kOpenNavigationPaneWidth
NavigationPane.changeTo
PaneItem.getPropertyFromTitle
-
PaneScrollConfiguration
is now applied to custom pane onNavigationView
-
Added
NavigationViewState.displayMode
. It results in the current display mode used by the view, including the automatic display mode (#360):// Define the key final key = GlobalKey<NavigationViewState>(); NavigationView( // pass the key to the view key: key, ..., ) // Get the current display mode. Note that, in order to find out the automatic display mode, // the widget must have been built at least once final PaneDisplayMode currentDisplayMode = key.currentState.displayMode;
-
The app bar action no longer overflow when minimal pane/compact overlay is open (#361)
-
Update
AutoSuggestBox
:- It now uses
Acrylic
, but it can be disabled usingDisableAcrylic
TextChangedReason.suggestionChoosen
is now called properly
- It now uses
-
Updated
TextBox
:TextBox
colors were updated to match the Win 11 design.- Fluent Text Selection Control now make use of
Acrylic
. Its items were also updated
-
Updated pickers (#406):
- If
selected
is null, a placeholder text is shown (#306) - Added new localization messages:
hour
,minute
,AM
,PM
,month
,day
andyear
. - BREAKING Removed
.hourPlaceholder
,.minutePlaceholder
,.amText
,.pmText
fromTimePicker
. It was replaced, respectivelly, by thehour
,minute
,AM
,PM
localization messages - On
DatePicker
, it's now possible to change the order of the fields:
DatePicker( ..., fieldOrder: [ DatePickerField.day, DatePickerField.month, DatePickerField.year, ], )
The fields are ordered based on the current locale by default
- On
DatePicker
, the day and year fields are now formatted based on the current locale (getDateOrderFromLocale
)
- If
-
Update
Slider
(#405):- Added
.thumbRadius
and.trackHeight
toSliderThemeData
- The active track now isn't taller than the inactive track
- Added
- Show menu button on automatic minimal display mode (#350)
- BREAKING
Map<ShortcutActivator, Intent>?
is now the typed used onFluentApp.shortcuts
(#351) TextBox
review (#352):- Added
.initialValue
,.selectionControls
,.mouseCursor
,.textDirection
,.scribbleEnabled
and.enableIMEPersonalizedLearning
toTextBox
- Added
AutoFillClient
toTextBox
- Added
UnmanagedRestorationScope
toTextFormBox
- Added
- Added
AutoSuggestBox.form
, that usesTextFormBox
instead ofTextBox
(#353) - Do not overflow when text is too long on
Chip
(#322) - Add RTL support for
Chip
Card
updates:- Updated card's background colors
- BREAKING Removed
Card.elevation
- Added
Card.margin
, which is the margin around the card
- Updated
Combobox
andButton
designs - Updated
NavigationPane
behaviour. Now, if the header is null, the space it should have taken will be removed from the pane (display mode affected: minimal, open only) (#359) - Reviewed
DatePicker
andTimePicker
(#357)- Correctly apply dimensions and positions to both pickers
- Update the picker popup style and behavior
- Colors Update (#368):
- Added
ResourceDictionary
, which provides default colors to be used on components - (forms) Updated
Combobox
style. It now usesAcrylic
on the combobox popup menu - (buttons) Updated
Button
,FilledButton
,IconButton
andTextButton
styles - (toggleable inputs) Updated
Checkbox
,Chip
,RadioButton
,RatingBar
,ToggleButton
andToggleSwitch
- BREAKING Updated
Slider
:SliderThemeData.thumbColor
,SliderThemeData.activeColor
andSliderThemeData.inactiveColor
now are of typeButtonState<Color?>?
, which handles the button color on different states.SliderThemeData.disabledThumbColor
,SliderThemeData.disabledActiveColor
andSliderThemeData.disabledInactiveColor
were removed- Before:
SliderThemeData( thumbColor: Colors.green, ),
- Now:
SliderThemeData( // Apply Colors.green for all button states. Instead you can use ButtonState.resolveWith to use different values according to the current state thumbColor: ButtonState.all(Colors.green), ),
- BREAKING Updated
- (navigation) Updated
NavigationView
,PaneItem
andScaffoldPage
- Updated
TabView
and its tabs styles. AFocusBorder
is now used to display the focus highlight of the tabs - All combinations of
BorderRadius
can now be used onFocusBorder
- Updated
- (surfaces) Updated
Card
,ContentDialog
,InfoBar
,Expander
,Flyout
and `Divider``- Added
InfoBar.isIconVisible
- Added
- (indicators) Updated
ProgressBar
,ProgressRing
andInfoBadge
- (other) Added helper methods for
AccentColor
:AccentColor.defaultBrushFor
,AccentColor.secondaryBrushFor
andAccentColor.tertiaryBrushFor
- Polish translation added
- Added
- Reworked
DropDownButton
(#297):DropDownButton
now usesFlyout
andMenuFlyout
to display the menu- Added scrolling features and style to
MenuFlyout
MenuFlyout
content height is now properly calculated (Fixes #210)DropDownButtonItem
is deprecated.MenuFlyoutItem
should be used instead- Added
DropDownButton.buttonBuilder
, which is able to style the button as you wish.DropDownButton.buttonStyle
is now deprecated
DropDownButton( items: [...], // onOpen should be called to open the flyout. If onOpen is null, it means the button // should be disabled buttonBuilder: (context, onOpen) { return Button( ..., onPressed: onOpen, ); } )
TextButton
now usestextButtonStyle
instead ofoutlinedButtonStyle
- Add
TextFormBox.decoration
(#312)
- Implemented
MenuFlyout
(#266)- Implemented
FlyoutPosition
, which controls where the flyout will be opened according to the child. It can beabove
,below
orside
FlyoutOpenMode.longHover
, which makes possible to open the flyout when the user performs a long hover- Added
Flyout.onOpen
andFlyout.onClose
. Some convenience callbacks that are called when the flyout is opened or closed, respectively - Implement
PopupContentSizeInfo
, which provides the information about the content size - Implemented
MenuFlyoutItem
,MenuFlyoutSeparator
andMenuFlyoutSubItem
. They are used insideMenuFlyout
to render the menu items horizontalPositionDependentBox
is now globally available for use as a top function
- Implemented
- Implemented overflow popup on
NavigationView
for top mode (#277) InfoBadge
now is correctly positioned on top mode (#296)
- Do not use duplicated
Scrollbar
s (#279) - Allow custom height on
NavigationPane
header. (#260) - Allow to define the minimal tab width (#282)
- Allow applying custom leading Widget to NavigationPane (#288)
TextFormBox.expands
now works properly ([#291]](bdlukaa#291))- Focus on
TextBox
is no longer duplicated (#290)
NavigationView
without pane no longer throws error (#276)
- Fix overflow behavior for
TreeViewItem
(#270) - Do not animate sticky indicators when parent is updated (#273)
- Add Arabic(ar) localization (#268)
- Improves
icons.dart
formatting and its generation (#215) - Use correct color on
FilledButton
when disabled (209) - Built-in support for new languages (#216):
- English
- Spanish (reviewed by @henry2man)
- French (reviewed by @WinXaito)
- Brazilian Portuguese (reviewed by @bdlukaa)
- Russian (reviewed by @raitonoberu)
- German (reviewed by @larsb24)
- Hindi (reviewed by @alexmercerind)
- Simplified Chinese (reviewed by @zacksleo)
- Add
useInheritedMediaQuery
property toFluentApp
(#211) TreeView
updates (#255):- Optional vertical scrolling by setting
shrinkWrap
tofalse
- TreeViewItem now has a custom primary key (
value
field) - Added
onSelectionChanged
callback, called when the selection is changed
- Optional vertical scrolling by setting
- Account for enabled on pressing states (#233)
- Implement
CommandBar
(#232)- Add
DynamicOverflow
layout widget, for one-run horizontal or vertical layout with an overflow widget - Add
HorizontalScrollView
helper widget, with mouse wheel horizontal scrolling
- Add
- Long
content
widget no longer overflow inContentDialog
(#242) - Content state is no longer lost when the pane display mode is changed (#250)
- BREAKING Update indicators (#248):
-
Added
InheritedNavigationView
-
Updated sticky indicator to match the latest Win 11 UI (#173)
-
BREAKING Renamed
NavigationPane.indicatorBuilder
toNavigationPane.indicator
-
BREAKING Indicators are no longer built with functions Before:
indicatorBuilder: ({ required BuildContext context, required NavigationPane pane, required Axis axis, required Widget child, }) { if (pane.selected == null) return child; assert(debugCheckHasFluentTheme(context)); final theme = NavigationPaneTheme.of(context); final left = theme.iconPadding?.left ?? theme.labelPadding?.left ?? 0; final right = theme.labelPadding?.right ?? theme.iconPadding?.right ?? 0; return StickyNavigationIndicator( index: pane.selected!, pane: pane, child: child, color: theme.highlightColor, curve: Curves.easeIn, axis: axis, topPadding: EdgeInsets.only(left: left, right: right), ); }
Now:
indicator: StickyNavigationIndicator( color: Colors.blue.lighter, // optional ),
-
initiallyExpanded
property onExpander
works properly (#252)- BREAKING Flyout changes:
- Removed
Flyout.contentWidth
and addedFlyoutContent.constraints
. Now the content will be automatically sized and layed out according to the placement - Added
Flyout.placement
which takes aFlyoutPlacement
- Added
Flyout.openMode
which takes aFlyoutOpenMode
Flyout.controller
is no longer required. If not provided, a local controller is created to handle theFlyout.openMode
settings- Breaking
FlyoutController.open
is now a function - Added
FlyoutController.isOpen
,FlyoutController.isClosed
,FlyoutController.close()
,FlyoutController.open()
andFlyoutController.toggle()
- Breaking Removed
Popup.contentHeight
- Removed
- BREAKING Updated typography (#261):
- Renamed
Typography.standart
toTypography.fromBrightness
- Renamed
Typography
constructor toTypography.raw
- Default color for dark mode is now
const Color(0xE4000000)
- Updated default font sizes for
display
,titleLarge
,title
andsubtitle
- Renamed
TabWidthBehavior.sizeToContent
now works properly (#218)
TextBox
updates: (#179)- Correctly apply the
style
property - Correctly apply
decoration
to the background - Added
foregroundDecoration
andhighlightColor
property. They can not be specified at the same time - BREAKING replaced
maxLengthEnforeced
withmaxLengthEnforcement
- Correctly apply the
- Expose more propertied to
TextFormBox
AutoSuggestBox
updates:- Improved fidelity of the suggestions overlay expose more customization properties (#174)
- When a suggestion is picked, the overlay is automatically closed and the text box is unfocused
- Clear button now only shows when the text box is focused
- Add directionality support (#184)
- Correctly apply elevation for
DropDownButton
overlay (#182) - Show app bar even if
NavigationPane
is not provided onNavigationView
(#187) - Ensure
NavigationAppBar.actions
are rendered on the top of the other widgets (#177) - All Form widgets now have the same height by default
- Only show one scrollbar on
ComboBox
overlay - Fix opened pane opacity
- Added
menuColor
for theme, which is now used by dropdown button, auto suggest box, tooltip and content dialog - Added
Card
andcardColor
for theme - Update fluent text controls and added support for
SelectableText
(#196)
-
BREAKING Renamed
standartCurve
tostandardCurve
-
BREAKING Completly rework
DropDownButton
-
BREAKING Removed
CheckboxThemeData.thirdStateIcon
Currently, there isn't a fluent icon that is close to the native icon. A local widget
_ThirdStateDash
is used -
Do not override material
Theme
onFluentApp
(#155) -
Slider thumb now doesn't change inner size if hovered while disabled
-
Uniform foreground color on
Checkbox
-
Updated
FilledButton
Style -
ToggleButton
andFilledButton
now share the same style -
ScaffoldPage.scrollable
andScaffoldPage.withPadding
-
Ensure we use
Typography.body
as the default text style onBaseButton
(#120) -
Update
ButtonThemeData.uncheckedInputColor
-
Tests (#142)
-
Added Material Theme to Fluent Theme Builder (#133)
-
NavigationView
updates BREAKING:- Properly add item key to
PaneItem
in top mode (#143) - Items bounds and positions are fetched when the item list is scrolled as well to prevent misalignment
- Added the helper functions
NavigationIndicator.end
andNavigationIndicator.sticky
- Use
Curves.easeIn
for sticky navigation indicator by default - Use the correct accent color for navigation indicators by default
EntrancePageTransition
is now the correct page transition used when display mode is top- Apply correct press effect for
PaneItem
when display mode is top - BREAKING Removed
NavigationPane.defaultNavigationIndicator
- BREAKING Replaced
offsets
andsizes
withpane
inNavigationPane
Before:
pane: NavigationPane( indicatorBuilder: ({ required BuildContext context, /// The navigation pane corresponding to this indicator required NavigationPane pane, /// Corresponds to the current display mode. If top, Axis.vertical /// is passed, otherwise Axis.vertical Axis? axis, /// Corresponds to the pane itself as a widget. The indicator is /// rendered over the whole pane. required Widget child, }) { if (pane.selected == null) return child; assert(debugCheckHasFluentTheme(context)); final theme = NavigationPaneThemeData.of(context); axis??= Axis.horizontal; return EndNavigationIndicator( index: pane.selected, offsets: () => pane.effectiveItems.getPaneItemsOffsets (pane.paneKey), sizes: pane.effectiveItems.getPaneItemsSizes, child: child, color: theme.highlightColor, curve: theme.animationCurve ?? Curves.linear, axis: axis, ); }, ),
Now:
pane: NavigationPane( indicatorBuilder: ({ required BuildContext context, /// The navigation pane corresponding to this indicator required NavigationPane pane, /// Corresponds to the current display mode. If top, Axis.vertical /// is passed, otherwise Axis.vertical required Axis axis, /// Corresponds to the pane itself as a widget. The indicator is /// rendered over the whole pane. required Widget child, }) { if (pane.selected == null) return child; assert(debugCheckHasFluentTheme(context)); final theme = NavigationPaneThemeData.of(context); return EndNavigationIndicator( index: pane.selected, pane: pane, child: child, color: theme.highlightColor, curve: theme.animationCurve ?? Curves.linear, axis: axis, ); }, ),
- Properly add item key to
- AutoSuggestBox: (#130)
- It gets opened automatically when it gets focus
- When an item is tapped, the cursor is positioned correctly at the end of the text
- BREAKING Now it's not possible to assign a type to
AutoSuggestBox
: Before:Now:AutoSuggestBox<String>(...),
AutoSuggestBox(...),
- Added TextFormBox witch integrates with the Form widget. It has the ability to be validated and to show an error message.
- New FluentIcons gallery showcase in example project (#123)
- Updated FluentIcons as per 30/12/2021
- BREAKING Renamed
FluentIcons.close
toFluentIcons.chrome_close
- Fixed rounded corners on the ComboBox widget
- Fixed missing padding before close button on
TabView
(#122) - Readded tab minimal size for
equal
andsizeToContent
tab width behaviours (#122) TabView
's close button now usesSmallIconButton
- If a tab is partially off the view, it's scrolled until it's visible
- Fix
IconButton
's icon size - Update
OutlinedButton
,FilledButton
andTextButton
styles - Implement lazy tree view (#139)
- Implement
TreeView
(#120) - Fix
Tooltip.useMousePosition
- Fix
Slider
andRatingBar
(#116) - Fix scroll buttons when there are too many tabs in
TabView
(#92) - Fix button style on tab in
TabView
(#90) - Added Close on middle click on tabs in
TabView
(#91) - Added
newTabLabel
,closeTabLabel
,scrollTabBackward
,scrollTabForward
toFluentLocalizations
- Fix
TabView
's text when it's too long. Now it's clipped when overflow and line doesn't break - Added
TabView.closeButtonVisibility
. Defaults toCloseButtonVisibilityMode.always
- Updated selected tab paint
- Added
TabView.tabWidthBehavior
. Defaults toTabWidthBehavior.equal
- Added
TabView.header
andTabView.footer
Slider
's mouse cursor is now [MouseCursor.defer]- Added
SmallIconButton
, which makes an [IconButton] small if wrapped. It's used byTextBox
- Added
ButtonStyle.iconSize
- BREAKING
AutoSuggestBox
updates:- Added
FluentLocalizations.noResultsFoundLabel
. "No results found" is the default text - Removed
itemBuilder
,sorter
,noResultsFound
,textBoxBuilder
,defaultNoResultsFound
anddefaultTextBoxBuilder
- Added
onChanged
,trailingIcon
,clearButtonEnabled
andplaceholder
controller
is now nullable. If null, an internal controller is creted
- Added
- BREAKING Removed
ThemeData.inputMouseCursor
- BREAKING Removed
cursor
fromDatePicker
,TimePicker
,ButtonStyle
,CheckboxThemeData
,RadioButtonThemeData
,SliderThemeData
,ToggleSwitchThemeData
,NavigationPaneThemeData
- Scrollbar is not longer shown if
PaneDisplayMode
istop
- If open the compact pane, it's not always a overlay
- Added
triggerMode
andenableFeedback
toTooltip
. - Added
Tooltip.dismissAllToolTips
- Update inputs colors
Expander
now properly disposes its resources- Add the
borderRadius
andshape
attributes to theMica
widget - Implement
DropDownButton
(#85)
- BREAKING Minimal Flutter version is now 2.8
NavigationAppBar.backgroundColor
is now applied correctly. (#100)- ComboBox's Popup Acrylic can now be disabled if wrapped in a
DisableAcrylic
(#105) NavigationPane
width can now be customizable (#99)- Implement
PaneItemAction
forNavigationPane
(#104)
ContentDialog
constraints can now be customizable (#86)- Add possibility to disable acrylic by wrapping it in a
DisableAcrylic
(#89) - Fix
onReaorder null exception
(#88) - Implement
InfoBadge
- Implement
Expander
(#85) - Default
inputMouseCursor
is nowMouseCursor.defer
NavigationView.contentShape
is now rendered at the foreground
ProgressRing
now spins on the correct direction (#83)- Added the
backwards
property toProgressRing
FluentApp.builder
now works as expected (#84)- Implemented
NavigationPane.customPane
, which now gives you the ability to create custom panes forNavigationView
- BREAKING
sizes
,offsets
andindex
parameters fromNavigationIndicatorBuilder
were replaced bypane
- Back button now isn't forced when using top navigation mode (#74)
PilButtonBar
now accept 2 items (#66)- Added builder variant to
NavigationBody
. - Fixed content bug when
AppBar
was not supplied tooNavigationView
- Added missing parameters in
_FluentTextSelectionControls
methods (#67) - Min Flutter version is now 2.5.0
- EXAMPLE APP Updated the url strategy on web.
- EXAMPLE APP Upgraded dependencies
- Format code according to flutter_lints
- Updated Typography:
- BREAKING Renamed
header
->display
- BREAKING Renamed
subHeader
->titleLarge
- BREAKING Renamed
base
->bodyStrong
- Added
bodyLarge
- Updated font size and weight for most of the text styles
- BREAKING Renamed
- Update
SplitButton
design - Update
IconButton
design - Fixed
ToggleSwitch
not showing expanded thumb mode when dragging - BREAKING Remove
CheckboxListTile
,RadioListTile
andSwitchListTile
. Use the respective widget with thecontent
property
- Update
ToggleButton
design. - Update
Button
design. - Update
RadioButton
design. - Update
ContentDialog
design. - Update
NavigationView
design:- BREAKING: Acryic is not used anymore. Consequently,
useAcrylic
method was removed.
- BREAKING: Acryic is not used anymore. Consequently,
- Implemented
Mica
, used by the newNavigationView
- Added support for horizontal tooltips. Set
Tooltip.displayHorizontally
to true to enable it. - Updated Acrylic to support the web
- Update
Checkbox
design - Update
ToggleSwitch
design - Update
Scrollbar
design - Update
Slider
design - Update
InfoBar
design - Update pickers design (
Combobox
,DatePicker
andTimePicker
)
- Implement Fluent Selection Controls for
TextBox
(#49) Tooltip
is now displayed when focused (#45)- AppBar is now displayed when minimal pane is open.
- AppBar's animation now follows the pane animation
- BREAKING: Material
Icons
are not used anymore. UseFluentIcons
instead. - BREAKING: Reworked the
Acrylic
widget implementation (#47) - BREAKING: Removed the
useAcrylic
property fromNavigationView
. Acrylic is now used by default. PaneDisplayMode.compact
has now a width of 40, not 50.- Removed
SizeTransition
fromTabView
.
- Option to set a default font family on the theme data (
ThemeData.fontFamily
) indicatorBuilder
is correctly applied to the automatic display mode inNavigationView
- An overlay is open when the toggle button is pressed on the compact display mode (#43)
- Implemented
BottomNavigation
- Implemented
BottomSheet
- Implemented
Chip
- Implemented
Snackbar
- Implemented
PillButtonBar
- New buttons variations:
FillButton
OutlinedButton
TextButton
PaneItem
s'build
method is now overridable. You can know customize how the items inNavigationView
should look like by overriding the method.- Fixed bug that navigation indicator was not showing on the first frame
- Fixed minimal tooltip not updating when closed the overlay
- EXAMPLE APP: Navigation indicator is now configurable on the
Settings
page
- Correctly apply items positions to pane indicators, regardless of external factors, such as navigation view app bar (#41)
- Improved
NavigationIndicator
s performance
-
BREAKING CHANGES: Reworked the theme api (#39):
-
Removed the theme extension (
context.theme
). UseFluentTheme.of(context)
instead -
ButtonState
is now a class that can receive a value. It now allows lerping between values, makingAnimatedFluentTheme
possible.Here's an example of how to migrate your code:
Before:
cursor: (_) => SystemMouseCursors.click,
Now:cursor: ButtonState.all(SystemMouseCursors.click),
-
All theme datas and
AccentColor
have now a lerp method, in order to makeAnimatedFluentTheme
possible. -
Implemented
AnimatedFluentTheme
, in order to replaceAnimateContainer
s all around the library -
Dedicated theme for each theme data (#37):
- IconTheme
- ButtonTheme
- RadioButtonTheme
- CheckboxTheme
- FocusTheme
- SplitButtonTheme
- ToggleButtonTheme
- ToggleSwitchTheme
- NavigationPaneTheme
- InfoBarTheme
- TooltipTheme
- DividerTheme
- ScrollbarTheme
-
DividerThemeData
now hasverticalMargin
andhorizontalMargin
instead of an axis callback. -
Updated button colors.
-
Removed
animationDuration
andanimationCurve
from theme datas (except fromNavigationPaneThemeData
). -
Renamed
copyWith
tomerge
on theme datas (except fromThemeData
) -
Fixed typo
standart
->standard
-
Implement
AnimatedAcrylic
-
- Minimal flutter version is now 2.2
- Implement
FluentScrollBehavior
, that automatically adds a scrollbar into listviews (#35) - Reworked the inputs api (#38):
- A input can have multiple states. Now, if the widget is focused and pressed at the same time, it doesn't lose its focused border.
- Now, the focus is not requested twice when the button is pressed, only once. This fixes a bug introduced in a previous version that combo boxes items we're not being focused.
- Semantics (acessibility) is now applied on all inputs
- New way to disable the acrylic blur effect. Just wrap the acrylic widget in a
NoAcrylicBlurEffect
to have it disabled. - Reworked the Navigation Panel from scratch (#31):
- The legacy
NavigationPanel
andScaffold
were removed. UseNavigationView
andScaffoldPage
instead - Implemented open, compact, top and minimal display modes.
- Custom Selected Indicators
- The legacy
- Implemented fluent localizations (#30)
- FIX Reworked the combo box widget to improve fidelity. (#25)
- FIX Improved
HoverButton
focus management. - FIX Reworked the tooltip widget. Now, if any mouse is connected, the tooltip is displaying according to the pointer position, not to the child's. (#26)
- FIX TabView is now scrollable if the size of the tabs overflow the width
- BREAKING
InfoHeader
was renamed toInfoLabel
. You can now set if the label will be rendered above the child or on the side of it. - FIX Fixed
RadioButton
inner color overlaping the border. - NEW
ThemeData.inputMouseCursor
- FIDELITY Switch thumb is now draggable. (Fixes #22)
- EXAMPLE Reworked the example app inputs page
- FIX
CheckboxListTile
,SwitchListTile
andRadioListTile
now doesn't focus its leading widget. - FIX
TabView
is now not scrollable - FIX Fixed
Acrylic
blur effect being disabled by default. - FIDELITY Improved
ContentDialog
transition fidelity - FIX Fixed
FocusBorder
for some widgets. It was affecting layout when it shouldn't - FIX
RatingBar
andSlider
weren't working due toFocusBorder
- NEW | FIDELITY New
Slider
thumb
- NEW
FocusBorder.renderOutside
. With this property, you can control if the FocusBorder will be rendered over the widget or outside of it. - FIX Fixed
RadioButton
s border when focused - FIX
Color.resolve
now doesn't throw a stack overflow error. - BREAKING Removed
Color.resolveFromBrightness
. This is only available onAccentColor
- EXAMPLE APP Hability to change the app accent color
- NEW
darkest
andlightest
colors variants inAccentColor
- FIX Fixed
InfoBar
's error icon. It now usesIcons.cancel_outlined
instead ofIcons.close
- NEW
NavigationPanel
now has aScrollbar
and thebottom
property is now properly styled if selected
- FIX
TabView
tabs can now be reordered (Fixes #10) - FIDELITY If a new
Tab
is added, its now animated - FIX
FocusBorder
now doesn't change the size of the widgets - BREAKING
buttonCursor
,uncheckedInputColor
andcheckedInputColor
are now moved toButtonThemeData
as static functions.
- FIX Fixed diagnostic tree. (Fixes #17)
- FIX | FIDELITY
TappableListTile
now changes its color when focused instead of having a border - FIDELITY Improved
Acrylic
's blur effect fidelity - FIX
Acrylic
's elevation was being applying margin - NEW
ThemeData.shadowColor
, which is now used byAcrylic
- NEW You can now globally disable the acrylic blur effect by changing
Acrylic.acrylicEnabled
The whole theme implementation was reworked on this change.
- BREAKING Renamed
Theme
toFluentTheme
- BREAKING All the properties in
FluentTheme
now can't be null - BREAKING Renamed all the
Style
occurrences toThemeData
- BREAKING
ThemeData.accentColor
is now anAccentColor
- FIX When providing a custom style to a tooltip, it's now correctly applied to
ThemeData.tooltipStyle
- FIX
debugCheckHasFluentTheme
has now a better error message - FIX
FluentApp
now doesn't throw an error if notheme
is provided - FIX Reworked
Scrollbar
to improve fidelity. - NEW Color extension methods:
Color.toAccentColor
andColor.basedOnLuminance
- NEW
Button.builder
- NEW In
TabView
, it's now possible use the following shortcuts ifTabView.shortcutsEnabled
istrue
(Follows this):Ctrl + F4
orCtrl + W
to close the current tabCtrl + T
to create a new tab1-8
to navigate to a tab with the pressed number9
to navigate to the last tab and navigate to the last tab
- NEW
IconButton.autofocus
,ToggleButton.autofocus
- BREAKING Renamed all the
semanticsLabel
tosemanticLabel
- NEW Web version hosted at https://bdlukaa.github.io/fluent_ui
- NEW Colors showcase page in example app
- NEW Info Colors:
Colors.warningPrimaryColor
Colors.warningSecondaryColor
Colors.errorPrimaryColor
Colors.errorSecondaryColor
Colors.successPrimaryColor
Colors.successSecondaryColor
- FIX Reworked all the accent colors (
Colors.accentColors
) withdarkest
,dark
,normal
,light
andlighter
- BREAKING
Colors.blue
is now anAccentColor
- NEW
Checkbox.autofocus
- BREAKING
Button
refactor:- Removed
Button.icon
andButton.trailingIcon
- Renamed
Button.text
toButton.child
- Removed
- You can now disable the acrylic backdrop effect by setting
enabled
to false - NEW
NavigationPanelBody.animationCurve
andNavigationPanelBody.animationDuration
- NEW
Scrollbar
andScrollbarStyle
- Reworked
FluentApp
to not depend of material anymore.
- FIX Updated
Icon
widget to use Flutter's default icon widget - NEW Documentation
- FIX Improved
ListTile
sizing (#Spacing) - NEW
FocusStyle
and support for glow focus - NEW
RatingBar.starSpacing
- FIX Animation when using
NavigationPanelBody
now works as expected - NEW
CheckboxListTile
,SwitchListTile
andRadioListTile
- FIX It's now not possible to focus a disabled
TextBox
- FIX The mouse cursor in a disabled input is now
basic
instead offorbidden
- FIX
NavigationPanelBody
now doesn't use aIndexedStack
under the hood because it was interfering in the focus scope - FIX The color of the focus now is the
Style.inactiveColor
- FIX
RadioButton
's cursor was not being applied correctly - NEW
Button.toggle
- FIX The state provided by
HoverButton
was beingfocused
when it shouldn't be - FIX TimePicker showing wrong minute count. It should start from 00 and end in 59
- NEW
TimePicker.minuteIncrement
- FIXED Fixed the possibility to give a elevation lower than 0 in
Acrylic
- NEW It's now possible to change the rating of
RatingBar
using the keyboard arrows - NEW Now it's possible to navigate using the keyboard with all focusable widgets
-
Added the missing
Diagnostics
-
Updated all the screenshots
-
BREAKING CHANGE Uses the material icon library now
DEVELOPER NOTE This was a hard choice, but the material icon library is a robust, bigger library. It contains all the icons the previous library has, and a few many more.
-
Added
Diagnostics
to many widgets -
NEW
AutoSuggestBox
(Follows this) -
NEW
Flyout
andFlyoutContent
(Folllows this) -
FIXED Popup was being shown off-screen.
DEVELOPER NOTE The solution for this was to make it act like a tooltip: only show the popup above or under the
child
. This was a hard choice, but the only viable option that would work on small screens/devices. This also madeFlyout
easier to implement. This should be changed when multi-window support is available. -
FIXED
DatePicker
incorrectly changing hour -
NEW
Colors.accentColors
-
Documentation about system_theme
-
BREAKING Removed
Pivot
because it's deprecated
- NEW
Style.fasterAnimationDuration
- FIX
ComboBox
press effect - NEW
TimePicker
(Follows this) - NEW
DatePicker
(Follows this)
- NEW
InfoHeader
- NEW
ComboBox
(Follows this) - NEW
TappableListTile
- BREAKING Removed
DropdownButton
andButton.dropdown
- NEW Vertical Slider
- NEW Indeterminate
ProgressRing
(@raitonoberu) - NEW
ListTile
- DIAGNOSTICS Provide
Diagnostics
support to:Style
NavigationPanelStyle
TooltipStyle
This version provides the fix for #5
Theme.of
can't be null anymore. UseTheme.maybeOf
for such- NEW
Style.inactiveBackgroundColor
- BREAKING Replaced
color
,border
,borderRadius
fromIconButtonStyle
todecoration
- DIAGNOSTICS Provide
Diagnostics
support to the following classes:- ButtonStyle
- Checkbox
- CheckboxStyle
- IconButtonStyle
- RadioButtonStyle
- RatingBar
- SplitButtonStyle
- ToggleButton
- ToggleButtonStyle
- ToggleSwitch
- ToggleSwitchStyle
- Slider
- SliderStyle
- Typography
- Divider
- DividerStyle
- Provide accessibility support to the following widgets:
- Button
- Checkbox
- IconButton
- RadioButton
- RatingBar
- Slider
- ToggleButton
- ToggleSwitch
- TabView
- FIX
IconButtonStyle
'siconStyle
now works properly - Improved
TabView
icon styling - NEW Indeterminate
ProgressBar
(@raitonoberu)
- NEW Determinate
ProgressBar
andProgressRing
- NEW
TabView
(#TabView)
- FIX Fixed
InfoBar
's overflow
- BREAKING
RadioButton
'sselected
property was renamed tochecked
to match a single pattern between all the other widgets.
- NEW | EXAMPLE APP
Settings
screen - Improved theme changing
- FIX
FluentApp
doesn't lose its state anymore, possibiliting hot relaod. - NEW
showDialog
rework:showDialog
now can return data. (Fixes #2)showDialog.transitionBuilder
showDialog.useRootNavigator
showDialog.routeSettings
- It's no longer necessary to have the fluent theme to display dialogs using this function.
- BREAKING Removed
_regular
from the name of the icons. - NEW
InfoBar
(Follows this)
- NEW
Divider
- FIDELITY Improved
ToggleButton
fidelity - NEW
NavigationPanelBody
- NEW Page transitions
EntrancePageTransition
(#PageRefresh)DrillInPageTransition
(#Drill)HorizontalSlidePageTransition
(#HorizontalSlide)SuppressPageTransition
(#Supress)
- Add timing and easing to style. (Follows this)
- NEW
Style.fastAnimationDuration
(Defaults to 150ms) - NEW
Style.mediumAnimationDuration
(Defaults to 300ms) - NEW
Style.slowAnimationDuration
(Defaults to 500ms) - Default
animationCurve
is nowCurves.easeInOut
(standard) instead ofCurves.linear
- BREAKING Removed
Style.animationDuration
- NEW
- Refactored Navigation Panel
- BREAKING Removed
Card
widget. UseAcrylic
instead - NEW
Acrylic
widget (#Acrylic) - NEW NAVIGATION PANEL
bottom
property - FIDELITY Improved the corder radius of some widgets (Follows this)
- FIX FIDELITY Dark theme hovering color
- Improved documentation
- NEW Typography
- Migrated all the widgets to use typography
- NEW Tooltip
- NEW Dark theme
- FIX Disabled button press effect if disabled
- FIX Grey color resulting in green color
- NEW Screenshots
- FIX
NavigationPanel
navigation index - FIX
Slider
's inactive color - FIDELITY Scale animation of button press
- FIDELITY Improved
Slider
label fidelity - NEW Split Button
- NEW Null-safety
- NEW New Icons Library
- NEW
NavigationPanelSectionHeader
andNavigationPanelTileSeparator
- BREAKING Removed
Snackbar
- Export the icons library
- NEW
TextBox
- NEW
ContentDialog
🎉 - NEW
RatingControl
🎉 - NEW
NavigationPanel
🎉 - Improved
Button
fidelity
- NEW
Slider
🎉 - Use physical model for elevation instead of box shadows
- Improved TODO
- FIXED Button now detect pressing
- FIXED
ToggleSwitch
default thumb is now animated - FIXED Improved
ToggleSwitch
fidelity FIXED Darker color for button press. - NEW THEMING
Style.activeColor
Style.inactiveColor
Style.disabledColor
Style.animationDuration
Style.animationCurve
ToggleSwitch
is now stable 🎉- NEW
DefaultToggleSwitchThumb
- NEW
ToggleButton
- New toast lib: fl_toast
- Screenshot on the readme. (Fixes #1)
- New fluent icons library: fluentui_icons
- Re-made checkbox with more fidelity
- Refactored the following widgets to follow the theme accent color:
Checkbox
ToggleSwitch
RadioButton
- Added accent colors to widget. Use this as a base
- HIGHLIGHT A whole new documentation
- Scaffold now works as expected.
- Improved theming checking
- NEW
null
(thirdstate) design onCheckbox
. (Follows this)- Now you can use the
Decoration
to style the inputs
- BREAKING:
- Removed
Button.action
- Removed
Button.compound
- Removed
Button.primary
- Removed
Button.contextual
- Removed
AppBar
- Now the default theme uses accent color instead of a predefined color (Follows this)
- Removed
- FIXED:
ToggleSwitch
can NOT receive null values
- The whole library was rewritten following this
- Tooltip's background color is now opaque (Follows this)
- Dropdown button now works as expected
- FIXED:
- Snackbar now is dismissed even if pressing or hovering
- Margin is no longer used as part of the clickable button
- BREAKING:
- Renamed
Toggle
toToggleSwitch
(Follows this) - Removed
BottomNavigationBar
. It's recommended to use top navigation (pivots) - Removed
IconButton.menu
- Renamed
- NEW:
- Initial release