Skip to content

Commit

Permalink
Sidebar top (macosui#244)
Browse files Browse the repository at this point in the history
* chore: refactor dir structure

* feat: Sidebar top & updated default control color

* feat(example): search results in top

* chore: bump version, changelog

* chore: run flutter pub upgrade

* Update CHANGELOG.md

* Update lib/src/layout/sidebar/sidebar.dart

Co-authored-by: Minas Giannekas <[email protected]>
  • Loading branch information
GroovinChip and whiplashoo authored May 11, 2022
1 parent 9aa0205 commit 6e3aa4c
Show file tree
Hide file tree
Showing 13 changed files with 232 additions and 156 deletions.
4 changes: 4 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
## [1.3.0]
* Add a `top` property to `Sidebar`
* Tweak the default `primaryColor` value in `MacosThemeData`.

## [1.2.1+1]
* Fix `MacosApp` documentation

Expand Down
74 changes: 67 additions & 7 deletions example/lib/main.dart
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,8 @@ class _DemoState extends State<Demo> {

int pageIndex = 0;

late final searchFieldController = TextEditingController();

final List<Widget> pages = [
CupertinoTabView(
builder: (_) => const ButtonsPage(),
Expand Down Expand Up @@ -80,6 +82,67 @@ class _DemoState extends State<Demo> {
// title: Text('macOS App Name'),
// ),
sidebar: Sidebar(
top: MacosSearchField(
placeholder: 'Search',
controller: searchFieldController,
onResultSelected: (result) {
switch (result.searchKey) {
case 'Buttons':
setState(() {
pageIndex = 0;
searchFieldController.clear();
});
break;
case 'Indicators':
setState(() {
pageIndex = 1;
searchFieldController.clear();
});
break;
case 'Fields':
setState(() {
pageIndex = 2;
searchFieldController.clear();
});
break;
case 'Colors':
setState(() {
pageIndex = 3;
searchFieldController.clear();
});
break;
case 'Dialogs and Sheets':
setState(() {
pageIndex = 5;
searchFieldController.clear();
});
break;
case 'Toolbar':
setState(() {
pageIndex = 6;
searchFieldController.clear();
});
break;
case 'Selectors':
setState(() {
pageIndex = 7;
searchFieldController.clear();
});
break;
default:
searchFieldController.clear();
}
},
results: const [
SearchResultItem('Buttons'),
SearchResultItem('Indicators'),
SearchResultItem('Fields'),
SearchResultItem('Colors'),
SearchResultItem('Dialogs and Sheets'),
SearchResultItem('Toolbar'),
SearchResultItem('Selectors'),
],
),
minWidth: 200,
builder: (context, controller) {
return SidebarItems(
Expand Down Expand Up @@ -127,13 +190,10 @@ class _DemoState extends State<Demo> {
],
);
},
bottom: const Padding(
padding: EdgeInsets.all(16.0),
child: MacosListTile(
leading: MacosIcon(CupertinoIcons.profile_circled),
title: Text('Tim Apple'),
subtitle: Text('[email protected]'),
),
bottom: const MacosListTile(
leading: MacosIcon(CupertinoIcons.profile_circled),
title: Text('Tim Apple'),
subtitle: Text('[email protected]'),
),
),
);
Expand Down
2 changes: 1 addition & 1 deletion example/macos/Podfile.lock
Original file line number Diff line number Diff line change
Expand Up @@ -19,4 +19,4 @@ SPEC CHECKSUMS:

PODFILE CHECKSUM: 6eac6b3292e5142cfc23bdeb71848a40ec51c14c

COCOAPODS: 1.10.2
COCOAPODS: 1.11.3
2 changes: 1 addition & 1 deletion example/pubspec.lock
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ packages:
path: ".."
relative: true
source: path
version: "1.2.1+1"
version: "1.3.0"
matcher:
dependency: transitive
description:
Expand Down
5 changes: 3 additions & 2 deletions lib/macos_ui.dart
Original file line number Diff line number Diff line change
Expand Up @@ -37,8 +37,9 @@ export 'src/layout/content_area.dart';
export 'src/layout/macos_list_tile.dart';
export 'src/layout/resizable_pane.dart';
export 'src/layout/scaffold.dart';
export 'src/layout/sidebar.dart';
export 'src/layout/sidebar_item.dart';
export 'src/layout/sidebar/sidebar.dart';
export 'src/layout/sidebar/sidebar_item.dart';
export 'src/layout/sidebar/sidebar_items.dart';
export 'src/layout/title_bar.dart';
export 'src/layout/toolbar/custom_toolbar_item.dart';
export 'src/layout/toolbar/toolbar.dart';
Expand Down
2 changes: 1 addition & 1 deletion lib/src/layout/scaffold.dart
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import 'dart:math' as math;
import 'package:flutter/rendering.dart';
import 'package:macos_ui/src/layout/content_area.dart';
import 'package:macos_ui/src/layout/resizable_pane.dart';
import 'package:macos_ui/src/layout/sidebar.dart';
import 'package:macos_ui/src/layout/sidebar/sidebar.dart';
import 'package:macos_ui/src/layout/title_bar.dart';
import 'package:macos_ui/src/layout/toolbar/toolbar.dart';
import 'package:macos_ui/src/layout/window.dart';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ class Sidebar {
this.startWidth,
this.padding = EdgeInsets.zero,
this.windowBreakpoint = 556.0,
this.top,
this.bottom,
this.topOffset = 51.0,
}) : dragClosedBuffer = dragClosedBuffer ?? minWidth / 2;
Expand Down Expand Up @@ -96,7 +97,14 @@ class Sidebar {
/// Specifies the width of the window at which this [Sidebar] will be hidden.
final double windowBreakpoint;

/// Widget that should be displayed at the Bottom of the Sidebar
/// Widget that should be displayed at the top of the [Sidebar].
///
/// Commonly a [MacosSearchField].
final Widget? top;

/// Widget that should be displayed at the bottom of the [Sidebar].
///
/// Commonly a [MacosListTile].
final Widget? bottom;

/// Specifies the top offset of the sidebar.
Expand Down
73 changes: 73 additions & 0 deletions lib/src/layout/sidebar/sidebar_item.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
import 'package:flutter/foundation.dart';
import 'package:macos_ui/macos_ui.dart';
import 'package:macos_ui/src/library.dart';

/// A macOS style navigation-list item intended for use in a [Sidebar]
///
/// See also:
///
/// * [Sidebar], a side bar used alongside [MacosScaffold]
/// * [SidebarItems], the widget that displays [SidebarItem]s vertically
class SidebarItem with Diagnosticable {
/// Creates a sidebar item.
const SidebarItem({
this.leading,
required this.label,
this.selectedColor,
this.unselectedColor,
this.shape,
this.focusNode,
this.semanticLabel,
this.disclosureItems,
});

/// The widget before [label].
///
/// Typically an [Icon]
final Widget? leading;

/// Indicates what content this widget represents.
///
/// Typically a [Text]
final Widget label;

/// The color to paint this widget as when selected.
///
/// If null, [MacosThemeData.primaryColor] is used.
final Color? selectedColor;

/// The color to paint this widget as when unselected.
///
/// Defaults to transparent.
final Color? unselectedColor;

/// The [shape] property specifies the outline (border) of the
/// decoration. The shape must not be null. It's used alonside
/// [selectedColor].
final ShapeBorder? shape;

/// The focus node used by this item.
final FocusNode? focusNode;

/// The semantic label used by screen readers.
final String? semanticLabel;

/// The disclosure items. If null, there will be no disclosure items.
///
/// If non-null and [leading] is null, a local animated icon is created
final List<SidebarItem>? disclosureItems;

@override
void debugFillProperties(DiagnosticPropertiesBuilder properties) {
super.debugFillProperties(properties);
properties.add(ColorProperty('selectedColor', selectedColor));
properties.add(ColorProperty('unselectedColor', unselectedColor));
properties.add(StringProperty('semanticLabel', semanticLabel));
properties.add(DiagnosticsProperty<ShapeBorder>('shape', shape));
properties.add(DiagnosticsProperty<FocusNode>('focusNode', focusNode));
properties.add(IterableProperty<SidebarItem>(
'disclosure items',
disclosureItems,
));
}
}
Loading

0 comments on commit 6e3aa4c

Please sign in to comment.