Dashboards

A Flutter package for creating responsive, grid-based dashboards with draggable and resizable chart tiles.

Features

  • Responsive 12-column grid system with configurable breakpoints
  • Drag and drop tiles with grid snapping
  • Resize tiles using edge handles with visual feedback
  • Edit mode toggle - switch between view and edit modes
  • Collision detection with automatic layout adjustment
  • Responsive layouts that adapt to different screen sizes
  • Visual feedback for valid/invalid placements
  • Scrollable canvas for large dashboards
  • Persistence - save and restore dashboard layouts
  • Override parameters - preview different screen sizes and breakpoints

Getting started

Add the package to your pubspec.yaml:

dependencies:
  dashboards_responsive: ^1.0.0

Usage

import 'package:dashboards_responsive/dashboards.dart';

class MyDashboardPage extends StatefulWidget {
  @override
  _MyDashboardPageState createState() => _MyDashboardPageState();
}

class _MyDashboardPageState extends State<MyDashboardPage> {
  bool _editMode = false;
  late final HierarchicalDashboardControllerImpl controller;

  @override
  void initState() {
    super.initState();
    controller = HierarchicalDashboardControllerImpl(
      autoLayoutWidgets: ['chart1', 'chart2'],
      enableAutoLayout: true,
    );
    
    // Add initial widgets
    controller.addWidget('chart1', const WidgetPosition(x: 0, y: 0, w: 4, h: 6), breakpoint: Breakpoint.md);
    controller.addWidget('chart2', const WidgetPosition(x: 4, y: 0, w: 4, h: 6), breakpoint: Breakpoint.md);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My Dashboard'),
        actions: [
          IconButton(
            icon: Icon(_editMode ? Icons.visibility : Icons.edit),
            onPressed: () => setState(() => _editMode = !_editMode),
          ),
        ],
      ),
      body: DashboardCanvas(
        config: const DashboardConfig(),
        controller: controller,
        editMode: _editMode,
        widgetBuilder: (context, widgetId, position) {
          return Card(
            child: Center(child: Text(widgetId)),
          );
        },
      ),
    );
  }
}

Override Parameters

The DashboardCanvas supports override parameters for previewing different responsive states:

DashboardCanvas(
  config: config,
  controller: controller,
  editMode: true,
  // Override parameters for testing responsive behavior
  availableWidthOverride: 800.0,        // Simulate 800px width
  breakpointOverride: 'md',              // Force 'md' breakpoint
  effectiveColumnsOverride: 8,           // Force 8 columns
  itemBuilder: (context, item) => MyChart(item),
)

Additional information

  • View Mode: Clean presentation with no grid lines or interactions
  • Edit Mode: Full editing capabilities with grid lines and drag/resize handles
  • Responsive: Automatically adapts to different screen sizes
  • Customizable: Configure columns, row height, gutters, and breakpoints
  • Override Support: Preview different screen sizes and breakpoints for testing

For more examples, see the /example folder.

Libraries

dashboards_responsive