flutter_adminpanel 1.1.0 copy "flutter_adminpanel: ^1.1.0" to clipboard
flutter_adminpanel: ^1.1.0 copied to clipboard

A comprehensive Flutter admin panel library similar to react-admin with support for multiple data sources (Magento, Supabase, MySQL, PostgreSQL, ClickHouse)

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter_adminpanel/flutter_adminpanel.dart';

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

  // Initialize Supabase data provider
  final dataProvider = await SupabaseDataProvider.initialize(
    url: 'https://rxvckkqqunyqtxjyabub.supabase.co',
    anonKey:
        'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InJ4dmNra3FxdW55cXR4anlhYnViIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MjE4NzU1MzAsImV4cCI6MjAzNzQ1MTUzMH0.9DiNza2x0UEuGTAgtOz0StXW962pDF6S8b27_Igz6v4',
  );

  runApp(HolyAdminApp(dataProvider: dataProvider));
}

class HolyAdminApp extends StatelessWidget {
  final DataProvider dataProvider;

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

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

    // Define resources
    final resources = _createResources();

    // Create admin app with holy-admin theme
    return AdminApp(
      config: config,
      dataProvider: dataProvider,
      resources: resources,
      title: 'Holy Admin - Flutter',
      dashboard: const HolyDashboard(),
    );
  }

  List<Resource> _createResources() {
    return [
      // Countries
      Resource(
        name: 'countries',
        label: 'Countries',
        icon: Icons.public,
        columns: [
          const ColumnConfig(
            key: 'id',
            label: 'ID',
            type: ColumnType.text,
            visible: false,
          ),
          const ColumnConfig(
            key: 'name',
            label: 'Name',
            type: ColumnType.json,
            required: true,
          ),
          const ColumnConfig(
            key: 'info',
            label: 'Information',
            type: ColumnType.json,
          ),
          const ColumnConfig(
            key: 'cities_count',
            label: 'Cities Count',
            type: ColumnType.number,
          ),
          const ColumnConfig(
            key: 'images',
            label: 'Images',
            type: ColumnType.image,
          ),
        ],
      ),

      // Cities
      Resource(
        name: 'cities',
        label: 'Cities',
        icon: Icons.location_city,
        columns: [
          const ColumnConfig(
            key: 'id',
            label: 'ID',
            visible: false,
          ),
          const ColumnConfig(
            key: 'name',
            label: 'Name',
            type: ColumnType.json,
            required: true,
          ),
          const ColumnConfig(
            key: 'country',
            label: 'Country',
            type: ColumnType.reference,
            referenceResource: 'countries',
          ),
          const ColumnConfig(
            key: 'spots_count',
            label: 'Spots',
            type: ColumnType.number,
          ),
          const ColumnConfig(
            key: 'routes_count',
            label: 'Routes',
            type: ColumnType.number,
          ),
          const ColumnConfig(
            key: 'events_count',
            label: 'Events',
            type: ColumnType.number,
          ),
        ],
      ),

      // Spots
      Resource(
        name: 'spots',
        label: 'Spots',
        icon: Icons.place,
        columns: [
          const ColumnConfig(key: 'id', label: 'ID', visible: false),
          const ColumnConfig(
            key: 'name',
            label: 'Name',
            type: ColumnType.json,
            required: true,
          ),
          const ColumnConfig(
            key: 'city',
            label: 'City',
            type: ColumnType.reference,
          ),
          const ColumnConfig(key: 'type', label: 'Type'),
          const ColumnConfig(
            key: 'images',
            label: 'Images',
            type: ColumnType.image,
          ),
        ],
      ),

      // Routes
      Resource(
        name: 'routes',
        label: 'Routes',
        icon: Icons.route,
        columns: [
          const ColumnConfig(key: 'id', label: 'ID', visible: false),
          const ColumnConfig(
            key: 'name',
            label: 'Name',
            type: ColumnType.json,
            required: true,
          ),
          const ColumnConfig(
            key: 'images',
            label: 'Images',
            type: ColumnType.image,
          ),
        ],
      ),

      // Events
      Resource(
        name: 'events',
        label: 'Events',
        icon: Icons.event,
        columns: [
          const ColumnConfig(key: 'id', label: 'ID', visible: false),
          const ColumnConfig(
            key: 'name',
            label: 'Name',
            type: ColumnType.json,
            required: true,
          ),
          const ColumnConfig(key: 'type', label: 'Type', required: true),
          const ColumnConfig(
            key: 'time',
            label: 'Date & Time',
            type: ColumnType.date,
            required: true,
          ),
          const ColumnConfig(key: 'status', label: 'Status'),
          const ColumnConfig(
            key: 'capacity',
            label: 'Capacity',
            type: ColumnType.number,
          ),
          const ColumnConfig(key: 'price', label: 'Price'),
        ],
      ),

      // Users
      Resource(
        name: 'users',
        label: 'Users',
        icon: Icons.people,
        columns: [
          const ColumnConfig(key: 'id', label: 'ID', visible: false),
          const ColumnConfig(key: 'name', label: 'Name', required: true),
          const ColumnConfig(
            key: 'email',
            label: 'Email',
            type: ColumnType.email,
            required: true,
          ),
          const ColumnConfig(key: 'phone', label: 'Phone'),
          const ColumnConfig(key: 'role', label: 'Role'),
          const ColumnConfig(
            key: 'points',
            label: 'Points',
            type: ColumnType.number,
          ),
        ],
      ),
    ];
  }
}

/// Simple dashboard widget
class HolyDashboard extends StatelessWidget {
  const HolyDashboard({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Icon(
            Icons.dashboard,
            size: 100,
            color: const Color(0xFFA855F7), // holy-admin primary purple
          ),
          const SizedBox(height: 24),
          const Text(
            'Welcome to Holy Admin',
            style: TextStyle(
              fontSize: 32,
              fontWeight: FontWeight.bold,
              color: Color(0xFFFAFAFA),
            ),
          ),
          const SizedBox(height: 16),
          const Text(
            'Select a resource from the sidebar to get started',
            style: TextStyle(
              fontSize: 16,
              color: Color(0xFF94A3B8),
            ),
          ),
        ],
      ),
    );
  }
}