buildCustomThemedNavigationPreview function

Implementation

@Preview(name: 'Custom Themed Navigation')
Widget buildCustomThemedNavigationPreview() => _NavigationPreview(
  title: 'Custom Themed Navigation',
  customTheme: ThemeData(
    colorScheme: const ColorScheme.dark(
      primary: Colors.cyan,
      secondary: Colors.pinkAccent,
      surface: Color(0xFF1E1E1E),
    ),
    useMaterial3: true,
  ),
  builder:
      (
        List<VooNavigationItem> items,
        String selectedId,
        void Function(String) onSelected,
      ) {
        final config = VooNavigationConfig(
          items: items,
          selectedId: selectedId,
          appBarTitle: const Text('Dark Theme Navigation'),
          selectedItemColor: Colors.cyan,
          unselectedItemColor: Colors.grey,
          indicatorColor: Colors.cyan.withAlpha((0.2 * 255).round()),
          navigationBackgroundColor: const Color(0xFF1E1E1E),
          onNavigationItemSelected: onSelected,
        );

        return VooAdaptiveScaffold(
          config: config,
          backgroundColor: const Color(0xFF121212),
          body: Center(
            child: Container(
              padding: const EdgeInsets.all(24),
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  colors: [
                    Colors.cyan.withAlpha((0.1 * 255).round()),
                    Colors.pinkAccent.withAlpha((0.1 * 255).round()),
                  ],
                  begin: Alignment.topLeft,
                  end: Alignment.bottomRight,
                ),
                borderRadius: BorderRadius.circular(16),
                border: Border.all(
                  color: Colors.cyan.withAlpha((0.3 * 255).round()),
                ),
              ),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  const Icon(Icons.palette, size: 48, color: Colors.cyan),
                  const SizedBox(height: 16),
                  const Text(
                    'Custom Dark Theme',
                    style: TextStyle(
                      fontSize: 24,
                      color: Colors.white,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  const SizedBox(height: 8),
                  Text(
                    'Selected: $selectedId',
                    style: TextStyle(fontSize: 16, color: Colors.grey.shade400),
                  ),
                ],
              ),
            ),
          ),
        );
      },
);