MacosTabView & MacosTab

example/lib/main.dart

@@ -4,6 +4,7 @@ import 'package:example/pages/dialogs_page.dart';
 import 'package:example/pages/fields.dart';
 import 'package:example/pages/indicators.dart';
 import 'package:example/pages/selectors_page.dart';
+import 'package:example/pages/tab_view.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:macos_ui/macos_ui.dart';
 import 'package:provider/provider.dart';
@@ -64,6 +65,7 @@ class _DemoState extends State<Demo> {
     ),
     const DialogsPage(),
     const SelectorsPage(),
+    const TabViewPage(),
   ];
 
   Color textLuminance(Color backgroundColor) {
@@ -128,6 +130,10 @@ class _DemoState extends State<Demo> {
                 leading: MacosIcon(CupertinoIcons.calendar),
                 label: Text('Selectors'),
               ),
+              SidebarItem(
+                leading: MacosIcon(CupertinoIcons.square_stack_3d_up),
+                label: Text('Tab View'),
+              ),
             ],
           );
         },

example/lib/pages/tab_view.dart

@@ -0,0 +1,118 @@
+import 'package:flutter/widgets.dart';
+import 'package:macos_ui/macos_ui.dart';
+
+class TabViewPage extends StatefulWidget {
+  const TabViewPage({Key? key}) : super(key: key);
+
+  @override
+  State<TabViewPage> createState() => _TabViewPageState();
+}
+
+class _TabViewPageState extends State<TabViewPage> {
+  int activeIndex = 0;
+  MacosTabPosition positionSelected = MacosTabPosition.top;
+  Widget content = Container();
+
+  void updatePosition(MacosTabPosition? pos) {
+    return setState(() => positionSelected = pos ?? MacosTabPosition.top);
+  }
+
+  Widget _radioButton(MacosTabPosition pos) {
+    return Padding(
+      padding: const EdgeInsets.symmetric(horizontal: 5),
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [
+          MacosRadioButton<MacosTabPosition>(
+            groupValue: positionSelected,
+            value: pos,
+            onChanged: updatePosition,
+          ),
+          const SizedBox(width: 10),
+          Text(pos.name),
+        ],
+      ),
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return MacosScaffold(
+      titleBar: const TitleBar(
+        title: Text('macOS Tab View'),
+      ),
+      children: [
+        ContentArea(
+          builder: (context, scrollController) {
+            return SingleChildScrollView(
+              controller: scrollController,
+              padding: const EdgeInsets.all(20),
+              child: Center(
+                child: Column(
+                  children: [
+                    const Text('Tab View Controls Position'),
+                    const SizedBox(height: 15),
+                    Row(
+                      mainAxisAlignment: MainAxisAlignment.center,
+                      children: [
+                        _radioButton(MacosTabPosition.top),
+                        _radioButton(MacosTabPosition.bottom),
+                        _radioButton(MacosTabPosition.left),
+                        _radioButton(MacosTabPosition.right),
+                      ],
+                    ),
+                    const SizedBox(height: 30),
+                    MacosTabView(
+                      width: 500,
+                      height: 400,
+                      position: positionSelected,
+                      body: content,
+                      tabs: [
+                        MacosTab(
+                          label: 'Sound Effects',
+                          active: activeIndex == 0,
+                          onTap: () {
+                            setState(() {
+                              activeIndex = 0;
+                              content = const Center(
+                                child: Text('Sound Effects'),
+                              );
+                            });
+                          },
+                        ),
+                        MacosTab(
+                          label: 'Input',
+                          active: activeIndex == 1,
+                          onTap: () {
+                            setState(() {
+                              activeIndex = 1;
+                              content = const Center(
+                                child: Text('Input'),
+                              );
+                            });
+                          },
+                        ),
+                        MacosTab(
+                          label: 'Output',
+                          active: activeIndex == 2,
+                          onTap: () {
+                            setState(() {
+                              activeIndex = 2;
+                              content = const Center(
+                                child: Text('Output'),
+                              );
+                            });
+                          },
+                        ),
+                      ],
+                    ),
+                  ],
+                ),
+              ),
+            );
+          },
+        ),
+      ],
+    );
+  }
+}

lib/macos_ui.dart

@@ -35,6 +35,8 @@ 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/tab.dart';
+export 'src/layout/tab_view.dart';
 export 'src/layout/title_bar.dart';
 export 'src/layout/window.dart';
 export 'src/macos_app.dart';

lib/src/layout/tab.dart

@@ -0,0 +1,48 @@
+import '../../macos_ui.dart';
+import '../library.dart';
+
+/// {template macosTab}
+/// An item in a [MacosTabView].
+/// {endtemplate}
+class MacosTab extends StatelessWidget {
+  /// {macro macosTab}
+  const MacosTab({
+    Key? key,
+    required this.label,
+    required this.onTap,
+    this.active = false,
+  }) : super(key: key);
+
+  /// Describes the content of the [MacosTabView] pane it represents.
+  final String label;
+  /// The action to perform when this widget is clicked.
+  ///
+  /// It is expected that this action will change the current [MacosTabView] content. 
+  final VoidCallback onTap;
+  /// Whether this widget is the active tab.
+  ///
+  /// Defaults to `false`.
+  final bool active;
+
+  @override
+  Widget build(BuildContext context) {
+    final brightness = MacosTheme.brightnessOf(context);
+
+    return GestureDetector(
+      onTap: onTap,
+      child: Container(
+        padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 3),
+        decoration: BoxDecoration(
+          borderRadius: const BorderRadius.all(Radius.elliptical(6, 6)),
+          color: active
+              ? brightness.resolve(
+                  MacosColors.white,
+                  const Color.fromRGBO(95, 96, 97, 1.0),
+                )
+              : MacosColors.transparent,
+        ),
+        child: Text(label),
+      ),
+    );
+  }
+}

lib/src/layout/tab_view.dart

@@ -0,0 +1,167 @@
+import 'package:macos_ui/macos_ui.dart';
+
+import '../library.dart';
+
+const _kTabViewRadius = BorderRadius.all(Radius.elliptical(5, 5));
+
+/// Specifies layout position for [MacosTab] options inside [MacosTabView]
+enum MacosTabPosition { 
+  left, 
+  right, 
+  top, 
+  bottom, 
+}
+
+/// {template macosTabView}
+/// Presents multiple mutually exclusive panes of content in the same area. 
+///
+/// Includes a tabbed control (which is similar in appearance to a 
+/// [segmented control](https://developer.apple.com/design/human-interface-guidelines/macos/selectors/segmented-controls/)) 
+/// and a content area.
+///
+/// Each segment of a tabbed control is known as a tab, and clicking a tab displays its corresponding pane 
+/// in the content area. Although the amount of content can vary from pane to pane, switching tabs doesn’t 
+/// change the overall size of the tab view or its parent window. 
+/// 
+/// You can position the tabbed control on any side of the content area—top, bottom, left, or right.
+///
+/// **Use a tab view to present closely related peer areas of content.** The typical appearance of a tab view 
+/// provides a strong visual indication of enclosure. People expect each tab to display content that is in 
+/// some way similar or related to the content in the other tabs.
+///
+/// **Make sure the controls within a pane only affect content in the same pane.** Panes are mutually 
+/// exclusive and should be fully self-contained.
+///
+/// In general, inset a tab view by leaving a margin of window-body area on all sides of a tab view. 
+/// This layout looks clean and leaves room for additional controls that can affect the window itself 
+/// (or other tabs). For example, the lock button in the macOD Date & Time preferences is outside of 
+/// the tab view because it applies to all tabs.
+///
+/// **Provide a label for each tab that describes the contents of its pane.** A good label helps the 
+/// user predict the contents of a pane before clicking its tab. In general, use nouns or very short 
+/// noun phrases for tab labels. A verb or short verb phrase may make sense in some contexts. 
+/// Tab labels should use title-style capitalization.
+/// {endTemplate}
+class MacosTabView extends StatelessWidget {
+  /// {macro macosTabView}
+  const MacosTabView({
+    Key? key,
+    required this.tabs,
+    required this.body,
+    this.position = MacosTabPosition.top,
+    this.width,
+    this.height,
+    this.constraints,
+  })  : assert(tabs.length > 0),
+        super(key: key);
+
+  /// Specifies the tabs to display at any given edge of the tab view content.
+  final List<Widget> tabs;
+
+  /// Specifies the position of the tab view controls.
+  ///
+  /// Defaults to [MacosTabPosition.top].
+  final MacosTabPosition position;
+
+  /// The content to display inside of the tab view.
+  final Widget body;
+
+  final double? width;
+  final double? height;
+  final BoxConstraints? constraints;
+
+  int get _tabRotation {
+    switch (position) {
+      case MacosTabPosition.left:
+        return 3;
+      case MacosTabPosition.right:
+        return 1;
+      case MacosTabPosition.top:
+        return 0;
+      case MacosTabPosition.bottom:
+        return 0;
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    assert(debugCheckHasMacosTheme(context));
+    final brightness = MacosTheme.brightnessOf(context);
+
+    final outerBorderColor = brightness.resolve(
+      const Color.fromRGBO(218, 219, 219, 1.0),
+      const Color.fromRGBO(63, 64, 66, 1.0),
+    );
+
+    return Stack(
+      alignment: Alignment.center,
+      children: [
+        Container(
+          width: width ?? double.infinity,
+          height: height ?? double.infinity,
+          constraints: constraints,
+          margin: const EdgeInsets.all(10),
+          padding: const EdgeInsets.all(15),
+          decoration: BoxDecoration(
+            color: brightness.resolve(
+              const Color.fromRGBO(230, 231, 235, 1.0),
+              const Color.fromRGBO(36, 37, 38, 1.0),
+            ),
+            border: Border.all(color: outerBorderColor, width: 1),
+            borderRadius: _kTabViewRadius,
+          ),
+          child: body,
+        ),
+        Positioned(
+          top: position == MacosTabPosition.top ? 0 : null,
+          bottom: position == MacosTabPosition.bottom ? 0 : null,
+          left: position == MacosTabPosition.left ? 0 : null,
+          right: position == MacosTabPosition.right ? 0 : null,
+          child: RotatedBox(
+            quarterTurns: _tabRotation,
+            child: ClipRRect(
+              borderRadius: _kTabViewRadius,
+              child: Container(
+                decoration: BoxDecoration(
+                  color: brightness.resolve(
+                    const Color.fromRGBO(226, 227, 231, 1.0),
+                    const Color.fromRGBO(41, 42, 43, 1.0),
+                  ),
+                  border: Border.all(
+                    color: brightness.resolve(
+                      const Color.fromRGBO(216, 216, 219, 1.0),
+                      const Color.fromRGBO(87, 89, 90, 1.0),
+                    ),
+                  ),
+                ),
+                child: IntrinsicHeight(
+                  child: Row(
+                    children: tabs.map((t) {
+                      Row row = Row(children: [t]);
+                      bool last = tabs.indexOf(t) == tabs.length - 1;
+                      if (!last) {
+                        row.children.add(
+                          VerticalDivider(
+                            color: brightness.resolve(
+                              const Color.fromRGBO(202, 203, 206, 1.0),
+                              const Color.fromRGBO(34, 36, 37, 1.0),
+                            ),
+                            width: 0,
+                            indent: 5,
+                            endIndent: 5,
+                          ),
+                        );
+                      }
+
+                      return row;
+                    }).toList(growable: false),
+                  ),
+                ),
+              ),
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+}