Flutter Admin Panel

A comprehensive Flutter admin panel library inspired by react-admin, providing a complete solution for building admin interfaces with multiple data source support.

Features

• 🎨 Modern UI - Clean, Material Design 3 interface
• 📊 Multiple Data Sources - Support for Supabase, MySQL, REST APIs, and more
• 🔧 Declarative API - Similar to react-admin, easy to configure
• 🌍 Multilingual - Built-in support for multiple languages
• 📱 Responsive - Works on all screen sizes
• 🔒 Type Safe - Written in Dart with strong typing
• ⚡ High Performance - Optimized for large datasets
• 🧩 Extensible - Easy to customize and extend

Supported Data Sources

Priority Data Providers

• 🥇 Magento - Full e-commerce integration with offline mode & RADA preload (Priority #1)
• 🥈 ClickHouse - High-performance analytics database (Priority #2)
• Supabase - Full support with real-time capabilities
• REST API - Generic REST API adapter

Coming Soon

• MySQL - Direct MySQL database connection
• PostgreSQL - Direct PostgreSQL connection
• MongoDB - NoSQL database support

🆕 New: Hybrid Provider

Combines Magento (e-commerce) + ClickHouse (analytics) automatically:

• Offline-first architecture with RADA file preloading
• Automatic request routing based on resource type
• Intelligent caching and synchronization
• Operation queue for offline actions

Installation

Add this to your package's pubspec.yaml file:

dependencies:
  flutter_adminpanel: ^1.2.0
  
  # Core data providers (included):
  flutter_magento: ^3.3.2  # Magento e-commerce
  flutter_magento_marketplace: ^1.0.0  # Marketplace + ClickHouse analytics
  supabase_flutter: ^2.5.0  # Supabase backend

Then run:

flutter pub get

🆕 What's New in v1.2.0

• flutter_magento_marketplace - Multi-seller marketplace with built-in ClickHouse analytics
• Event management with automatic status updates
• Enhanced analytics dashboards
• Seller performance tracking
• Commission calculation system

📚 Read Migration Guide →

Quick Start

Option 1: Magento + ClickHouse (Recommended for E-commerce)

import 'package:flutter_adminpanel/flutter_adminpanel.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  // Initialize hybrid provider (Magento + ClickHouse)
  final dataProvider = HybridDataProvider(
    // Magento (Priority #1)
    magentoBaseUrl: 'https://your-store.com',
    magentoAdminToken: 'YOUR_ADMIN_TOKEN',
    enableOfflineMode: true,  // Offline support with caching
    
    // ClickHouse (Priority #2, for analytics)
    clickhouseHost: 'analytics.your-store.com',
    clickhouseDatabase: 'analytics',
    clickhouseUser: 'admin',
    clickhousePassword: 'password',
  );

  await dataProvider.initialize();
  
  // Preload critical data for offline use
  await dataProvider.preloadFromRadaFile('products');
  await dataProvider.preloadFromRadaFile('categories');

  runApp(MyAdminApp(dataProvider: dataProvider));
}

📚 Full Magento Integration Guide →
🚀 Quick Start Guide →

Option 2: Supabase

import 'package:flutter_adminpanel/flutter_adminpanel.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  // Initialize Supabase data provider
  final dataProvider = await SupabaseDataProvider.initialize(
    url: 'YOUR_SUPABASE_URL',
    anonKey: 'YOUR_SUPABASE_ANON_KEY',
  );

  runApp(MyAdminApp(dataProvider: dataProvider));
}

2. Configure Admin Panel

class MyAdminApp extends StatelessWidget {
  final DataProvider dataProvider;

  const MyAdminApp({super.key, required this.dataProvider});

  @override
  Widget build(BuildContext context) {
    final config = AdminConfig(
      appName: 'My Admin',
      supportedLanguages: ['en', 'ru'],
      defaultLanguage: 'en',
    );

    final resources = [
      Resource(
        name: 'users',
        label: 'Users',
        icon: Icons.people,
        columns: [
          const ColumnConfig(
            key: 'id',
            label: 'ID',
            type: ColumnType.text,
            visible: false,
          ),
          const ColumnConfig(
            key: 'name',
            label: 'Name',
            type: ColumnType.text,
            required: true,
          ),
          const ColumnConfig(
            key: 'email',
            label: 'Email',
            type: ColumnType.email,
            required: true,
          ),
        ],
      ),
    ];

    return AdminApp(
      config: config,
      dataProvider: dataProvider,
      resources: resources,
      title: 'My Admin Panel',
    );
  }
}

Core Concepts

Resource

A Resource represents a data entity (like a database table) in your admin panel:

Resource(
  name: 'products',           // Table/resource name
  label: 'Products',          // Display name
  icon: Icons.shopping_cart,  // Icon
  columns: [...],             // Column configuration
  canCreate: true,            // Allow creating records
  canEdit: true,              // Allow editing records
  canDelete: true,            // Allow deleting records
)

Column Configuration

Configure how columns are displayed and edited:

ColumnConfig(
  key: 'price',
  label: 'Price',
  type: ColumnType.number,
  sortable: true,
  visible: true,
  required: true,
)

Data Providers

Data providers handle all CRUD operations:

// Fetch list
final result = await dataProvider.getList(
  'users',
  pagination: PaginationConfig(page: 1, pageSize: 10),
  filters: [
    FilterConfig(
      field: 'status',
      operator: FilterOperator.equals,
      value: 'active',
    ),
  ],
  sort: SortConfig(field: 'created_at', ascending: false),
);

// Get single record
final user = await dataProvider.getOne('users', '123');

// Create record
final newUser = await dataProvider.create('users', {
  'name': 'John Doe',
  'email': 'john@example.com',
});

// Update record
await dataProvider.update('users', '123', {
  'name': 'Jane Doe',
});

// Delete record
await dataProvider.delete('users', '123');

Example Application

See the example directory for a complete Holy Admin application with:

• Dashboard
• Multiple resources (Countries, Cities, Spots, Routes, Events, Users)
• Filtering and sorting
• Multi-language support
• Custom forms

Running Tests

# Run unit tests
flutter test

# Run integration tests
cd example
flutter test integration_test/

Architecture

The library follows a clean architecture pattern:

• Core - Main application logic and interfaces
• Data Providers - Implementations for different data sources
• Models - Data models and configurations
• Widgets - Reusable UI components
• Utils - Helper functions

Comparison with react-admin

Feature	react-admin	flutter_adminpanel
Framework	React	Flutter
Language	JavaScript/TypeScript	Dart
Data Providers	Multiple (REST, GraphQL)	Multiple (Supabase, REST, MySQL)
UI Components	Material-UI	Material Design 3
Platform	Web	All platforms (Mobile, Web, Desktop)
Type Safety	TypeScript	Dart (built-in)

Contributing

Contributions are welcome! Please read our contributing guide first.

License

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

Credits

Inspired by react-admin by Marmelab.