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 #

• Supabase - Full support with real-time capabilities
• REST API - Generic REST API adapter
• MySQL - Direct MySQL database connection (optional)
• Magento - Through flutter_magento plugin (optional)
• PostgreSQL - Direct PostgreSQL connection (optional, requires additional setup)
• ClickHouse - Analytics database support (optional, requires additional setup)

Installation #

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

dependencies:
  flutter_adminpanel: ^1.0.0
  
  # For Supabase support (included by default)
  supabase_flutter: ^2.5.0
  
  # Optional data providers:
  # flutter_magento: ^2.3.4  # For Magento support
  # mysql1: ^0.20.0          # For MySQL support

Quick Start #

1. Initialize Data Provider #

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 #

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.