drag_split_panels 1.0.1

A resizable, drag-to-divide split view widget for Flutter.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:drag_split_panels/drag_split_panels.dart';

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

class MultiSplitViewExampleApp extends StatelessWidget {
  const MultiSplitViewExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'drag_split_panels example',
      home: MultiSplitViewExamplePage(),
    );
  }
}

class MultiSplitViewExamplePage extends StatelessWidget {
  const MultiSplitViewExamplePage({super.key});

  static Widget _panelContent(String label, Color color) {
    return Container(
      color: color,
      alignment: Alignment.center,
      child: Text(
        label,
        style: const TextStyle(color: Colors.white, fontSize: 18),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('drag_split_panels example')),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          const Padding(
            padding: EdgeInsets.all(16),
            child: BasicResizableExample(),
          ),
          Expanded(
            child: MultiSplitView(
              axis: Axis.horizontal,
              showHandle: true,
              children: [
                MultiSplitViewPanel(
                  id: 'sidebar',
                  defaultSize: 0.25,
                  minSize: 0.1,
                  maxSize: 0.5,
                  child: _panelContent('Sidebar', Colors.indigo),
                ),
                MultiSplitViewPanel(
                  id: 'main',
                  defaultSize: 0.75,
                  minSize: 0.3,
                  child: MultiSplitView(
                    axis: Axis.vertical,
                    showHandle: true,
                    children: [
                      MultiSplitViewPanel(
                        id: 'top',
                        defaultSize: 0.6,
                        minSize: 0.2,
                        child: _panelContent('Top', Colors.teal),
                      ),
                      MultiSplitViewPanel(
                        id: 'bottom',
                        defaultSize: 0.4,
                        minSize: 0.2,
                        child: _panelContent('Bottom', Colors.orange),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

/// A compact, bordered split view (nested horizontal + vertical), matching
/// the classic "resizable panel group" demo layout at a fixed height.
class BasicResizableExample extends StatelessWidget {
  const BasicResizableExample({super.key});

  @override
  Widget build(BuildContext context) {
    final radius = BorderRadius.circular(8);
    return ConstrainedBox(
      constraints: const BoxConstraints(maxHeight: 200),
      child: DecoratedBox(
        decoration: BoxDecoration(
          borderRadius: radius,
          border: Border.all(color: Colors.grey.shade400),
        ),
        child: ClipRRect(
          borderRadius: radius,
          child: MultiSplitView(
            children: [
              MultiSplitViewPanel(
                id: 0,
                defaultSize: .5,
                minSize: .2,
                maxSize: .8,
                child: Center(
                  child: Text(
                    'One',
                    style: Theme.of(context).textTheme.titleLarge,
                  ),
                ),
              ),
              MultiSplitViewPanel(
                id: 1,
                defaultSize: .5,
                child: MultiSplitView(
                  axis: Axis.vertical,
                  children: [
                    MultiSplitViewPanel(
                      id: 0,
                      defaultSize: .3,
                      child: Center(
                        child: Text(
                          'Two',
                          style: Theme.of(context).textTheme.titleLarge,
                        ),
                      ),
                    ),
                    MultiSplitViewPanel(
                      id: 1,
                      defaultSize: .7,
                      child: Align(
                        child: Text(
                          'Three',
                          style: Theme.of(context).textTheme.titleLarge,
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}