flutter_web_split_view 1.0.1

Production-ready split-pane layouts for Flutter Web & Desktop. Draggable dividers, collapsible panes, min/max constraints, and full programmatic control.

example/lib/main.dart

import 'package:flutter/material.dart';

import 'demo/basic_example.dart';
import 'demo/vertical_example.dart';
import 'demo/controller_example.dart';
import 'demo/custom_divider_example.dart';
import 'demo/collapsible_example.dart';
import 'demo/dashboard_example.dart';

void main() {
  runApp(const ExampleApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'SplitView Examples',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
        useMaterial3: true,
      ),
      home: const HomePage(),
    );
  }
}

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _selectedIndex = 0;

  final List<ExamplePage> _pages = [
    ExamplePage(
      title: 'Basic Horizontal Split',
      description: 'A simple horizontal split view with a sidebar and content area.',
      widget: const BasicExample(),
    ),
    ExamplePage(
      title: 'Vertical Split',
      description: 'A vertical split view with top and bottom panes.',
      widget: const VerticalExample(),
    ),
    ExamplePage(
      title: 'Controller Usage',
      description: 'Split view controlled externally with buttons.',
      widget: const ControllerExample(),
    ),
    ExamplePage(
      title: 'Custom Divider',
      description: 'Split view with a custom-styled divider.',
      widget: const CustomDividerExample(),
    ),
    ExamplePage(
      title: 'Collapsible Panes',
      description: 'Split view with collapsible panes.',
      widget: const CollapsibleExample(),
    ),
    ExamplePage(
      title: 'Dashboard Layout',
      description: 'A realistic dashboard layout using nested split views.',
      widget: const DashboardExample(),
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        children: [
          NavigationRail(
            selectedIndex: _selectedIndex,
            onDestinationSelected: (index) {
              setState(() {
                _selectedIndex = index;
              });
            },
            labelType: NavigationRailLabelType.all,
            destinations: const [
              NavigationRailDestination(
                icon: Icon(Icons.view_sidebar_outlined),
                label: Text('Basic'),
              ),
              NavigationRailDestination(
                icon: Icon(Icons.horizontal_split),
                label: Text('Vertical'),
              ),
              NavigationRailDestination(
                icon: Icon(Icons.settings_remote_outlined),
                label: Text('Controller'),
              ),
              NavigationRailDestination(
                icon: Icon(Icons.palette_outlined),
                label: Text('Divider'),
              ),
              NavigationRailDestination(
                icon: Icon(Icons.unfold_less),
                label: Text('Collapse'),
              ),
              NavigationRailDestination(
                icon: Icon(Icons.dashboard_outlined),
                label: Text('Dashboard'),
              ),
            ],
          ),
          const VerticalDivider(thickness: 1, width: 1),
          Expanded(
            child: _pages[_selectedIndex].widget,
          ),
        ],
      ),
    );
  }
}

class ExamplePage {
  final String title;
  final String description;
  final Widget widget;

  const ExamplePage({
    required this.title,
    required this.description,
    required this.widget,
  });
}