Mini Dashboard Widgets

A Flutter package that provides beautiful, highly customizable dashboard widgets including stat cards and charts. Perfect for creating modern, responsive dashboards in your Flutter applications.

Dashboard Preview

📋 Table of Contents

Features
Installation
Usage
Customization
Example
Contributing
License

✨ Features

StatCard: Sleek, customizable metric cards with icons, titles, and values
PieSummary: Interactive pie charts with customizable legends and animations
ActivityBar: Horizontal and vertical bar charts for visualizing trends and metrics
Theming System: Comprehensive theming support with light/dark mode adaptability
Responsive: All widgets are designed to work across different screen sizes
Highly Customizable: Extensive customization options for each widget
Material Design 3: Follows latest Material Design guidelines

📥 Installation

Add this to your pubspec.yaml:

dependencies:
  mini_dashboard_widgets: ^0.1.0

Then run:

flutter pub get

🚀 Usage

Import the package:

import 'package:mini_dashboard_widgets/mini_dashboard_widgets.dart';

StatCard

StatCard is a modern, customizable card widget for displaying key metrics with an icon, title, and value.

StatCard(
  title: 'Total Sales',
  value: '$15,349',
  icon: Icons.attach_money,
  iconColor: Colors.green,
  // Optional customizations
  backgroundColor: Colors.white,
  borderRadius: 12.0,
  elevation: 2.0,
  onTap: () => print('Card tapped!'),
  // Advanced customizations
  titleStyle: TextStyle(fontWeight: FontWeight.w500),
  valueStyle: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
  trailing: Badge(label: Text('New')),
)

PieSummary

PieSummary is an interactive pie chart widget with customizable sections and legends.

final List<PieData> pieData = [
  PieData(label: 'Category 1', value: 35, color: Colors.blue),
  PieData(label: 'Category 2', value: 25, color: Colors.green),
  PieData(label: 'Category 3', value: 20, color: Colors.orange),
  PieData(label: 'Category 4', value: 15, color: Colors.purple),
];

PieSummary(
  data: pieData,
  radius: 120,
  sectionStrokeWidth: 25,
  legendPosition: LegendPosition.right,
  // Optional center widget
  centerWidget: Text('Total: 95'),
  // Advanced customizations
  animationDuration: Duration(milliseconds: 800),
  legendTextStyle: TextStyle(fontSize: 12),
  showPercentages: true,
  onSectionTap: (index) => print('Tapped section $index'),
)

ActivityBar

ActivityBar is a flexible bar chart widget for visualizing data trends.

final List<BarData> barData = [
  BarData(label: 'Mon', value: 30),
  BarData(label: 'Tue', value: 45),
  BarData(label: 'Wed', value: 25),
  BarData(label: 'Thu', value: 60),
  BarData(label: 'Fri', value: 40),
];

ActivityBar(
  data: barData,
  orientation: BarOrientation.vertical, // or .horizontal
  barWidth: 16.0,
  barRadius: 6.0,
  showGridLines: true,
  // Advanced customizations
  barColor: Colors.blue,
  barGradient: LinearGradient(
    colors: [Colors.blue.shade300, Colors.blue.shade700],
    begin: Alignment.topCenter,
    end: Alignment.bottomCenter,
  ),
  animationDuration: Duration(milliseconds: 600),
  showLabels: true,
  showValues: true,
  onBarTap: (index) => print('Tapped bar $index'),
)

Theming

The package includes a theming system that automatically adapts to light and dark modes:

// Apply custom theme to all widgets
MiniDashboardThemeData themeData = MiniDashboardThemeData(
  primaryColor: Colors.indigo,
  secondaryColor: Colors.amber,
  cardBackgroundLight: Colors.white,
  cardBackgroundDark: Color(0xFF2D2D2D),
  titleStyleLight: TextStyle(fontSize: 14, fontWeight: FontWeight.w500),
  titleStyleDark: TextStyle(fontSize: 14, fontWeight: FontWeight.w500, color: Colors.white70),
  valueStyleLight: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
  valueStyleDark: TextStyle(fontSize: 20, fontWeight: FontWeight.bold, color: Colors.white),
);

// Apply theme to your app
MiniDashboardTheme(
  data: themeData,
  child: MyApp(),
)

🎨 Customization

All widgets support extensive customization including:

Colors and styles: Customize colors, text styles, and visual appearance
Layout and sizing: Control padding, margins, and dimensions
Effects: Apply shadows, gradients, and animations
Interactions: Define tap behaviors and feedback
Custom builders: Use builder functions for advanced customization
Responsive design: Adapt to different screen sizes and orientations

📱 Example

A complete example app is included in the /example directory. It demonstrates all widgets in a cohesive dashboard with navigation between different screens.

To run the example:

cd example
flutter run

🤝 Contributing

Contributions are welcome! If you find a bug or want a feature, please open an issue.

Fork the repository
Create your feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add some amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

Made with ❤️ by Hamza