flutter_artist_commons_ui 0.9.8

A collection of reusable, enterprise-grade UI components and adaptive dialog layouts tailored for the FlutterArtist framework ecosystem.

example/main.dart

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

void main() {
  runApp(const MyApp());
}

/// The main application configuration wrapping the FlutterArtist global demo lifecycle.
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FlutterArtist Common UI Showcase',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        useMaterial3: true,
        colorSchemeSeed: Colors.indigo,
        brightness: Brightness.light,
      ),
      darkTheme: ThemeData(
        useMaterial3: true,
        colorSchemeSeed: Colors.indigo,
        brightness: Brightness.dark,
      ),
      home: const ShowcaseDashboardPage(),
    );
  }
}

/// A comprehensive, modular showcase dashboard page presenting all available
/// enterprise-grade UI components and dialog layout structures.
class ShowcaseDashboardPage extends StatefulWidget {
  const ShowcaseDashboardPage({super.key});

  @override
  State<ShowcaseDashboardPage> createState() => _ShowcaseDashboardPageState();
}

class _ShowcaseDashboardPageState extends State<ShowcaseDashboardPage> {
  String _dialogSelectionTrace = 'No selection made yet';
  bool _isCustomItemEdited = false;

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    final colorScheme = theme.colorScheme;

    return Scaffold(
      appBar: AppBar(
        title: const Text('FlutterArtist Common UI Blueprint'),
        centerTitle: true,
        elevation: 2,
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(24.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            // Section 1: Dynamic Interactive Inline Text Rows
            _buildSectionHeader('Interactive Inline Text Assets'),
            const SizedBox(height: 12),
            _buildTextWidgetsShowcase(),
            const SizedBox(height: 32),

            // Section 2: Global Automated Modals and Prompt Windows using a lightweight Wrap layout
            _buildSectionHeader('Ecosystem Dialog Triggers'),
            const SizedBox(height: 12),
            _buildDialogTriggersWrap(context),
            const SizedBox(height: 32),

            // Section 3: Shared State Tracker Status Monitor
            _buildSectionHeader('Telemetry State Monitor'),
            const SizedBox(height: 12),
            _buildStateMonitorCard(colorScheme),
          ],
        ),
      ),
    );
  }

  /// Compiles a standardized header label tracking the component category context.
  Widget _buildSectionHeader(String title) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          title.toUpperCase(),
          style: const TextStyle(
            fontSize: 12,
            fontWeight: FontWeight.bold,
            letterSpacing: 1.2,
            color: Colors.grey,
          ),
        ),
        const Divider(height: 16, thickness: 1),
      ],
    );
  }

  /// Organizes and constructs the newly optimized [IconLabelText] and [IconLabelSelectableText]
  /// layouts inside an isolated workspace module method.
  Widget _buildTextWidgetsShowcase() {
    return Card(
      elevation: 0,
      shape: RoundedRectangleBorder(
        side: BorderSide(color: Colors.grey.withAlpha(50)),
        borderRadius: BorderRadius.circular(12),
      ),
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // Scenario A: Non-copyable standard typography mapping the prefix icon -> label -> text -> suffix -> endIcon rules
            IconLabelText(
              icon: const Icon(Icons.dns_outlined, size: 16),
              label: 'Cluster Environment:',
              text: ' production-us-east-4',
              suffixIcon: const Icon(
                Icons.verified_user,
                size: 14,
                color: Colors.green,
              ),
              endIcon: const Icon(
                Icons.cloud_done,
                size: 14,
                color: Colors.blue,
              ),
              onEdit: () {
                setState(() {
                  _dialogSelectionTrace =
                      'Triggered inline edit on Cluster Environment text.';
                });
              },
            ),
            const SizedBox(height: 12),

            // Scenario B: Selectable text layout built using the decoupled inline structure maps
            IconLabelSelectableText(
              icon: const Icon(Icons.fingerprint, size: 16),
              label: 'Secure Access Token:',
              text: ' FA-9982X-LNK77',
              suffixIcon: Icon(
                _isCustomItemEdited ? Icons.lock_open : Icons.lock_outline,
                size: 14,
                color: _isCustomItemEdited ? Colors.orange : Colors.grey,
              ),
              onEdit: () {
                setState(() {
                  _isCustomItemEdited = !_isCustomItemEdited;
                  _dialogSelectionTrace =
                      'Toggled custom access token state via inline editor button.';
                });
              },
            ),
          ],
        ),
      ),
    );
  }

  /// ✅ REFINED: Assembles all programmatic modal trigger controls in a highly responsive [Wrap] layout block.
  ///
  /// Replaced the previous grid structure with a fluid [Wrap] utilizing tight [ElevatedButton.icon]
  /// components to guarantee buttons preserve localized organic bounds instead of stretching violently.
  Widget _buildDialogTriggersWrap(BuildContext context) {
    return Wrap(
      spacing: 10,
      // Horizontal structural gap between discrete button islands
      runSpacing: 10,
      // Vertical line spacing enforced when content flows into subsequent lines
      alignment: WrapAlignment.start,
      children: [
        _buildElevatedDialogButton(
          label: 'Message Prompt',
          icon: Icons.chat_bubble_outline,
          color: Colors.blue,
          onPressed: () => _triggerMessageDialog(context),
        ),
        _buildElevatedDialogButton(
          label: 'Confirm Modal',
          icon: Icons.help_outline,
          color: Colors.indigo,
          onPressed: () => _triggerConfirmDialog(context),
        ),
        _buildElevatedDialogButton(
          label: 'Delete Warning',
          icon: Icons.delete_forever_outlined,
          color: Colors.red,
          onPressed: () => _triggerDeleteDialog(context),
        ),
        _buildElevatedDialogButton(
          label: 'Yes/No/Cancel',
          icon: Icons.rule_folder_outlined,
          color: Colors.teal,
          onPressed: () => _triggerYesNoCancelDialog(context),
        ),
        _buildElevatedDialogButton(
          label: 'Custom FaDialog',
          icon: Icons.dashboard_customize_outlined,
          color: Colors.purple,
          onPressed: () => _triggerCustomFaDialog(context),
        ),
      ],
    );
  }

  /// ✅ REFINED: A micro-component factory compiling organic, compact [ElevatedButton.icon] nodes for dialog orchestration.
  Widget _buildElevatedDialogButton({
    required String label,
    required IconData icon,
    required Color color,
    required VoidCallback onPressed,
  }) {
    return ElevatedButton.icon(
      onPressed: onPressed,
      style: ElevatedButton.styleFrom(
        elevation: 1,
        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
      ),
      icon: Icon(icon, color: color, size: 18),
      label: Text(label, style: const TextStyle(fontWeight: FontWeight.w500)),
    );
  }

  /// Displays the dynamic telemetry execution tracer log card layout.
  Widget _buildStateMonitorCard(ColorScheme colorScheme) {
    return Container(
      padding: const EdgeInsets.all(16.0),
      decoration: BoxDecoration(
        color: colorScheme.surfaceVariant.withAlpha(80),
        borderRadius: BorderRadius.circular(12),
        border: Border.all(color: colorScheme.outlineVariant),
      ),
      child: Row(
        children: [
          Icon(Icons.terminal, color: colorScheme.primary),
          const SizedBox(width: 12),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                const Text(
                  'Runtime Callback Event Log:',
                  style: TextStyle(
                    fontSize: 11,
                    fontWeight: FontWeight.bold,
                    color: Colors.grey,
                  ),
                ),
                const SizedBox(height: 2),
                Text(
                  _dialogSelectionTrace,
                  style: const TextStyle(
                    fontSize: 13,
                    fontFamily: 'monospace',
                    fontWeight: FontWeight.w500,
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  // ===========================================================================
  // ─── ISOLATED DIALOG LIFE-CYCLE HANDLERS ───
  // ===========================================================================

  /// Triggers the core standard notification message popup pipeline cleanly.
  void _triggerMessageDialog(BuildContext context) {
    showMessageDialog(
      context: context,
      title: 'System Synchronizer Logs',
      message: 'Remote repository metadata synced successfully.',
      details:
          'Connection: TLS 1.3\nLatency: 42ms\nIndication Code: FA_SYNC_OK',
      type: FaMessageType.success,
    );
    setState(
      () => _dialogSelectionTrace = 'Launched FaMessageDialog (Success).',
    );
  }

  /// Dispatches the clean, double-pop proof standard confirm prompt interface.
  void _triggerConfirmDialog(BuildContext context) async {
    setState(
      () => _dialogSelectionTrace = 'Awaiting FaConfirmDialog response...',
    );
    final bool confirmed = await showConfirmDialog(
      context: context,
      message: 'Commit staging modifications upstream?',
      details:
          'This will compile clean build targets and push directly to branches.',
    );
    setState(
      () =>
          _dialogSelectionTrace =
              'FaConfirmDialog resolved payload: $confirmed',
    );
  }

  /// Triggers the safe destructive delete modal alert tracker.
  void _triggerDeleteDialog(BuildContext context) async {
    setState(
      () =>
          _dialogSelectionTrace = 'Awaiting Delete Confirm dialog response...',
    );
    final bool confirmed = await showConfirmDeleteDialog(
      context: context,
      details: 'Target ID: RECORD_FA_DEPT_101\nOperation cannot be undone.',
    );
    setState(
      () =>
          _dialogSelectionTrace = 'Delete Action resolved payload: $confirmed',
    );
  }

  /// Dispatches the robust programmatic tri-state user decision prompt window.
  void _triggerYesNoCancelDialog(BuildContext context) async {
    setState(
      () => _dialogSelectionTrace = 'Awaiting YesNoCancel dialog response...',
    );
    final YesNoCancel choice = await FaYesNoCancelDialog.show(
      context,
      title: 'Unsaved Workplace Modification',
      message:
          'Save pending script updates before closing current terminal session?',
      subMessage:
          'Selecting cancel aborts the current viewport disposal pass completely.',
      defaultOption: YesNoCancel.yes,
    );
    setState(
      () =>
          _dialogSelectionTrace =
              'YesNoCancel resolved payload contract: ${choice.name.toUpperCase()}',
    );
  }

  /// Isolated creation method compiling a customized baseline instance of [FaDialog]
  /// independently to secure maximum code readability and structural isolation.
  Widget _createCustomFaDialogContent() {
    return const Column(
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          'Ecosystem Architecture Specification',
          style: TextStyle(fontWeight: FontWeight.bold, fontSize: 14),
        ),
        SizedBox(height: 8),
        Text(
          'This custom layout block illustrates the core structural isolation of the parent '
          'FaDialog skeleton container asset. Developers can mount arbitrary complex column vectors '
          'and generic elements down here safely without breaking boundary parameters.',
          style: TextStyle(fontSize: 12, height: 1.4),
        ),
      ],
    );
  }

  /// Launches the standalone isolated custom [FaDialog] structure cleanly.
  void _triggerCustomFaDialog(BuildContext context) {
    showDialog(
      context: context,
      builder: (context) {
        return FaDialog(
          titleText: 'Enterprise Custom Core Sandbox',
          iconData: Icons.dashboard_customize_outlined,
          preferredContentWidth: 400,
          preferredContentHeight: null,
          // Dynamic wrap content constraint metric
          content: _createCustomFaDialogContent(),
          actions: [
            TextButton(
              onPressed: () => Navigator.of(context).pop(),
              child: const Text('Dismiss Sandbox'),
            ),
          ],
        );
      },
    );
    setState(
      () =>
          _dialogSelectionTrace = 'Launched custom isolated FaDialog viewport.',
    );
  }
}