flutter_adminpanel 1.1.0
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),
),
),
],
),
);
}
}