### Basic Flutter App Setup with MultiSplitView

Source: https://github.com/caduandrade/multi_split_view/blob/master/_autodocs/getting-started.md

Demonstrates the minimal setup for a Flutter application using the MultiSplitView widget with two proportional areas.

```dart
import 'package:flutter/material.dart';
import 'package:multi_split_view/multi_split_view.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Split View')),
        body: MultiSplitView(
          initialAreas: [
            Area(flex: 1),
            Area(flex: 1),
          ],
          builder: (context, area) {
            return Container(
              color: Colors.blue[50],
              child: Center(
                child: Text('Area ${area.index}'),
              ),
            );
          },
        ),
      ),
    );
  }
}
```

--------------------------------

### Usage Example

Source: https://github.com/caduandrade/multi_split_view/blob/master/_autodocs/multi-split-view.md

A practical example demonstrating how to use the MultiSplitView widget in a Flutter application, including controller setup and area building.

```APIDOC
## Usage Example

### Description
This example shows how to implement a `MultiSplitView` with three areas, using a `MultiSplitViewController` to manage the areas and a custom builder to display content in each area.

### Code
```dart
import 'package:flutter/material.dart';
import 'package:multi_split_view/multi_split_view.dart';

class SplitViewExample extends StatefulWidget {
  @override
  State<SplitViewExample> createState() => _SplitViewExampleState();
}

class _SplitViewExampleState extends State<SplitViewExample> {
  final MultiSplitViewController _controller = MultiSplitViewController();

  @override
  void initState() {
    super.initState();
    _controller.areas = [
      Area(flex: 1, data: 'Panel 1'),
      Area(flex: 1, data: 'Panel 2'),
      Area(flex: 1, data: 'Panel 3'),
    ];
  }

  @override
  Widget build(BuildContext context) {
    return MultiSplitView(
      controller: _controller,
      builder: (context, area) {
        return Container(
          color: Colors.blue[100],
          child: Center(
            child: Text('Area: ${area.data}'),
          ),
        );
      },
      onDividerDragUpdate: (dividerIndex) {
        print('Dragging divider $dividerIndex');
      },
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}
```
```

--------------------------------

### MultiSplitView Usage Example

Source: https://github.com/caduandrade/multi_split_view/blob/master/_autodocs/multi-split-view-controller.md

Demonstrates how to use MultiSplitViewController to manage a MultiSplitView widget. Includes examples of adding, removing, and modifying areas programmatically.

```dart
import 'package:flutter/material.dart';
import 'package:multi_split_view/multi_split_view.dart';

class SplitViewController extends StatefulWidget {
  @override
  State<SplitViewController> createState() => _SplitViewControllerState();
}

class _SplitViewControllerState extends State<SplitViewController> {
  late MultiSplitViewController _controller;

  @override
  void initState() {
    super.initState();
    _controller = MultiSplitViewController(areas: [
      Area(flex: 1, data: 'Top'),
      Area(flex: 1, data: 'Middle'),
      Area(flex: 1, data: 'Bottom'),
    ]);
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Expanded(
          child: MultiSplitView(
            controller: _controller,
            axis: Axis.vertical,
            builder: (context, area) => Container(
              color: Colors.blue[50],
              child: Center(child: Text(area.data ?? 'Empty')),
            ),
          ),
        ),
        Padding(
          padding: EdgeInsets.all(8),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              ElevatedButton(
                onPressed: () {
                  _controller.addArea(Area(flex: 1));
                },
                child: Text('Add Area'),
              ),
              ElevatedButton(
                onPressed: _controller.areasCount > 1
                    ? () => _controller.removeAreaAt(0)
                    : null,
                child: Text('Remove First'),
              ),
              ElevatedButton(
                onPressed: () {
                  Area area = _controller.getArea(0);
                  area.flex = 2;
                },
                child: Text('Expand First'),
              ),
            ],
          ),
        ),
      ],
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}
```

--------------------------------

### Example Usage of MultiSplitViewTheme.of

Source: https://github.com/caduandrade/multi_split_view/blob/master/_autodocs/theme.md

Demonstrates how to access and use the `dividerThickness` property from the nearest `MultiSplitViewThemeData`.

```dart
MultiSplitViewThemeData theme = MultiSplitViewTheme.of(context);
print('Divider thickness: ${theme.dividerThickness}');
```

--------------------------------

### Multi Split View Policies Example

Source: https://github.com/caduandrade/multi_split_view/blob/master/_autodocs/policies.md

Demonstrates the usage of SizeOverflowPolicy, SizeUnderflowPolicy, and MinSizeRecoveryPolicy in a Flutter Multi Split View widget. This example allows interactive selection of different policy values to observe their effects.

```dart
import 'package:flutter/material.dart';
import 'package:multi_split_view/multi_split_view.dart';

class PoliciesExample extends StatefulWidget {
  @override
  State<PoliciesExample> createState() => _PoliciesExampleState();
}

class _PoliciesExampleState extends State<PoliciesExample> {
  late MultiSplitViewController _controller;
  SizeOverflowPolicy _overflowPolicy = SizeOverflowPolicy.shrinkLast;
  SizeUnderflowPolicy _underflowPolicy = SizeUnderflowPolicy.stretchLast;
  MinSizeRecoveryPolicy _recoveryPolicy = MinSizeRecoveryPolicy.firstToLast;

  @override
  void initState() {
    super.initState();
    _controller = MultiSplitViewController(areas: [
      Area(size: 150, min: 80, data: 'Left'),
      Area(size: 150, min: 80, data: 'Center'),
      Area(flex: 1, min: 100, data: 'Right'),
    ]);
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Padding(
          padding: EdgeInsets.all(8),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text('Overflow: ${_overflowPolicy.toString().split('.').last}'),
              SegmentedButton<SizeOverflowPolicy>(
                segments: [
                  ButtonSegment(
                    value: SizeOverflowPolicy.shrinkFirst,
                    label: Text('Shrink First'),
                  ),
                  ButtonSegment(
                    value: SizeOverflowPolicy.shrinkLast,
                    label: Text('Shrink Last'),
                  ),
                ],
                selected: {_overflowPolicy},
                onSelectionChanged: (selection) {
                  setState(() => _overflowPolicy = selection.first);
                },
              ),
              SizedBox(height: 8),
              Text('Underflow: ${_underflowPolicy.toString().split('.').last}'),
              SegmentedButton<SizeUnderflowPolicy>(
                segments: [
                  ButtonSegment(
                    value: SizeUnderflowPolicy.stretchFirst,
                    label: Text('Stretch First'),
                  ),
                  ButtonSegment(
                    value: SizeUnderflowPolicy.stretchLast,
                    label: Text('Stretch Last'),
                  ),
                  ButtonSegment(
                    value: SizeUnderflowPolicy.stretchAll,
                    label: Text('Stretch All'),
                  ),
                ],
                selected: {_underflowPolicy},
                onSelectionChanged: (selection) {
                  setState(() => _underflowPolicy = selection.first);
                },
              ),
              SizedBox(height: 8),
              Text('Recovery: ${_recoveryPolicy.toString().split('.').last}'),
              SegmentedButton<MinSizeRecoveryPolicy>(
                segments: [
                  ButtonSegment(
                    value: MinSizeRecoveryPolicy.firstToLast,
                    label: Text('First → Last'),
                  ),
                  ButtonSegment(
                    value: MinSizeRecoveryPolicy.lastToFirst,
                    label: Text('Last → First'),
                  ),
                ],
                selected: {_recoveryPolicy},
                onSelectionChanged: (selection) {
                  setState(() => _recoveryPolicy = selection.first);
                },
              ),
            ],
          ),
        ),
        Expanded(
          child: MultiSplitView(
            controller: _controller,
            sizeOverflowPolicy: _overflowPolicy,
            sizeUnderflowPolicy: _underflowPolicy,
            minSizeRecoveryPolicy: _recoveryPolicy,
            builder: (context, area) {
              return Container(
                color: Colors.blue[50],
                child: Center(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text('${area.data}'),
                      if (area.size != null)
                        Text('Size: ${area.size!.toStringAsFixed(0)}'),
                      if (area.flex != null)
                        Text('Flex: ${area.flex}'),
                      Text('Min: ${area.min}'),
                    ],
                  ),
                ),
              );
            },
          ),
        ),
      ],
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

```

--------------------------------

### Basic Theme Application Example

Source: https://github.com/caduandrade/multi_split_view/blob/master/_autodocs/theme.md

Applies a custom theme to a `MultiSplitView` widget, setting divider thickness and a background painter.

```dart
import 'package:flutter/material.dart';
import 'package:multi_split_view/multi_split_view.dart';

class BasicThemeExample extends StatefulWidget {
  @override
  State<BasicThemeExample> createState() => _BasicThemeExampleState();
}

class _BasicThemeExampleState extends State<BasicThemeExample> {
  late MultiSplitViewController _controller;

  @override
  void initState() {
    super.initState();
    _controller = MultiSplitViewController(areas: [
      Area(flex: 1),
      Area(flex: 1),
      Area(flex: 1),
    ]);
  }

  @override
  Widget build(BuildContext context) {
    return MultiSplitViewTheme(
      data: MultiSplitViewThemeData(
        dividerThickness: 8,
        dividerPainter: DividerPainters.background(
          color: Colors.grey[300],
          highlightedColor: Colors.blue[300],
        ),
      ),
      child: MultiSplitView(
        controller: _controller,
        builder: (context, area) {
          return Container(
            color: Colors.blue[50],
            child: Center(child: Text('Area ${area.index}')),
          );
        },
      ),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}
```

--------------------------------

### SizeUnderflowPolicy Usage Example

Source: https://github.com/caduandrade/multi_split_view/blob/master/_autodocs/policies.md

Shows how to configure the SizeUnderflowPolicy for a MultiSplitView. The default is stretchLast.

```dart
MultiSplitView(
  sizeUnderflowPolicy: SizeUnderflowPolicy.stretchLast, // Default
  areas: [
    Area(size: 100),
    Area(size: 100),
    Area(flex: 1),
  ],
)
```

--------------------------------

### Responsive Layout Example

Source: https://github.com/caduandrade/multi_split_view/blob/master/_autodocs/REFERENCE.md

Adapts the layout based on screen width, showing a single pane on small screens and a sidebar layout on larger screens.

```dart
MultiSplitViewController(
  areas: MediaQuery.of(context).size.width < 600
    ? [Area(flex: 1)] // Single pane on mobile
    : [
        Area(size: 250, min: 150), // Sidebar on desktop
        Area(flex: 1),
      ],
)
```

--------------------------------

### Nested Themes Example

Source: https://github.com/caduandrade/multi_split_view/blob/master/_autodocs/theme.md

Demonstrates how child themes override parent themes, allowing for different styling in various UI regions. This example shows horizontal and vertical nesting.

```dart
class NestedThemeExample extends StatefulWidget {
  @override
  State<NestedThemeExample> createState() => _NestedThemeExampleState();
}

class _NestedThemeExampleState extends State<NestedThemeExample> {
  late MultiSplitViewController _horizontalController;
  late MultiSplitViewController _verticalController;

  @override
  void initState() {
    super.initState();
    _horizontalController = MultiSplitViewController(areas: [
      Area(flex: 1),
      Area(flex: 2),
    ]);
    _verticalController = MultiSplitViewController(areas: [
      Area(flex: 1),
      Area(flex: 1),
    ]);
  }

  @override
  Widget build(BuildContext context) {
    return MultiSplitViewTheme(
      data: MultiSplitViewThemeData(
        dividerThickness: 10,
        dividerPainter: DividerPainters.grooved1(),
      ),
      child: Column(
        children: [
          Expanded(
            child: MultiSplitView(
              controller: _horizontalController,
              axis: Axis.horizontal,
              builder: (context, area) {
                return Container(
                  color: Colors.blue[50],
                  child: Center(child: Text('Horizontal ${area.index}')),
                );
              },
            ),
          ),
          Expanded(
            child: MultiSplitViewTheme(
              data: MultiSplitViewThemeData(
                dividerThickness: 6,
                dividerPainter: DividerPainters.dashed(
                  color: Colors.grey[500],
                  highlightedColor: Colors.red,
                ),
              ),
              child: MultiSplitView(
                controller: _verticalController,
                axis: Axis.vertical,
                builder: (context, area) {
                  return Container(
                    color: Colors.green[50],
                    child: Center(child: Text('Vertical ${area.index}')),
                  );
                },
              ),
            ),
          ),
        ],
      ),
    );
  }

  @override
  void dispose() {
    _horizontalController.dispose();
    _verticalController.dispose();
    super.dispose();
  }
}
```

--------------------------------

### Basic Customization Example

Source: https://github.com/caduandrade/multi_split_view/blob/master/_autodocs/divider-widget.md

Demonstrates how to use MultiSplitView with basic theme customization for dividers, such as thickness and painter. The default DividerWidget is used.

```dart
import 'package:flutter/material.dart';
import 'package:multi_split_view/multi_split_view.dart';

class CustomDividerExample extends StatefulWidget {
  @override
  State<CustomDividerExample> createState() => _CustomDividerExampleState();
}

class _CustomDividerExampleState extends State<CustomDividerExample> {
  late MultiSplitViewController _controller;

  @override
  void initState() {
    super.initState();
    _controller = MultiSplitViewController(areas: [
      Area(flex: 1),
      Area(flex: 1),
    ]);
  }

  @override
  Widget build(BuildContext context) {
    return MultiSplitViewTheme(
      data: MultiSplitViewThemeData(
        dividerThickness: 10,
        dividerPainter: DividerPainters.grooved1(),
      ),
      child: MultiSplitView(
        controller: _controller,
        // Use the default DividerWidget from the theme
        builder: (context, area) {
          return Container(
            color: Colors.blue[50],
            child: Center(child: Text('Area ${area.index}')),
          );
        },
      ),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}
```

--------------------------------

### Invalid Area Configuration Example

Source: https://github.com/caduandrade/multi_split_view/blob/master/_autodocs/REFERENCE.md

Highlights an incorrect Area configuration where both 'size' and 'flex' are specified, which is not allowed.

```dart
Area(size: 100, flex: 1) // Invalid: both size and flex
```

--------------------------------

### MultiSplitView with Draft Widgets Example

Source: https://github.com/caduandrade/multi_split_view/blob/master/_autodocs/draft.md

Demonstrates using the Draft widget within a MultiSplitView for layout prototyping. It assigns different Draft variants to each area based on its index.

```dart
import 'package:flutter/material.dart';
import 'package:multi_split_view/multi_split_view.dart';

class DraftExample extends StatefulWidget {
  @override
  State<DraftExample> createState() => _DraftExampleState();
}

class _DraftExampleState extends State<DraftExample> {
  late MultiSplitViewController _controller;

  @override
  void initState() {
    super.initState();
    _controller = MultiSplitViewController(areas: [
      Area(flex: 1),
      Area(flex: 1),
      Area(flex: 1),
    ]);
  }

  @override
  Widget build(BuildContext context) {
    return MultiSplitView(
      controller: _controller,
      builder: (context, area) {
        // Quick prototyping with Draft widgets
        switch (area.index) {
          case 0:
            return Draft.blue(text: 'Left Panel');
          case 1:
            return Draft.green(text: 'Center Panel');
          case 2:
            return Draft.orange(text: 'Right Panel');
          default:
            return Draft.random('Area ${area.index}');
        }
      },
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}
```

--------------------------------

### Configure Multi Split View Areas

Source: https://github.com/caduandrade/multi_split_view/blob/master/_autodocs/area.md

Demonstrates how to initialize a MultiSplitViewController with multiple areas, each having unique IDs, flex values, and size constraints. This setup is useful for creating complex layouts with resizable panels.

```dart
import 'package:flutter/material.dart';
import 'package:multi_split_view/multi_split_view.dart';

class AreaExample extends StatefulWidget {
  @override
  State<AreaExample> createState() => _AreaExampleState();
}

class _AreaExampleState extends State<AreaExample> {
  late MultiSplitViewController _controller;

  @override
  void initState() {
    super.initState();
    _controller = MultiSplitViewController(areas: [
      Area(
        id: 'left',
        flex: 1,
        min: 100,
        max: 400,
        data: 'Left Panel',
      ),
      Area(
        id: 'middle',
        flex: 2,
        min: 150,
        data: 'Middle Panel',
      ),
      Area(
        id: 'right',
        size: 200,
        min: 100,
        max: 300,
        data: 'Right Panel',
      ),
    ]);
  }

  @override
  Widget build(BuildContext context) {
    return MultiSplitView(
      controller: _controller,
      builder: (context, area) {
        return Container(
          color: Colors.grey[200],
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(area.data ?? 'No label'),
              SizedBox(height: 8),
              if (area.size != null)
                Text('Fixed: ${area.size!.toStringAsFixed(0)}px')
              else
                Text('Flex: ${area.flex}'),
              if (area.min != null)
                Text('Min: ${area.min!.toStringAsFixed(0)}px'),
              if (area.max != null)
                Text('Max: ${area.max!.toStringAsFixed(0)}px'),
            ],
          ),
        );
      },
      onDividerDragUpdate: (index) {
        // Area sizes update automatically during drag
        setState(() {});
      },
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

```

--------------------------------

### Draft.pink Factory Constructor

Source: https://github.com/caduandrade/multi_split_view/blob/master/_autodocs/draft.md

Creates a pink-tinted Draft widget. Use this for quick setup of pink-colored areas in layouts.

```dart
factory Draft.pink({
  String text = 'pink',
  Key? key,
})
```

--------------------------------

### Draft.teal Factory Constructor

Source: https://github.com/caduandrade/multi_split_view/blob/master/_autodocs/draft.md

Creates a teal-tinted Draft widget. Use this for quick setup of teal-colored areas in layouts.

```dart
factory Draft.teal({
  String text = 'teal',
  Key? key,
})
```

--------------------------------

### Vertical Split Layout Example

Source: https://github.com/caduandrade/multi_split_view/blob/master/_autodocs/getting-started.md

Implements a vertical (top-bottom) split layout using MultiSplitView with a controller to manage the areas.

```dart
class VerticalSplit extends StatefulWidget {
  @override
  State<VerticalSplit> createState() => _VerticalSplitState();
}

class _VerticalSplitState extends State<VerticalSplit> {
  final controller = MultiSplitViewController(areas: [
    Area(flex: 1),
    Area(flex: 1),
    Area(flex: 1),
  ]);

  @override
  Widget build(BuildContext context) {
    return MultiSplitView(
      axis: Axis.vertical, // Top-bottom layout
      controller: controller,
      builder: (context, area) {
        return Container(
          color: Colors.green[50],
          child: Center(child: Text('Area ${area.index}')),
        );
      },
    );
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }
}
```

--------------------------------

### Horizontal Split Layout Example

Source: https://github.com/caduandrade/multi_split_view/blob/master/_autodocs/getting-started.md

Implements a horizontal (left-right) split layout using MultiSplitView with a controller to manage the areas.

```dart
class HorizontalSplit extends StatefulWidget {
  @override
  State<HorizontalSplit> createState() => _HorizontalSplitState();
}

class _HorizontalSplitState extends State<HorizontalSplit> {
  final controller = MultiSplitViewController(areas: [
    Area(flex: 1),
    Area(flex: 1),
  ]);

  @override
  Widget build(BuildContext context) {
    return MultiSplitView(
      axis: Axis.horizontal, // Default: left-right layout
      controller: controller,
      builder: (context, area) {
        return Container(
          color: Colors.blue[50],
          child: Center(child: Text('Area ${area.index}')),
        );
      },
    );
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }
}
```

--------------------------------

### MultiSplitView Usage Example

Source: https://github.com/caduandrade/multi_split_view/blob/master/_autodocs/multi-split-view.md

Demonstrates how to use the MultiSplitView widget to create a three-panel split view. It utilizes a MultiSplitViewController to manage the areas and a custom builder to display content within each area.

```dart
import 'package:flutter/material.dart';
import 'package:multi_split_view/multi_split_view.dart';

class SplitViewExample extends StatefulWidget {
  @override
  State<SplitViewExample> createState() => _SplitViewExampleState();
}

class _SplitViewExampleState extends State<SplitViewExample> {
  final MultiSplitViewController _controller = MultiSplitViewController();

  @override
  void initState() {
    super.initState();
    _controller.areas = [
      Area(flex: 1, data: 'Panel 1'),
      Area(flex: 1, data: 'Panel 2'),
      Area(flex: 1, data: 'Panel 3'),
    ];
  }

  @override
  Widget build(BuildContext context) {
    return MultiSplitView(
      controller: _controller,
      builder: (context, area) {
        return Container(
          color: Colors.blue[100],
          child: Center(
            child: Text('Area: ${area.data}'),
          ),
        );
      },
      onDividerDragUpdate: (dividerIndex) {
        print('Dragging divider $dividerIndex');
      },
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}
```

--------------------------------

### MinSizeRecoveryPolicy Usage Example

Source: https://github.com/caduandrade/multi_split_view/blob/master/_autodocs/policies.md

Illustrates setting the MinSizeRecoveryPolicy for a MultiSplitView. This policy affects how minimum sizes are re-established during interactive resizing.

```dart
MultiSplitView(
  minSizeRecoveryPolicy: MinSizeRecoveryPolicy.firstToLast,
  areas: [
    Area(size: 200, min: 100),
    Area(size: 150, min: 100),
    Area(flex: 1),
  ],
)
```

--------------------------------

### Draft.brown Factory Constructor

Source: https://github.com/caduandrade/multi_split_view/blob/master/_autodocs/draft.md

Creates a brown-tinted Draft widget. Use this for quick setup of brown-colored areas in layouts.

```dart
factory Draft.brown({
  String text = 'brown',
  Key? key,
})
```

--------------------------------

### Draft.green Factory Constructor

Source: https://github.com/caduandrade/multi_split_view/blob/master/_autodocs/draft.md

Creates a green-tinted Draft widget. Use this for quick setup of green-colored areas in layouts.

```dart
factory Draft.green({
  String text = 'green',
  Key? key,
})
```

--------------------------------

### Draft.orange Factory Constructor

Source: https://github.com/caduandrade/multi_split_view/blob/master/_autodocs/draft.md

Creates an orange-tinted Draft widget. Use this for quick setup of orange-colored areas in layouts.

```dart
factory Draft.orange({
  String text = 'orange',
  Key? key,
})
```

--------------------------------

### Draft.blue Factory Constructor

Source: https://github.com/caduandrade/multi_split_view/blob/master/_autodocs/draft.md

Creates a blue-tinted Draft widget. Use this for quick setup of blue-colored areas in layouts.

```dart
factory Draft.blue({
  String text = 'blue',
  Key? key,
})
```

```dart
Draft.blue(text: 'Left Panel')
```

--------------------------------

### SizeOverflowPolicy Usage Example

Source: https://github.com/caduandrade/multi_split_view/blob/master/_autodocs/policies.md

Demonstrates setting the SizeOverflowPolicy for a MultiSplitView widget. The default is shrinkLast.

```dart
MultiSplitView(
  sizeOverflowPolicy: SizeOverflowPolicy.shrinkLast, // Default
  areas: [
    Area(size: 200), // May be shrunk
    Area(size: 150), // May be shrunk first
    Area(flex: 1),   // Flex areas shrink last
  ],
)
```

--------------------------------

### Programmatic Area Management with MultiSplitViewController

Source: https://github.com/caduandrade/multi_split_view/blob/master/_autodocs/getting-started.md

Shows how to use MultiSplitViewController to programmatically add, remove, get, and replace areas in a split view.

```dart
final controller = MultiSplitViewController(areas: [
  Area(flex: 1),
  Area(flex: 1),
]);

// Add area
controller.addArea(Area(flex: 1));

// Remove area
controller.removeAreaAt(0);

// Get area
Area area = controller.getArea(0);

// Replace all areas
controller.areas = [Area(flex: 2), Area(flex: 1)];
```

--------------------------------

### Draft.yellow Factory Constructor

Source: https://github.com/caduandrade/multi_split_view/blob/master/_autodocs/draft.md

Creates a yellow-tinted Draft widget. Use this for quick setup of yellow-colored areas in layouts.

```dart
factory Draft.yellow({
  String text = 'yellow',
  Key? key,
})
```

--------------------------------

### MultiSplitView with Different Divider Painters

Source: https://github.com/caduandrade/multi_split_view/blob/master/_autodocs/divider-painter.md

This example demonstrates how to dynamically change the divider painter style in a MultiSplitView based on user selection. It uses a SegmentedButton to switch between solid, dashed, and two grooved divider styles, applying them via MultiSplitViewTheme.

```dart
import 'package:flutter/material.dart';
import 'package:multi_split_view/multi_split_view.dart';

class DividerPainterExample extends StatefulWidget {
  @override
  State<DividerPainterExample> createState() => _DividerPainterExampleState();
}

class _DividerPainterExampleState extends State<DividerPainterExample> {
  late MultiSplitViewController _controller;
  int _selectedStyle = 0;

  @override
  void initState() {
    super.initState();
    _controller = MultiSplitViewController(areas: [
      Area(flex: 1),
      Area(flex: 1),
      Area(flex: 1),
    ]);
  }

  @override
  Widget build(BuildContext context) {
    DividerPainter painter;
    switch (_selectedStyle) {
      case 0:
        painter = DividerPainters.background(
          color: Colors.grey[300],
          highlightedColor: Colors.blue[300],
        );
        break;
      case 1:
        painter = DividerPainters.dashed(
          size: 8,
          gap: 4,
          color: Colors.grey[600],
          highlightedColor: Colors.blue,
        );
        break;
      case 2:
        painter = DividerPainters.grooved1(
          size: 30,
          color: Colors.grey[400],
          highlightedColor: Colors.blue,
        );
        break;
      case 3:
      default:
        painter = DividerPainters.grooved2(
          size: 4,
          gap: 5,
          count: 9,
          color: Colors.grey[400],
          highlightedColor: Colors.blue,
        );
    }

    return Column(
      children: [
        SegmentedButton<int>(
          segments: [
            ButtonSegment(value: 0, label: Text('Solid')),
            ButtonSegment(value: 1, label: Text('Dashed')),
            ButtonSegment(value: 2, label: Text('Grooved 1')),
            ButtonSegment(value: 3, label: Text('Grooved 2')),
          ],
          selected: {_selectedStyle},
          onSelectionChanged: (selection) {
            setState(() => _selectedStyle = selection.first);
          },
        ),
        Expanded(
          child: MultiSplitViewTheme(
            data: MultiSplitViewThemeData(
              dividerThickness: 10,
              dividerPainter: painter,
            ),
            child: MultiSplitView(
              controller: _controller,
              builder: (context, area) {
                return Container(
                  color: Colors.blue[50],
                  child: Center(
                    child: Text('Area ${area.index}'),
                  ),
                );
              },
            ),
          ),
        ),
      ],
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

```

--------------------------------

### Rapid Prototyping with Draft and MultiSplitView

Source: https://github.com/caduandrade/multi_split_view/blob/master/_autodocs/draft.md

Illustrates a stateless approach to rapid prototyping using Draft widgets and a MultiSplitView. It cycles through available Draft color factories based on the area index.

```dart
class PrototypeLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiSplitView(
      initialAreas: [
        Area(flex: 1),
        Area(flex: 1),
        Area(flex: 1),
      ],
      builder: (context, area) {
        final colors = [
          Draft.blue,
          Draft.yellow,
          Draft.green,
          Draft.brown,
          Draft.pink,
          Draft.orange,
          Draft.teal,
        ];
        final colorFactory = colors[area.index % colors.length];
        return colorFactory(text: 'Area ${area.index}');
      },
    );
  }
}
```

--------------------------------

### Import Statements for multi_split_view

Source: https://github.com/caduandrade/multi_split_view/blob/master/_autodocs/REFERENCE.md

Demonstrates how to import all components or specific items from the multi_split_view package.

```dart
import 'package:multi_split_view/multi_split_view.dart';

// Or import specific items
import 'package:multi_split_view/multi_split_view.dart' show
    MultiSplitView,
    MultiSplitViewController,
    Area,
    DividerPainter,
    DividerPainters,
    MultiSplitViewTheme,
    MultiSplitViewThemeData,
    SizeOverflowPolicy,
    SizeUnderflowPolicy,
    MinSizeRecoveryPolicy;
```

--------------------------------

### Area Constructor

Source: https://github.com/caduandrade/multi_split_view/blob/master/_autodocs/area.md

Initializes a new Area instance with specified sizing, constraints, and data.

```APIDOC
## Constructor Area

### Description
Initializes a new Area instance with specified sizing, constraints, and data.

### Parameters
#### Constructor Parameters
- **size** (double?) - Optional - Fixed width/height in pixels. Mutually exclusive with flex.
- **flex** (double?) - Optional - Flex factor for proportional sizing. Defaults to 1 if both size and flex are null.
- **min** (double?) - Optional - Minimum size in pixels or flex units
- **max** (double?) - Optional - Maximum size in pixels or flex units
- **id** (dynamic) - Optional - Unique identifier for the area. Defaults to auto-generated AreaId if not provided.
- **data** (dynamic) - Optional - Arbitrary data associated with the area
- **builder** (AreaWidgetBuilder?) - Optional - Custom widget builder for this area

### Throws
- ArgumentError if both size and flex are provided
- ArgumentError if max is less than min
- StateError if a duplicate area ID exists in the controller

### Behavior
- If neither size nor flex is provided, flex is set to 1
- If size is set to null, flex becomes the sizing mode
- If flex is set to null, size becomes the sizing mode
```

--------------------------------

### Layout with Min/Max Size Constraints

Source: https://github.com/caduandrade/multi_split_view/blob/master/_autodocs/getting-started.md

Shows how to apply minimum and maximum size constraints to areas within a MultiSplitView to control their resizable boundaries.

```dart
final controller = MultiSplitViewController(areas: [
  Area(
    flex: 1,
    min: 100,  // Cannot shrink below 100px
    max: 400,  // Cannot grow beyond 400px
  ),
  Area(flex: 1),
]);

MultiSplitView(
  controller: controller,
  builder: (context, area) {
    return Container(
      color: Colors.blue[50],
      child: Center(child: Text('Area ${area.index}')),
    );
  },
);
```

--------------------------------

### Sidebar Layout Configuration

Source: https://github.com/caduandrade/multi_split_view/blob/master/_autodocs/REFERENCE.md

Sets up a layout with a fixed-size sidebar and a flexible main content area.

```dart
MultiSplitViewController(areas: [
  Area(size: 250, min: 150, max: 400), // Sidebar
  Area(flex: 1), // Main content
])
```

--------------------------------

### OnDividerDragEvent

Source: https://github.com/caduandrade/multi_split_view/blob/master/_autodocs/types.md

Callback signature for divider drag events (start, update, end). It provides the index of the divider being dragged.

```APIDOC
## Type Alias: OnDividerDragEvent

### Description
Callback signature for divider drag events (start, update, end).

### Parameters
- `index` (int) - Required - Index of the divider being dragged

### Accepted by
- `MultiSplitView.onDividerDragStart`
- `MultiSplitView.onDividerDragUpdate`
- `MultiSplitView.onDividerDragEnd`

### Example
```dart
MultiSplitView(
  onDividerDragStart: (dividerIndex) => print('Drag started: $dividerIndex'),
  onDividerDragUpdate: (dividerIndex) => print('Dragging: $dividerIndex'),
  onDividerDragEnd: (dividerIndex) => print('Drag ended: $dividerIndex'),
)
```
```

--------------------------------

### MultiSplitViewController Constructor

Source: https://github.com/caduandrade/multi_split_view/blob/master/_autodocs/multi-split-view-controller.md

Initializes a new instance of the MultiSplitViewController. It can be configured with an initial list of areas and an optional data modifier function.

```APIDOC
## MultiSplitViewController()

### Description
Initializes a new instance of the MultiSplitViewController. It can be configured with an initial list of areas and an optional data modifier function.

### Parameters
- `areas` (List<Area>?): Initial list of areas. If null, creates an empty list.
- `areaDataModifier` (AreaDataModifier?): Optional function to automatically modify area data.

### Behavior
If the total flex of areas is 0, it changes each area's flex to 1.
```

--------------------------------

### MultiSplitViewTheme Constructor

Source: https://github.com/caduandrade/multi_split_view/blob/master/_autodocs/theme.md

Applies a specific theme configuration to a subtree of MultiSplitView widgets. This widget uses the InheritedWidget pattern to make the theme data accessible to descendant widgets.

```APIDOC
## MultiSplitViewTheme Constructor

### Description
A stateless widget that applies theme data to descendant MultiSplitView widgets using InheritedWidget pattern.

### Parameters
#### Path Parameters
- `data` (MultiSplitViewThemeData) - Required - Theme configuration to apply
- `child` (Widget) - Required - Child widget subtree that inherits the theme
```

--------------------------------

### Defining Areas with Flex and Size

Source: https://github.com/caduandrade/multi_split_view/blob/master/_autodocs/getting-started.md

Illustrates how to define areas within a MultiSplitView using proportional flex sizing and fixed pixel sizes.

```dart
// Proportional layout (flex)
Area(flex: 1)  // Takes 1 part
Area(flex: 2)  // Takes 2 parts (twice as large)

// Fixed layout (size)
Area(size: 200)  // Always 200px

// With constraints
Area(flex: 1, min: 100, max: 500)  // At least 100px, at most 500px
```

--------------------------------

### Data Flow Explanation

Source: https://github.com/caduandrade/multi_split_view/blob/master/_autodocs/REFERENCE.md

Outlines the sequence of data handling and updates within the MultiSplitView package.

```dart
1. Controller holds a list of `Area` objects
2. Layout calculations determine sizes based on constraints and policies
3. MultiSplitView.build() renders areas and dividers
4. User interaction (drag) triggers controller updates
5. Listener pattern notifies widget of changes → rebuild
```

--------------------------------

### Draft Constructor

Source: https://github.com/caduandrade/multi_split_view/blob/master/_autodocs/draft.md

Defines the parameters for creating a Draft widget, including text, background color, border color, and an optional key.

```dart
const Draft({
  required String text,
  required Color color,
  required Color borderColor,
  Key? key,
})
```

--------------------------------

### Get Area by Index

Source: https://github.com/caduandrade/multi_split_view/blob/master/_autodocs/multi-split-view-controller.md

Retrieves a specific Area object from the controller using its index. Throws a RangeError if the provided index is out of bounds.

```dart
Area firstArea = controller.getArea(0);
print('Flex: ${firstArea.flex}');
```

--------------------------------

### Widget Hierarchy Overview

Source: https://github.com/caduandrade/multi_split_view/blob/master/_autodocs/REFERENCE.md

Illustrates the parent-child relationships of widgets within the MultiSplitView structure.

```dart
MultiSplitView (StatefulWidget)
├── MultiSplitViewTheme (Inherited config)
├── LayoutBuilder
└── CustomMultiChildLayout
    ├── Area widgets (built via builder)
    └── DividerWidget instances
        ├── CustomPaint (divider rendering)
        └── GestureDetector (drag handling)
```

--------------------------------

### Example Area Data Modifier Usage

Source: https://github.com/caduandrade/multi_split_view/blob/master/_autodocs/types.md

This snippet shows how to provide an AreaDataModifier to the MultiSplitViewController constructor. It sets the data for each area to a string indicating its panel number.

```dart
MultiSplitViewController(
  areaDataModifier: (area, index) => 'Panel ${index + 1}',
)
```

--------------------------------

### Divider Drag Events

Source: https://github.com/caduandrade/multi_split_view/blob/master/_autodocs/getting-started.md

Handle divider drag events to track user interactions during resizing. Callbacks are provided for start, update, and end of the drag operation.

```dart
MultiSplitView(
  controller: controller,
  onDividerDragStart: (index) {
    print('Started dragging divider $index');
  },
  onDividerDragUpdate: (index) {
    print('Dragging divider $index');
  },
  onDividerDragEnd: (index) {
    print('Finished dragging divider $index');
  },
  builder: (context, area) { /* ... */ },
)
```

--------------------------------

### Define Divider Drag Event Callback

Source: https://github.com/caduandrade/multi_split_view/blob/master/_autodocs/types.md

Use OnDividerDragEvent for callbacks during divider drag operations (start, update, end). It provides the index of the divider being dragged. Accepted by MultiSplitView.onDividerDragStart, MultiSplitView.onDividerDragUpdate, and MultiSplitView.onDividerDragEnd.

```dart
typedef OnDividerDragEvent = void Function(int index);
```

```dart
MultiSplitView(
  onDividerDragStart: (dividerIndex) => print('Drag started: $dividerIndex'),
  onDividerDragUpdate: (dividerIndex) => print('Dragging: $dividerIndex'),
  onDividerDragEnd: (dividerIndex) => print('Drag ended: $dividerIndex'),
)
```

--------------------------------

### MultiSplitViewController Constructor

Source: https://github.com/caduandrade/multi_split_view/blob/master/_autodocs/multi-split-view-controller.md

Initializes a MultiSplitViewController with an optional list of areas and a data modifier function. If no areas are provided, an empty list is created. If the total flex of initial areas is 0, each area's flex is set to 1.

```dart
MultiSplitViewController({
  List<Area>? areas,
  AreaDataModifier? areaDataModifier,
})
```

--------------------------------

### Advanced Customization with Tooltip

Source: https://github.com/caduandrade/multi_split_view/blob/master/_autodocs/divider-widget.md

Shows how to create a custom divider using dividerBuilder, wrapping the default DividerWidget with a Tooltip for user guidance.

```dart
import 'package:flutter/material.dart';
import 'package:multi_split_view/multi_split_view.dart';

class TooltipDividerExample extends StatefulWidget {
  @override
  State<TooltipDividerExample> createState() => _TooltipDividerExampleState();
}

class _TooltipDividerExampleState extends State<TooltipDividerExample> {
  late MultiSplitViewController _controller;

  @override
  void initState() {
    super.initState();
    _controller = MultiSplitViewController(areas: [
      Area(flex: 1, data: 'Left'),
      Area(flex: 1, data: 'Right'),
    ]);
  }

  @override
  Widget build(BuildContext context) {
    return MultiSplitViewTheme(
      data: MultiSplitViewThemeData(
        dividerThickness: 10,
        dividerPainter: DividerPainters.grooved1(),
      ),
      child: MultiSplitView(
        controller: _controller,
        // Custom divider with tooltip
        dividerBuilder: (axis, index, resizable, dragging, highlighted, theme) {
          Widget divider = DividerWidget(
            axis: axis,
            index: index,
            themeData: theme,
            resizable: resizable,
            dragging: dragging,
            highlighted: highlighted,
          );
          return Tooltip(
            message: 'Drag to resize',
            child: divider,
          );
        },
        builder: (context, area) {
          return Container(
            color: Colors.blue[50],
            child: Center(child: Text('Area: ${area.data}')),
          );
        },
      ),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}
```

--------------------------------

### Demo Widget Class

Source: https://github.com/caduandrade/multi_split_view/blob/master/_autodocs/INDEX.md

A widget used for demonstration purposes within the package.

```dart
class Draft extends StatelessWidget { }
```

--------------------------------

### Area Constructor

Source: https://github.com/caduandrade/multi_split_view/blob/master/_autodocs/area.md

Initializes a new Area instance with optional sizing, constraints, ID, data, and a custom widget builder. Defaults to flex=1 if neither size nor flex is provided.

```dart
Area({
  double? size,
  double? flex,
  double? min,
  double? max,
  dynamic id,
  dynamic data,
  AreaWidgetBuilder? builder,
})
```

--------------------------------

### Mixed Flex and Fixed Size Layout

Source: https://github.com/caduandrade/multi_split_view/blob/master/_autodocs/getting-started.md

Demonstrates a MultiSplitView layout combining both fixed pixel sizes and proportional flex sizing for different areas.

```dart
final controller = MultiSplitViewController(areas: [
  Area(size: 200),      // Fixed 200px (e.g., sidebar)
  Area(flex: 1),        // Proportional (main content)
  Area(size: 150),      // Fixed 150px (e.g., details panel)
]);

MultiSplitView(
  controller: controller,
  builder: (context, area) {
    String label;
    if (area.size != null) {
      label = 'Fixed (${area.size!.toInt()}px)';
    } else {
      label = 'Flex (${area.flex})';
    }
    return Container(
      color: Colors.blue[50],
      child: Center(child: Text(label)),
    );
  },
);
```

--------------------------------

### DividerPainter Constructor

Source: https://github.com/caduandrade/multi_split_view/blob/master/_autodocs/divider-painter.md

Initializes a DividerPainter with customizable colors and animation settings.

```APIDOC
## DividerPainter Constructor

### Description
Initializes a DividerPainter with customizable colors and animation settings.

### Parameters
- `backgroundColor` (Color?) - Optional - Background color when divider is not highlighted
- `highlightedBackgroundColor` (Color?) - Optional - Background color when divider is highlighted
- `animationEnabled` (bool) - Optional - Enable animated transitions between states (default: true)
- `animationDuration` (Duration) - Optional - Animation duration for color transitions (default: 250ms)
```

--------------------------------

### Lifecycle of MultiSplitViewController

Source: https://github.com/caduandrade/multi_split_view/blob/master/_autodocs/REFERENCE.md

Describes the typical sequence of events from controller creation to disposal.

```dart
MultiSplitViewController created
    ↓
Areas added/configured
    ↓
MultiSplitView created with controller
    ↓
Layout calculated and rendered
    ↓
User drags divider
    ↓
Area sizes updated
    ↓
notifyListeners() → MultiSplitView rebuilds
    ↓
Dispose controller
```

--------------------------------

### Controller Class

Source: https://github.com/caduandrade/multi_split_view/blob/master/_autodocs/INDEX.md

Manages the state and behavior of a Multi Split View.

```dart
class MultiSplitViewController extends ChangeNotifier { }
```

--------------------------------

### DividerPainters.background

Source: https://github.com/caduandrade/multi_split_view/blob/master/_autodocs/divider-painter.md

Factory method to create a simple solid-color DividerPainter with optional animation.

```APIDOC
## DividerPainters.background

### Description
Creates a simple solid-color divider.

### Parameters
- `animationEnabled` (bool) - Optional - Enable color animation on highlight (default: true)
- `animationDuration` (Duration) - Optional - Animation transition time (default: 250ms)
- `color` (Color?) - Optional - Base color
- `highlightedColor` (Color?) - Optional - Color when highlighted

### Returns
DividerPainter instance

### Example
```dart
DividerPainter painter = DividerPainters.background(
  color: Colors.grey[300],
  highlightedColor: Colors.blue,
);
```
```

--------------------------------

### MultiSplitViewTheme.of

Source: https://github.com/caduandrade/multi_split_view/blob/master/_autodocs/theme.md

Retrieves the theme data from the nearest ancestor MultiSplitViewTheme widget in the widget tree. If no theme is found, it returns the default theme configuration.

```APIDOC
## MultiSplitViewTheme.of

### Description
Retrieves the theme data from the nearest ancestor MultiSplitViewTheme widget.

### Parameters
#### Path Parameters
- `context` (BuildContext) - Required - Build context to search from

### Returns
MultiSplitViewThemeData from the nearest ancestor theme, or the default theme if none is found

### Example
```dart
MultiSplitViewThemeData theme = MultiSplitViewTheme.of(context);
print('Divider thickness: ${theme.dividerThickness}');
```
```

--------------------------------

### Apply Themes

Source: https://github.com/caduandrade/multi_split_view/blob/master/_autodocs/getting-started.md

Apply MultiSplitView themes at the appropriate level, either to the entire application or to specific regions, to customize the appearance.

```dart
// Apply to entire app
MaterialApp(
  home: MultiSplitViewTheme(data: theme, child: home),
)

// Or to specific regions
```

--------------------------------

### MultiSplitView Constructor

Source: https://github.com/caduandrade/multi_split_view/blob/master/_autodocs/multi-split-view.md

The constructor for the MultiSplitView widget allows for detailed configuration of its behavior and appearance, including layout direction, controller, initial areas, builders for areas and dividers, resizability, and various event callbacks.

```APIDOC
## MultiSplitView Constructor

### Description
Initializes a new instance of the `MultiSplitView` widget.

### Parameters
* **key** (Key?) - Optional - A key for the widget.
* **axis** (Axis) - Optional - The layout direction: horizontal or vertical. Defaults to `Axis.horizontal`.
* **controller** (MultiSplitViewController?) - Optional - Controller to manage areas programmatically.
* **initialAreas** (List<Area>?) - Optional - Initial areas to display in the split view.
* **builder** (AreaWidgetBuilder?) - Optional - Function to build widgets for each area.
* **dividerBuilder** (DividerBuilder?) - Optional - Function to customize divider appearance.
* **resizable** (bool) - Optional - Whether dividers can be dragged to resize areas. Defaults to `true`.
* **antiAliasingWorkaround** (bool) - Optional - Enable workaround for Flutter issue #14288 regarding coordinate rounding. Defaults to `false`.
* **pushDividers** (bool) - Optional - Whether a dragged divider can push adjacent dividers. Defaults to `false`.
* **onDividerTap** (DividerTapCallback?) - Optional - Callback when a divider is tapped.
* **onDividerDoubleTap** (DividerTapCallback?) - Optional - Callback when a divider is double-tapped.
* **onDividerDragStart** (OnDividerDragEvent?) - Optional - Callback when divider drag starts.
* **onDividerDragUpdate** (OnDividerDragEvent?) - Optional - Callback when divider is being dragged.
* **onDividerDragEnd** (OnDividerDragEvent?) - Optional - Callback when divider drag ends.
* **sizeOverflowPolicy** (SizeOverflowPolicy) - Optional - Policy for handling overflow of fixed-size areas. Defaults to `SizeOverflowPolicy.shrinkLast`.
* **sizeUnderflowPolicy** (SizeUnderflowPolicy) - Optional - Policy for handling underflow (available space exceeds used space). Defaults to `SizeUnderflowPolicy.stretchLast`.
* **minSizeRecoveryPolicy** (MinSizeRecoveryPolicy) - Optional - Order for recovering minimum sizes when resizing. Defaults to `MinSizeRecoveryPolicy.firstToLast`.
* **fallbackWidth** (double) - Optional - Width to use when parent has unbounded width. Defaults to `500`.
* **fallbackHeight** (double) - Optional - Height to use when parent has unbounded height. Defaults to `500`.
* **areaClipBehavior** (Clip) - Optional - How to clip area content at boundaries. Defaults to `Clip.hardEdge`.
```

--------------------------------

### MultiSplitViewTheme.of Method

Source: https://github.com/caduandrade/multi_split_view/blob/master/_autodocs/theme.md

Retrieves the theme data from the nearest ancestor `MultiSplitViewTheme` widget. Returns the default theme if no ancestor is found.

```dart
static MultiSplitViewThemeData of(BuildContext context)
```