SolidUI

This package provides a UI library for building Solid applications with Flutter.

Overview

SolidUI provides a collection of Flutter widgets and utilities tailored for Solid applications, offering responsive navigation components, security key management, and status bar widgets that integrate seamlessly with Solid POD infrastructure.

Features

SolidScaffold - Simplified unified scaffold component with automatic responsive layout switching and full backward compatibility with standard Scaffold
SolidNavBar - Navigation rail for wide screens
SolidNavDrawer - Navigation drawer for narrow screens

🔐 Security Management

SolidSecurityKeyStatus - Simple configuration with intelligent defaults
SolidSecurityKeyManager - Advanced component for custom implementations
SolidSecurityKeyService - Service layer for security key operations
SolidSecurityKeyCentralManager - Centralised security key coordination

📱 Version Management

SolidVersionConfig - Version configuration with smart defaults

📊 Status Components

SolidStatusBar - Responsive status bar with server information, login status, and custom items
SolidStatusBarModels - Data models for status bar configuration

🎨 Theme & Styling

SolidThemeToggleConfig - Configurable theme switching with light/dark mode support
Integrated theme toggle in SolidScaffold with responsive behavior

ℹ️ About Dialogue

SolidAboutConfig - Configurable About dialogue with application information
SolidAboutButton - About button component with customisable content
Integrated About button in SolidScaffold with automatic application info detection

📁 File Management

SolidFile - Comprehensive file management widget with automatic configuration based on path
SolidFileBrowser - File browser with upload, download, and delete operations
SolidFileUploadArea - Drag & drop file upload with data format support
FileTypeConfig - Automatic file type configuration for different data types
Automatic detection of file types (blood pressure, vaccination, medication, diary, profile)
Built-in CSV import/export functionality for health data

🛠️ Utilities & Constants

NavigationConstants - Predefined constants for consistent navigation, status bar heights, and UI component sizing

Quick Start

Installation

Add SolidUI to your pubspec.yaml:

dependencies:
  solidui:
    git:
      url: https://github.com/anusii/solidui.git
      ref: main

Basic Usage

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SolidScaffold(
        menu: [
          SolidMenuItem(
            title: 'Home',
            icon: Icons.home,
            child: HomeScreen(),
            tooltip: 'Navigate to home screen',
          ),
          SolidMenuItem(
            title: 'Settings',
            icon: Icons.settings,
            child: SettingsScreen(),
            tooltip: 'Configure application settings',
          ),
        ],
        appBar: SolidAppBarConfig(
          title: 'My Solid App',
          actions: [
            SolidAppBarAction(
              icon: Icons.refresh,
              onPressed: () => print('Refresh'),
              tooltip: 'Refresh data',
            ),
          ],
        ),
        statusBar: SolidStatusBarConfig(
          serverInfo: SolidServerInfo(
            serverUri: 'https://your-pod-server.com',
          ),
          securityKeyStatus: SolidSecurityKeyStatus(),
        ),
        versionConfig: SolidVersionConfig(),
        themeToggle: const SolidThemeToggleConfig(
          enabled: true,
        ),
        aboutConfig: SolidAboutConfig(
          applicationName: 'My Solid App',
          applicationIcon: Icon(Icons.apps, size: 64),
          applicationLegalese: '''© 2025 My Company''',
          text: '''

A sample Solid application built with SolidUI.

**Features:**

• Responsive navigation

• Theme switching

• Solid POD integration

For more information, visit our [website](https://example.com).

''',
        ),
        child: Center(
          child: Text('Welcome to your Solid application'),
        ),
      ),
    );
  }
}

The child parameter in SolidMenuItem allows you to directly specify the widget to display when that menu item is selected. This simplifies development by keeping menu configuration and content together:

SolidScaffold(
  menu: [
    SolidMenuItem(
      title: 'Home',
      icon: Icons.home,
      child: HomeScreen(), // Direct widget reference
      tooltip: 'Navigate to home screen',
    ),
    SolidMenuItem(
      title: 'Profile',
      icon: Icons.person,
      child: ProfileScreen(userId: currentUserId), // Parameterised widgets
      tooltip: 'View your profile',
    ),
    SolidMenuItem(
      title: 'Settings',
      icon: Icons.settings,
      child: SettingsScreen(
        onSave: () => print('Settings saved'),
        theme: currentTheme,
      ), // Complex widget configuration
      tooltip: 'Configure application settings',
    ),
  ],
  // No need to manually manage selectedIndex or onMenuSelected
  // The scaffold automatically handles navigation
)

Benefits of the child parameter:

Simplified Configuration: Each menu item contains its own content widget
Better Organisation: Menu structure and content are defined together
Reduced Boilerplate: No need to manually manage selectedIndex or content arrays
Type Safety: Direct widget references prevent runtime errors
Parameter Passing: Easy to pass specific parameters to each screen

Migration from Legacy Approach:

class MyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SolidScaffold(
      menu: [
        SolidMenuItem(
          title: 'Home',
          icon: Icons.home,
          child: HomeScreen(), // Content defined here
        ),
        SolidMenuItem(
          title: 'Profile',
          icon: Icons.person,
          child: ProfileScreen(), // Content defined here
        ),
        SolidMenuItem(
          title: 'Settings',
          icon: Icons.settings,
          child: SettingsScreen(), // Content defined here
        ),
      ],
      // Navigation handled automatically
    );
  }
}

Scaffold Compatibility Mode

SolidScaffold can be used as a drop-in replacement for Flutter's standard Scaffold. When no menu parameter is provided, SolidScaffold behaves exactly like a standard Scaffold:

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

class StandardScaffoldReplacement extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SolidScaffold(
      // Standard Scaffold parameters work exactly the same
      scaffoldAppBar: AppBar(
        title: Text('Compatibility Mode'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(Icons.check_circle, color: Colors.green, size: 64),
            SizedBox(height: 16),
            Text('SolidScaffold in Compatibility Mode'),
            Text('Works exactly like standard Scaffold!'),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => print('FAB pressed'),
        child: Icon(Icons.add),
      ),
      // All standard Scaffold parameters are supported:
      // drawer, endDrawer, bottomNavigationBar, bottomSheet,
      // persistentFooterButtons, resizeToAvoidBottomInset, etc.
    );
  }
}

Migration from Scaffold to SolidScaffold:

// Before (standard Scaffold)
return Scaffold(
  appBar: AppBar(title: Text('My App')),
  body: MyContent(),
  floatingActionButton: FloatingActionButton(...),
);

// After (SolidScaffold - identical behavior)
return SolidScaffold(
  scaffoldAppBar: AppBar(title: Text('My App')),
  body: MyContent(),
  floatingActionButton: FloatingActionButton(...),
);

Components Reference

SolidScaffold

The main navigation component that automatically switches between navigation rail and drawer based on screen width.

Key Features:

Responsive design (rail on wide screens, drawer on narrow screens)
Integrated AppBar support with theme toggle
Status bar integration
User information display
Logout functionality
Built-in light/dark theme switching

Parameters:

SolidUI-specific parameters:

menu - List of menu items (optional, when null enables compatibility mode)
child - Main content area for SolidUI layout (optional)
appBar - SolidUI AppBar configuration (optional)
statusBar - Optional status bar configuration
userInfo - Optional user information
onLogout - Optional logout callback
themeToggle - Optional theme toggle configuration
aboutConfig - Optional About dialogue configuration
narrowScreenThreshold - Width threshold for layout switching (default: NavigationConstants.narrowScreenThreshold)

Standard Scaffold compatibility parameters:

body - Standard Scaffold body content (used when child is null)
scaffoldAppBar - Standard Scaffold AppBar (used when appBar is null)
drawer - Standard Scaffold drawer
endDrawer - Standard Scaffold endDrawer
bottomNavigationBar - Standard Scaffold bottomNavigationBar
bottomSheet - Standard Scaffold bottomSheet
persistentFooterButtons - Standard Scaffold persistentFooterButtons
resizeToAvoidBottomInset - Standard Scaffold resizeToAvoidBottomInset
backgroundColor - Background color (works in both modes)
floatingActionButton - Floating action button (works in both modes)

SolidAppBarConfig

Configuration for the application bar with responsive action buttons.

Features:

Action buttons with responsive visibility
Overflow menu for narrow screens
Theme toggle integration
Customisable tooltips

SolidStatusBarConfig

Configuration for the bottom status bar showing server and user information.

Features:

Server information display
Login status indication
Security key status
Custom status items
Responsive layout (narrow/medium/wide)

Security Key Management

Automatic security key management integrated directly into SolidScaffold. No need for separate components or custom dialogues.

Simple Usage of Security Key Management

SolidScaffold(
  // ... other configuration.

  statusBar: SolidStatusBarConfig(
    securityKeyStatus: SolidSecurityKeyStatus(
      isKeySaved: _isKeySaved,

      // SolidScaffold automatically handles the security key dialogue.

      tooltip: 'Manage security keys',
    ),
  ),
)

Advanced Usage with Custom Configuration

SolidScaffold(
  // ... other configuration.

  statusBar: SolidStatusBarConfig(
    securityKeyStatus: SolidSecurityKeyStatus(
      isKeySaved: _isKeySaved,
      customTitle: 'My App Security Keys',
      appWidget: MyAppWidget(), // Optional: custom app widget for the dialogue
      onKeyStatusChanged: (bool hasKey) {
        // Optional: handle key status changes.

        print('Security key status: ${hasKey ? "saved" : "not saved"}');
      },
      tooltip: 'Manage your security keys for data encryption',
    ),
  ),
)

Manual Management (Advanced)

For custom implementations, you can still use the components directly:

SolidSecurityKeyManager(
  config: SolidSecurityKeyManagerConfig(
    customTitle: 'Security Keys',
    appWidget: MyAppWidget(),
  ),
  onKeyStatusChanged: (hasKey) {
    // Handle key status changes.
  },
)

File Management

SolidFile provides comprehensive file management with automatic configuration based on the file path. It handles file upload, download, browsing, and data format operations.

Simple Usage of File Management

SolidFile(
  basePath: 'myapp/data',
  currentPath: 'myapp/data/health',
  onFileSelected: (fileName, filePath) {
    print('Selected: $fileName');
  },
  onFileDownload: (fileName, filePath) {
    print('Download: $fileName');
  },
)

Automatic Configuration

SolidFile automatically detects file types and configures appropriate buttons:

SolidFile(
  basePath: 'healthapp/data',
  currentPath: 'healthapp/data/bp',        // Blood pressure data
  // Automatically shows CSV import/export buttons
  // Automatically sets friendlyFolderName to "Blood Pressure Data"
  // Automatically configures data format for blood pressure
)

SolidFile(
  basePath: 'healthapp/data',
  currentPath: 'healthapp/data/profile',   // Profile data
  // Automatically shows Profile import/export buttons
  // Automatically sets friendlyFolderName to "Profile Data"
  // Automatically configures data format for profile
)

With Upload Callbacks

SolidFile(
  basePath: 'myapp/data',
  currentPath: 'myapp/data/documents',
  uploadCallbacks: SolidFileUploadCallbacks(
    onUpload: () {
      // Handle file upload
    },
    onImportCsv: () {
      // Handle CSV import
    },
    onExportCsv: () {
      // Handle CSV export
    },
  ),
)

Manual Configuration (Advanced)

For custom upload configurations, disable auto-config:

SolidFile(
  basePath: 'myapp/data',
  currentPath: 'myapp/data/custom',
  autoConfig: false,  // Disable automatic configuration
  uploadConfig: SolidFileUploadConfig(
    showCsvButtons: true,
    showJsonButtons: false,
    formatConfig: myCustomFormat,
  ),
  friendlyFolderName: 'Custom Data Folder',
)

Responsive Design

SolidUI components automatically adapt to different screen sizes:

Wide screens (>800px): Navigation rail with full status bar
Medium screens (400-800px): Drawer navigation with compact status bar
Narrow screens (<400px): Drawer navigation with minimal status bar

Theming

SolidUI components integrate with Flutter's theme system and support light, dark, and system themes with intelligent icon switching:

MaterialApp(
  theme: ThemeData.light(),
  darkTheme: ThemeData.dark(),
  themeMode: ThemeMode.system,
  home:
    YourSolidApp(),
)

Version Management

SolidUI provides automatic version management that loads version information directly from your app's pubspec.yaml.

Zero-Config Usage

appBar: SolidAppBarConfig(
  title: 'My App',
  versionConfig: SolidVersionConfig(),
),

This will:

Automatically read version from pubspec.yaml
Display version in the format 1.0.0+1
Show loading state until version is loaded
Provide default tooltip with version information

Advanced Configuration

appBar: SolidAppBarConfig(
  title: 'My App',
  versionConfig: SolidVersionConfig(
    changelogUrl: 'https://github.com/user/repo/blob/main/CHANGELOG.md',
    showDate: true,
    tooltip: 'Custom version tooltip',
  ),
),

Manual Version Override

appBar: SolidAppBarConfig(
  title: 'My App',
  versionConfig: SolidVersionConfig(
    version: '2.0.0-beta.1', // Manual override
    changelogUrl: 'https://github.com/user/repo/blob/main/CHANGELOG.md',
  ),
),

About Dialogue Configuration

SolidUI provides an integrated About dialogue system that automatically displays application information with sensible defaults.

Automatic About Button

By default, SolidScaffold automatically adds an About button (ℹ️ icon) to the AppBar. The button will:

Auto-detect application name and version from pubspec.yaml
Show default copyright notice with current year
Display in AppBar actions with responsive behaviour
Provide standard About dialogue with application information

Zero-Config Usage (Default Behavior)

SolidScaffold(
  menu: menuItems,
  appBar: SolidAppBarConfig(title: 'My App'),
  child: content,
  // About button automatically appears with default content
)

Basic Customisation

SolidScaffold(
  menu: menuItems,
  appBar: SolidAppBarConfig(title: 'My App'),
  aboutConfig: SolidAboutConfig(
    applicationName: 'My Custom App',
    applicationVersion: '2.0.0',
    applicationIcon: Icon(Icons.star, size: 64, color: Colors.blue),
    applicationLegalese: '''© 2025 Custom Company''',
    text: '''

A powerful application for managing your workflow.

**Features:**

• Feature 1

• Feature 2

• Feature 3

Visit our [support page](https://example.com/support) for help.

''',
  ),
  child: content,
)

Advanced Customisation

SolidScaffold(
  aboutConfig: SolidAboutConfig(
    applicationName: 'Enterprise App',
    applicationIcon: Image.asset('assets/app_icon.png', width: 64, height: 64),
    applicationLegalese: '''© 2025 My Company Ltd.''',
    text: '''

Enterprise-grade application for business workflows.

**Licensing:**
Licensed under MIT License.

This software includes third-party libraries.
See NOTICE file for attribution details.

**Support:**

Visit [our website](https://mycompany.com) for support and documentation.

''',
    showOnVeryNarrowScreen: true, // Show even on very narrow screens
    tooltip: 'Learn more about this application',
  ),
  child: content,
)

Custom About Action

SolidScaffold(
  aboutConfig: SolidAboutConfig(
    onPressed: () {
      // Custom action instead of showing standard dialogue
      Navigator.push(context, MaterialPageRoute(
        builder: (context) => CustomAboutPage(),
      ));
    },
  ),
  child: content,
)

Disabling About Button

SolidScaffold(
  aboutConfig: SolidAboutConfig(
    enabled: false, // Completely disable About button
  ),
  child: content,
)

Programmatic About Dialogue

You can also show About dialogues programmatically:

// Show with custom configuration using text parameter
SolidAbout.show(context, SolidAboutConfig(
  applicationName: 'My App',
  applicationLegalese: '© 2025 My Company',
  text: '''
Custom about content with **Markdown** support.

Visit our [website](https://example.com) for more information.
''',
));

// Show with minimal configuration
SolidAbout.showDefault(context,
  applicationName: 'Quick App',
  applicationLegalese: '© 2025 Quick Company',
);

Advanced Usage

Application Examples

Basic Application Usage

Simplest Implementation

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SolidScaffold(
        menu: [
          SolidMenuItem(
            title: 'Home',
            icon: Icons.home,
            child: HomeDashboard(),
            tooltip: 'Home page',
          ),
          SolidMenuItem(
            title: 'Settings',
            icon: Icons.settings,
            child: AppSettings(),
            tooltip: 'Settings',
          ),
          SolidMenuItem(
            title: 'Profile',
            icon: Icons.person,
            child: UserProfile(),
            tooltip: 'User profile',
          ),
        ],
      ),
    );
  }
}

With AppBar Configuration

SolidScaffold(
  menu: [
    SolidMenuItem(
      title: 'Home',
      icon: Icons.home,
      child: HomeScreen(),
    ),
    SolidMenuItem(
      title: 'Settings',
      icon: Icons.settings,
      child: SettingsScreen(),
    ),
  ],
  appBar: SolidAppBarConfig(
    title: 'My Application',
    actions: [
      SolidAppBarAction(
        icon: Icons.search,
        onPressed: () => print('Search'),
        tooltip: 'Search',
      ),
      SolidAppBarAction(
        icon: Icons.notifications,
        onPressed: () => print('Notifications'),
        tooltip: 'Notifications',
        showOnNarrowScreen: false,
      ),
    ],
    overflowItems: [
      SolidOverflowMenuItem(
        id: 'help',
        icon: Icons.help,
        label: 'Help',
        onSelected: () => print('Help'),
      ),
    ],
  ),
  child: Center(
    child: Text('Main content area'),
  ),
)

With Status Bar

SolidScaffold(
  menu: [
    SolidMenuItem(
      title: 'Home',
      icon: Icons.home,
      child: HomeScreen(),
    ),
  ],
  statusBar: SolidStatusBarConfig(
    serverInfo: SolidServerInfo(
      serverUri: 'https://example.com',
      tooltip: 'Server status',
    ),
    loginStatus: SolidLoginStatus(
      webId: 'user@example.com',
      onTap: () => print('Login/Logout'),
      loggedInTooltip: 'Click to log out',
      loggedOutTooltip: 'Click to log in',
    ),
  ),
  child: Text('Content'),
)

Complete Configuration Example

class FullExampleApp extends StatefulWidget {
  @override
  _FullExampleAppState createState() => _FullExampleAppState();
}

class _FullExampleAppState extends State<FullExampleApp> {
  int _selectedIndex = 0;
  String? _webId;

  @override
  Widget build(BuildContext context) {
    return SolidScaffold(
      menu: [
        SolidMenuItem(
          title: 'Dashboard',
          icon: Icons.dashboard,
          child: DashboardScreen(),
          tooltip: 'Dashboard',
          onTap: (context) {
            print('Switch to dashboard');
          },
        ),
        SolidMenuItem(
          title: 'Projects',
          icon: Icons.work,
          child: ProjectsScreen(),
          tooltip: 'Project management',
          color: Colors.blue,
        ),
        SolidMenuItem(
          title: 'Team',
          icon: Icons.people,
          child: TeamScreen(),
          tooltip: 'Team management',
        ),
        SolidMenuItem(
          title: 'About',
          icon: Icons.info,
          child: AboutScreen(),
          tooltip: 'About us',
          message: 'This is a sample application built using SolidScaffold',
          dialogTitle: 'About',
        ),
      ],
      appBar: SolidAppBarConfig(
        title: 'Project Management System',
        backgroundColor: Colors.blue[800],
        actions: [
          SolidAppBarAction(
            icon: Icons.search,
            onPressed: () => _showSearch(context),
            tooltip: 'Search',
          ),
          SolidAppBarAction(
            icon: Icons.notifications,
            onPressed: () => _showNotifications(context),
            tooltip: 'Notifications',
            showOnNarrowScreen: false,
          ),
          SolidAppBarAction(
            icon: Icons.account_circle,
            onPressed: () => _showProfile(context),
            tooltip: 'User profile',
            showOnVeryNarrowScreen: false,
          ),
        ],
        overflowItems: [
          SolidOverflowMenuItem(
            id: 'help',
            icon: Icons.help,
            label: 'Help',
            onSelected: () => _showHelp(context),
          ),
          SolidOverflowMenuItem(
            id: 'settings',
            icon: Icons.settings,
            label: 'Settings',
            onSelected: () => _showSettings(context),
          ),
        ],
      ),
      statusBar: SolidStatusBarConfig(
        serverInfo: SolidServerInfo(
          serverUri: 'https://api.example.com',
          displayText: 'API Server',
          tooltip: 'Click to access API documentation',
        ),
        loginStatus: SolidLoginStatus(
          webId: _webId,
          onTap: _toggleLogin,
          loggedInText: 'Logged In',
          loggedOutText: 'Not Logged In',
          loggedInTooltip: 'Click to log out',
          loggedOutTooltip: 'Click to log in',
        ),
        customItems: [
          SolidCustomStatusBarItem(
            id: 'version',
            widget: Text('v1.0.0'),
            priority: 1,
          ),
        ],
      ),
      userInfo: SolidNavUserInfo(
        userName: _webId != null ? 'User' : 'Not logged in',
        webId: _webId,
        showWebId: true,
      ),
      onLogout: _webId != null ? _logout : null,
      onShowAlert: _showAlert,
      themeToggle: const SolidThemeToggleConfig(
        enabled: true,
        showInAppBarActions: true,
        showOnVeryNarrowScreen: false,
        tooltip: '''
**Theme Toggle**

Switch between light and dark modes for optimal viewing experience.

🌙 **Dark Mode**: Better for low-light environments

☀️ **Light Mode**: Better for bright environments

        ''',
      ),
      aboutConfig: SolidAboutConfig(
        applicationName: 'Project Management System',
        applicationIcon: Icon(Icons.work, size: 64, color: Colors.blue),
        applicationLegalese: '''© 2025 Example Company''',
        text: '''

A comprehensive project management solution built with Flutter and SolidUI.

Manage your projects efficiently with our comprehensive project management system.

**Key Features:**

• Project tracking and task management

• Team collaboration tools

• Gantt charts and timeline views

• Real-time progress monitoring

• Solid POD integration for secure data storage

**Licensing:**
Licensed under MIT License.

**Support:**
For support and documentation, visit [our website](https://example.com).

''',
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _addNewItem,
        tooltip: 'Add new project',
        child: Icon(Icons.add),
      ),
      child: _buildMainContent(),
    );
  }

  Widget _buildMainContent() {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Icon(
            Icons.work,
            size: 100,
            color: Colors.grey[400],
          ),
          SizedBox(height: 20),
          Text(
            'Welcome to Project Management System',
            style: Theme.of(context).textTheme.headlineMedium,
          ),
          SizedBox(height: 10),
          Text(
            'Select from the menu on the left to get started',
            style: Theme.of(context).textTheme.bodyLarge,
          ),
        ],
      ),
    );
  }

  void _showSearch(BuildContext context) {
    showDialog(
      context: context,
      builder: (context) => AlertDialog(
        title: Text('Search'),
        content: TextField(
          decoration: InputDecoration(hintText: 'Enter search keywords'),
        ),
        actions: [
          TextButton(
            onPressed: () => Navigator.pop(context),
            child: Text('Cancel'),
          ),
          TextButton(
            onPressed: () => Navigator.pop(context),
            child: Text('Search'),
          ),
        ],
      ),
    );
  }

  void _showNotifications(BuildContext context) {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text('No new notifications')),
    );
  }

  void _showProfile(BuildContext context) {
    print('Show user profile');
  }

  void _showHelp(BuildContext context) {
    print('Show help');
  }

  void _showSettings(BuildContext context) {
    print('Show settings');
  }

  void _toggleLogin() {
    setState(() {
      _webId = _webId == null ? 'user@example.com' : null;
    });
  }

  void _logout(BuildContext context) {
    setState(() {
      _webId = null;
    });
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text('Logged out')),
    );
  }

  void _showAlert(BuildContext context, String message, String? title) {
    showDialog(
      context: context,
      builder: (context) => AlertDialog(
        title: title != null ? Text(title) : null,
        content: Text(message),
        actions: [
          TextButton(
            onPressed: () => Navigator.pop(context),
            child: Text('OK'),
          ),
        ],
      ),
    );
  }

  void _addNewItem() {
    print('Add new project');
  }
}

Key Features

Responsive UI Design

Automatically switches layout based on screen width
Customisable narrow screen threshold

Only requires defining a SolidMenuItem list
Supports icons, titles, tooltips, colours, etc.

Optional AppBar

Supports action button lists
Automatically handles overflow menu
Responsive button show/hide

Optional Status Bar

Displays server information, login status, etc.
Supports custom status items
Responsive layout

User Information Support

Displays user information in drawer
Supports logout functionality

Theme Toggle Integration

Built-in light/dark mode switching
Responsive placement (AppBar actions or overflow menu)
Customisable icons, tooltips, and behaviour
Automatic theme state indication

Parameter Reference

SolidScaffold Main Parameters

menu: List of menu items (required)
child: Main content area (required)
appBar: AppBar configuration (optional)
statusBar: Status bar configuration (optional)
userInfo: User information configuration (optional)
onLogout: Logout callback (optional)
onShowAlert: Alert dialogue callback (optional)
narrowScreenThreshold: Narrow screen threshold (default 800)
backgroundColor: Background colour (optional)
floatingActionButton: Floating action button (optional)
initialIndex: Initial selected menu index (default 0)
themeToggle: Theme toggle configuration (optional)
aboutConfig: About dialogue configuration (optional)

SolidMenuItem Parameters

title: Menu title (required)
icon: Menu icon (required)
color: Icon colour (optional)
child: Child widget displayed when menu item is selected (optional)
tooltip: Tooltip (optional)
message: Message dialogue content (optional)
dialogTitle: Dialogue title (optional)
onTap: Tap callback (optional)

SolidThemeToggleConfig Parameters

When both onToggleTheme and currentThemeMode are null (default), SolidUI automatically manages theme state using SolidThemeNotifier:

enabled: Whether theme toggle is enabled (default true)
showInAppBarActions: Show in AppBar actions vs overflow menu (default true)
lightModeIcon: Custom light mode icon (optional, defaults to Icons.light_mode)
darkModeIcon: Custom dark mode icon (optional, defaults to Icons.dark_mode)
systemModeIcon: Custom system mode icon (optional, defaults to Icons.computer)
tooltip: Custom tooltip text (optional, auto-generated)
label: Label for overflow menu (default 'Toggle Theme')
showOnNarrowScreen: Show on narrow screens (default true)
showOnVeryNarrowScreen: Show on very narrow screens (default true)

External State Management

For custom theme state management, provide both parameters:

currentThemeMode: Current theme mode for state indication (required for external management)
onToggleTheme: Theme toggle callback (required for external management)
All parameters from automatic management above

SolidAboutConfig Parameters

enabled: Whether the About button is enabled (default true)
icon: Custom icon for the About button (default Icons.info_outline)
applicationName: Application name displayed in dialogue (auto-detected if not provided)
applicationVersion: Application version displayed in dialogue (auto-detected if not provided)
applicationIcon: Application icon displayed in dialogue (optional)
applicationLegalese: Application legal notice/copyright information (optional)
text: Main text content for the About dialogue (supports Markdown, with automatic word wrapping) (optional)
customContent: Custom dialogue content widget (replaces default dialogue if provided)
children: Additional widgets to show in the About dialogue (optional, ignored if text is provided)
showOnNarrowScreen: Show About button on narrow screens (default true)
showOnVeryNarrowScreen: Show About button on very narrow screens (default false)
priority: Priority for ordering in AppBar actions (default 999)
tooltip: Custom tooltip text (auto-generated if not provided)
onPressed: Custom callback when About button is pressed (optional)

The new SolidScaffold component greatly simplifies navigation usage, allowing you to create feature-rich responsive navigation interfaces with built-in theme switching, About dialogues, and minimal code.

Development Status

SolidUI is currently in active development as part of the Solid ecosystem projects.

Licence

Licensed under the MIT License. See LICENSE for details.

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Authors

Graham Williams
Tony Chen

For more information about Solid and PODs, visit solidproject.org.

Libraries

solidui: A UI library for building Solid applications with Flutter.