Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add isCompact field to CommandBar #235

Merged
merged 2 commits into from
Mar 23, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion example/lib/screens/commandbars.dart
Original file line number Diff line number Diff line change
Expand Up @@ -149,12 +149,13 @@ class _CommandBarsState extends State<CommandBars> {
),
const SizedBox(height: 20.0),
InfoLabel(
label: 'Carded command bar with many items (clipped)',
label: 'Carded compact command bar with many items (clipped)',
child: ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 230),
child: CommandBarCard(
child: CommandBar(
overflowBehavior: CommandBarOverflowBehavior.clip,
isCompact: true,
primaryItems: [
...simpleCommandBarItems,
const CommandBarSeparator(),
Expand Down
22 changes: 20 additions & 2 deletions lib/src/controls/surfaces/commandbar.dart
Original file line number Diff line number Diff line change
Expand Up @@ -93,11 +93,25 @@ class CommandBar extends StatefulWidget {

/// If the width of this widget is less then the indicated amount,
/// items in the primary area will be rendered using
/// [CommandBarItemDisplayMode.inPrimaryCompact]. If this is null
/// [CommandBarItemDisplayMode.inPrimaryCompact]. If this is `null`
/// or the width of this widget is wider, then the items will be rendered
/// using [CommandBarItemDisplayMode.inPrimary].
final double? compactBreakpointWidth;

/// If [compactBreakpointWidth] is `null`, then specifies whether or not
/// primary items should be displayed in compact mode
/// ([CommandBarItemDisplayMode.inPrimaryCompact]) or normal mode
/// [CommandBarItemDisplayMode.inPrimary].
///
/// This can be useful if the CommandBar is used in a setting where
/// [compactBreakpointWidth] cannot be used (i.e. because using
/// [LayoutBuilder] cannot be used in a context where the intrinsic
/// height is also calculated), and you want to specify whether or not
/// the primary items should be compact or not.
///
/// If [compactBreakpointWidth] is not `null` this field is ignored.
final bool? isCompact;

/// The alignment of the items within the command bar across the main axis
final MainAxisAlignment mainAxisAlignment;

Expand All @@ -122,6 +136,7 @@ class CommandBar extends StatefulWidget {
this.overflowItemBuilder,
this.overflowBehavior = CommandBarOverflowBehavior.dynamicOverflow,
this.compactBreakpointWidth,
this.isCompact,
this.mainAxisAlignment = MainAxisAlignment.start,
this.crossAxisAlignment = CrossAxisAlignment.center,
this.overflowItemAlignment = MainAxisAlignment.end,
Expand Down Expand Up @@ -309,7 +324,10 @@ class _CommandBarState extends State<CommandBar> {
@override
Widget build(BuildContext context) {
if (widget.compactBreakpointWidth == null) {
return _buildForPrimaryMode(context, CommandBarItemDisplayMode.inPrimary);
final displayMode = (widget.isCompact ?? false)
? CommandBarItemDisplayMode.inPrimaryCompact
: CommandBarItemDisplayMode.inPrimary;
return _buildForPrimaryMode(context, displayMode);
} else {
return LayoutBuilder(
builder: (context, constraints) {
Expand Down