Add New Widgets

[IM-001]

Hi,

thanks for the great libraries. I have been trying for a couple of days to add and remove widgets in the docking workspace, but the best that I had is the code below. So my problems are:

• adding or removing widgets always resets the layout

• at some point when removing and adding widgets I get errors like:
  Exception has occurred.
  ArgumentError (Invalid argument(s): DockingParentArea cannot have disposed child)

• there are no example of how to add widgets dynamically (like with a + button or something), but when I try to use addItemOn() sometimes the layout root is null or disappeared, and addItemOnRoot() which seemed ideal doesn't seem to work at all.

I simply want to add a new tab on the right of the workspace when I add a new widget, I will dock it after. I could really use some help please, I've been stuck on this for 2-3 days. Thanks

import 'package:flutter/material.dart';
import 'package:docking/docking.dart';
import 'nav_bar.dart';

class DesktopWorkspace extends StatefulWidget {
  const DesktopWorkspace({super.key});

  @override
  State<DesktopWorkspace> createState() => _DesktopWorkspaceState();
}

/////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////
//// Layout and Widget Management, manages the docking layout and widget list (add/remove functionality)
/////////////////////////////////////////////////////////////////////////////////

class _DesktopWorkspaceState extends State<DesktopWorkspace> {

  late DockingLayout _layout; // The docking layout structure
  int _widgetCounter = 3; // Counter for generating unique widget IDs
  
  // List of tab items, each representing a widget in the tabbed area
  final List<DockingItem> _tabItems = [
    DockingItem(
      id: 'chart_1',
      name: 'Chart 1',
      widget: const PlaceholderWidget('Chart'),
    ),
    DockingItem(
      id: 'dom_2',
      name: 'DOM Ladder 2',
      widget: const PlaceholderWidget('DOM'),
    ),
  ];

  // Initialize the layout with a tabbed area
  @override
  void initState() {
    super.initState();
    _layout = DockingLayout(
      root: DockingTabs(_tabItems), // Use DockingTabs for tabbed layout
    );
  }

  // Add a new widget to the tabbed area
  void _addWidget(String type) {
    setState(() {
      _widgetCounter++;
      final newId = '${type.toLowerCase()}_$_widgetCounter';
      final newName = '$type $_widgetCounter';
      final newItem = DockingItem(
        id: newId,
        name: newName,
        widget: PlaceholderWidget(newName),
      );
      _tabItems.add(newItem);
      _layout = DockingLayout(root: DockingTabs([..._tabItems]));
    });
  }

  // Remove a widget from the tabbed area by ID
  void _removeWidget(String id) {
    setState(() {
      _tabItems.removeWhere((item) => item.id == id);
      _layout = DockingLayout(
        root: DockingTabs(_tabItems.isNotEmpty ? [..._tabItems] : []),
      );
    });
  }

  ///////////////////////////////////////////////////////////////////////////////////////
  /// Build Method, combines the navigation bar and themed docking area
  ///////////////////////////////////////////////////////////////////////////////////////

  @override
  Widget build(BuildContext context) {
    // Get theme data from the dedicated theme section
    final (tabTheme, dividerTheme) = _buildTheme();

    return Row(
      children: [
        // Navigation bar for adding/removing widgets
        LeftNavBar(
          onAddWidget: _addWidget,
          onRemoveWidget: _removeWidget,
        ),
        // Main docking area with themed tabs and dividers
        Expanded(
          child: TabbedViewTheme(
            data: tabTheme,
            child: MultiSplitViewTheme(
              data: dividerTheme,
              child: Docking(
                layout: _layout,
                onItemSelection: (item) {
                  print('Selected: ${item.name}');
                },
                onItemClose: (item) {
                  print('Closed: ${item.name}');
                },
              ),
            ),
          ),
        ),
      ],
    );
  }

  ///////////////////////////////////////////////////////////////////////////////////////
  /// Theme Setup
  ///////////////////////////////////////////////////////////////////////////////////////
  
  (TabbedViewThemeData, MultiSplitViewThemeData) _buildTheme() {
    // Tab Theme (TabbedViewThemeData)
    final tabTheme = TabbedViewThemeData();

    // Tabs Bar: The container holding all tabs
    tabTheme.tabsArea
      ..border = const Border(bottom: BorderSide(color: Colors.transparent, width: 0)) // No bottom border
      ..middleGap = 0; // No gap between tabs

    // Tab Appearance
    const borderRadius = BorderRadius.only(
      topLeft: Radius.circular(3),
      topRight: Radius.circular(3),
    );

    tabTheme.tab
      ..normalButtonColor = const Color.fromARGB(255, 225, 225, 225) // Unselected tab background
      ..padding = const EdgeInsets.symmetric(horizontal: 12, vertical: 4) // Tab size
      ..textStyle = const TextStyle(fontSize: 10, color: Colors.white) // Tab text (affects dragged tab)
      ..decoration = const BoxDecoration(
          color: Color.fromARGB(255, 25, 25, 25), // Unselected tab background (affects dragged tab)
          borderRadius: borderRadius,
        )
      ..selectedStatus.decoration = const BoxDecoration(
          color: Color.fromARGB(255, 34, 34, 34), // Selected tab background
          border: Border(
            bottom: BorderSide(color: Color.fromARGB(0, 0, 195, 255), width: 1), // Blue underline for selected tab
          ),
          borderRadius: borderRadius,
        )
      ;



    // Divider Theme (MultiSplitViewThemeData)
    final dividerTheme = MultiSplitViewThemeData(
      dividerThickness: 3,
      dividerPainter: DividerPainters.grooved1(
        backgroundColor: const Color.fromARGB(0, 85, 140, 186), // Transparent background
        color: Colors.transparent, // Transparent divider
        highlightedColor: Colors.blue, // Blue when dragged
      ),
    );

    return (tabTheme, dividerTheme);
  }
}

[caduandrade]

Hi @IM-001!

I'll answer you as soon as I can, okay? I'll take a look at it after work.

If you can, can you complete the imports in the example?

[IM-001]

I've almost resolved it, I just need to handle the case where there is no row tab or column (an empty layout or a layout with just one widget). I should be able to complete it today, I'll post my solution when done. Thanks!

[caduandrade]

Keep me updated on your progress. If I understand correctly, the problem is that the layout is recreated internally. So, to change it dynamically, you need to know its structure and perhaps the IDs of each node. For simple configurations (e.g.: 3 or 4 areas), this may be easy, but if the layout is complex, it will be complicated.

Any suggestions for improvements are welcome, ok? The challenge of this API is to be generic enough to suit everyone (impossible to please everyone).

[IM-001]

Perfect! I have no problem iterating over the layout areas and getting all the info I need with _layout.layoutAreas().forEach((area).

My suggestion would be to have an easy automatic way to add a new widget with addItemOnRoot and just specify the docking position (right, left), the DropArea is really confusing because the behavior is different depending on the DockingAreaType. In this suggestion, addItemOnRoot should be able to handle cases where the root is null.

I'll post a working code as simple as possible when done. Thank you!

[IM-001]

Great news, I think I have something working well. The logic is this:

• to add a new widget you need to find a DockingAreaType.tabs OR a DockingAreaType.item parented to a DockingAreaType.row or DockingAreaType.column. rows and column do not work as DropAreas, only tabs or items.
• We also need to be ready to "reinitialize" a new layout if there is only 1 widget in the layout (no tab no column no row), or if there is NO widget in the layout (layout.root is then null)

Finally you need somewhere in your UI a button that triggers _addWidget to use this code.

There is probably a more straight-forward way to do this by simply examining the type of _layout.root, but it explains well all the cases possible in the docking layout.

import 'package:flutter/material.dart';
import 'package:docking/docking.dart';
import 'nav_bar.dart';

// DesktopWorkspace is the main widget for the desktop configurable workspace
class DesktopWorkspace extends StatefulWidget {
  const DesktopWorkspace({super.key});

  @override
  State<DesktopWorkspace> createState() => _DesktopWorkspaceState();
}


///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//// Layout and Widget Management, manages the docking layout and widget list (add/remove functionality)
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

class _DesktopWorkspaceState extends State<DesktopWorkspace> {

  late DockingLayout _layout; // The docking layout structure
  int _widgetCounter = 2; // Counter for generating unique widget IDs, to be revised with a uuid method
  
  // INITIAL LAYOUT
  // List of tab items, each representing a widget in the tabbed area
  final List<DockingItem> _tabItems = [
    DockingItem(
      id: 'Widget_1',
      name: 'Widget 1',
      widget: const PlaceholderWidget('Widget 1'),
      closable: true,
    ),
  ];

  // Initialize the layout with a tabbed area
  @override
  void initState() {
    super.initState();
    
    // Layout initialization with a single tabbed area
    _layout = DockingLayout(
      root: DockingTabs(_tabItems), // Use DockingTabs for tabbed layout
    );
  }

  ///////////////////////////////////////////////////////////////////////////////////////
  // ADD A NEW WIDGET, the purpose of this code
  ///////////////////////////////////////////////////////////////////////////////////////
  void _addWidget(String type) {
    setState(() {
      // Initialize our future DropArea      
      DockingArea? newArea;

      // Find any *DockingAreaType.tabs* or *DockingAreaType.item* that is parented to a row or column present in the layout
      _layout.layoutAreas().forEach((area) {

        // Print info on widgets in the layout
        // print("layout area: ${area.id} / ${area.level} / ${area.type} / ${area.layoutId} /  ${area.path} / ${area.parent} / ${area.index}");
        
        if (area.type == DockingAreaType.tabs 
          || (area.type == DockingAreaType.item && area.parent?.type == DockingAreaType.row)
          || (area.type == DockingAreaType.item && area.parent?.type == DockingAreaType.column)) {
          newArea = area;
        }
        // Break the loop if we found a suitable area
        if (newArea != null) {
          return;
        }
      });

      // Build our new widget to be docked in the layout
      _widgetCounter++;
      final newId = '${type.toLowerCase()}_$_widgetCounter';
      final newName = '$type $_widgetCounter';
      final newItem = DockingItem(
        id: newId,
        name: newName,
        widget: PlaceholderWidget(newName),
        closable: true,
      );


      ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
      // These conditions try to cover all the cases possible of the layout state, as explained below

      // CASE 1, no widget in the layout so _layout.root is null
      if (_layout.root == null) {
          print("CASE 1");
          // Layout reinitialized
          _layout = DockingLayout(root: DockingTabs([newItem]));
          }

      // CASE 2, Only 1 widget in the layout, so there is a _layout.root, but no tabs, columns or rows yet
      else if (newArea == null) {
          print("CASE 2");
          _layout.addItemOn(newItem: newItem, targetArea: _layout.root as DropArea, dropPosition: DropPosition.right);
        }

      // CASE 3, normal scenario we have found a dockable tabs layout
      else if (newArea?.type == DockingAreaType.tabs) {
          print("CASE 3");
          _layout.addItemOn(newItem: newItem, targetArea: newArea as DropArea, dropPosition: DropPosition.right);
        }

      // CASE 4, no tabs in the layout but there is a row or column somewhere
      else if (newArea?.type == DockingAreaType.item) {
        print("CASE 4");
        _layout.addItemOn(newItem: newItem, targetArea: newArea as DropArea, dropPosition: DropPosition.right);
      }

      // CASE 5, unhandled error this should not happen
      else {
        print("UNHANDLED CASE: ${newArea?.type}");
      }
      ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    });
  }
  
  ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  // Remove a widget from the tabbed area by ID
  void _removeWidget(String id) {
    setState(() {
      _layout.removeItemByIds([id]);
    });
  }

  ///////////////////////////////////////////////////////////////////////////////////////
  /// Build Method, combines the navigation bar and themed docking area
  ///////////////////////////////////////////////////////////////////////////////////////

  @override
  Widget build(BuildContext context) {
    // Get theme data from the dedicated theme section
    final (tabTheme, dividerTheme) = _buildTheme();

    return Row(
      children: [
        // Navigation bar for adding/removing widgets
        LeftNavBar(
          onAddWidget: _addWidget,
          onRemoveWidget: _removeWidget,
        ),
        // Main docking area with themed tabs and dividers
        Expanded(
          child: TabbedViewTheme(
            data: tabTheme,
            child: MultiSplitViewTheme(
              data: dividerTheme,
              child: Docking(
                layout: _layout,
                onItemSelection: (item) {
                  print('Selected: ${item.name}');
                },
                onItemClose: (item) {
                  print('Closed: ${item.name}');
                },
              ),
            ),
          ),
        ),
      ],
    );
  }

  ///////////////////////////////////////////////////////////////////////////////////////
  /// Theme Setup
  ///////////////////////////////////////////////////////////////////////////////////////
  
  (TabbedViewThemeData, MultiSplitViewThemeData) _buildTheme() {
    // Tab Theme (TabbedViewThemeData)
    final tabTheme = TabbedViewThemeData();

    // Tabs Bar: The container holding all tabs
    tabTheme.tabsArea
      ..border = const Border(bottom: BorderSide(color: Colors.transparent, width: 0)) // No bottom border
      ..middleGap = 0; // No gap between tabs

    // Tab Appearance
    const borderRadius = BorderRadius.only(
      topLeft: Radius.circular(3),
      topRight: Radius.circular(3),
    );

    tabTheme.tab
      ..normalButtonColor = const Color.fromARGB(255, 225, 225, 225) // Unselected tab background
      ..hoverButtonColor = const Color.fromARGB(255, 100, 225, 225) // Hovered tab background
      ..buttonsGap = 8
      ..disabledButtonColor = const Color.fromARGB(0, 100, 100, 100) // Disabled tab background
      ..padding = const EdgeInsets.symmetric(horizontal: 12, vertical: 4) // Tab size
      ..textStyle = const TextStyle(fontSize: 10, color: Colors.white) // Tab text (affects dragged tab)
      ..decoration = const BoxDecoration( // Unselected tab background (affects dragged tab)
          color: Color.fromARGB(255, 25, 25, 25), 
          borderRadius: borderRadius,
        )
      ..selectedStatus.decoration = const BoxDecoration(
          color: Color.fromARGB(255, 34, 34, 34), // Selected tab background
          border: Border(
            bottom: BorderSide(color: Color.fromARGB(200, 0, 195, 255), width: 1), // Blue underline for selected tab
          ),
          borderRadius: borderRadius,
        )
      ;



    // Divider Theme (MultiSplitViewThemeData)
    final dividerTheme = MultiSplitViewThemeData(
      dividerThickness: 3,
      dividerPainter: DividerPainters.grooved1(
        backgroundColor: const Color.fromARGB(0, 85, 140, 186), // Transparent background
        color: Colors.transparent, // Transparent divider
        highlightedColor: Colors.blue, // Blue when dragged
      ),
    );

    return (tabTheme, dividerTheme);
  }
}

///////////////////////////////////////////////////////////////////////////////////////
// Placeholder widget for testing (represents any item to be docked in the layout)
class PlaceholderWidget extends StatelessWidget {
  final String name;

  const PlaceholderWidget(this.name, {super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      color: const Color.fromARGB(255, 34, 34, 34),
      padding: const EdgeInsets.all(16),
      child: Center(child: Text(name, style: const TextStyle(color: Colors.white))),
    );
  }
}

[Mysrt]

hey @IM-001 i just want to say i had basically your exact use-case, and was running into the same problems and your code/fix worked for me. So, thank you! and of course thank you @caduandrade for creating this package in the first place. I'm making kind of a multi-viewer with a bunch of video streams and this works perfectly for it, at least so far!