conectar_design_system 0.1.3

conectar_design_system: ^0.1.3 copied to clipboard

example/lib/main.dart

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

import 'pages/buttons_showcase.dart';
import 'pages/cards_showcase.dart';
import 'pages/fixed_components_showcase.dart';
import 'pages/form_fields_showcase.dart';
import 'pages/simple_showcase.dart';

void main() {
  // Inicializar o design system com configurações customizadas
  ConectarDesignSystem.init();

  runApp(const ConectarDesignSystemShowcase());
}

class ConectarDesignSystemShowcase extends StatelessWidget {
  const ConectarDesignSystemShowcase({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Conectar Design System Showcase',
      theme: ThemeData(
        primarySwatch: Colors.green,
        primaryColor: ConectarDesignSystem.settings.primaryColor,
        scaffoldBackgroundColor: ConectarDesignSystem.settings.backgroundColor,
        fontFamily: 'Roboto',
      ),
      home: const ShowcaseHomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class ShowcaseHomePage extends StatefulWidget {
  const ShowcaseHomePage({super.key});

  @override
  State<ShowcaseHomePage> createState() => _ShowcaseHomePageState();
}

class _ShowcaseHomePageState extends State<ShowcaseHomePage> {
  int selectedIndex = 0;

  final List<ShowcaseSection> sections = [
    ShowcaseSection(
      title: 'Visão Geral',
      icon: Icons.home,
      page: const OverviewPage(),
    ),
    ShowcaseSection(
      title: 'Botões',
      icon: Icons.smart_button,
      page: const ButtonsShowcase(),
    ),
    ShowcaseSection(
      title: 'Campos de Formulário',
      icon: Icons.input,
      page: const FormFieldsShowcase(),
    ),
    ShowcaseSection(
      title: 'Cartões',
      icon: Icons.card_membership,
      page: const CardsShowcase(),
    ),
    ShowcaseSection(
      title: 'Componentes Corrigidos',
      icon: Icons.build,
      page: const FixedComponentsShowcase(),
    ),
    ShowcaseSection(
      title: 'Demonstração Simples',
      icon: Icons.widgets,
      page: const SimpleShowcase(),
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: LayoutBuilder(
        builder: (context, constraints) {
          if (constraints.maxWidth < 900) {
            // Mobile layout - only content, no sidebar
            return _buildContent();
          } else {
            // Desktop layout - with sidebar
            return Row(
              children: [
                // Sidebar
                Container(
                  width: 280,
                  color: Colors.white,
                  child: Column(
                    children: [
                      // Header
                      Container(
                        padding: const EdgeInsets.all(24),
                        decoration: BoxDecoration(
                          color: ConectarDesignSystem.settings.primaryColor,
                          boxShadow: [
                            BoxShadow(
                              color: Colors.black.withValues(alpha: 0.1),
                              blurRadius: 4,
                              offset: const Offset(0, 2),
                            ),
                          ],
                        ),
                        child: const Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              'Conectar',
                              style: TextStyle(
                                color: Colors.white,
                                fontSize: 24,
                                fontWeight: FontWeight.bold,
                              ),
                            ),
                            Text(
                              'Design System',
                              style: TextStyle(
                                color: Colors.white,
                                fontSize: 16,
                                fontWeight: FontWeight.w300,
                              ),
                            ),
                          ],
                        ),
                      ),
                      // Navigation
                      Expanded(
                        child: ListView.builder(
                          padding: const EdgeInsets.symmetric(vertical: 8),
                          itemCount: sections.length,
                          itemBuilder: (context, index) {
                            final section = sections[index];
                            final isSelected = selectedIndex == index;

                            return Container(
                              margin: const EdgeInsets.symmetric(
                                  horizontal: 8, vertical: 2),
                              decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(8),
                                color: isSelected
                                    ? ConectarDesignSystem.settings.primaryColor
                                        .withValues(alpha: 0.1)
                                    : null,
                              ),
                              child: ListTile(
                                leading: Icon(
                                  section.icon,
                                  color: isSelected
                                      ? ConectarDesignSystem
                                          .settings.primaryColor
                                      : Colors.grey[600],
                                ),
                                title: Text(
                                  section.title,
                                  style: TextStyle(
                                    color: isSelected
                                        ? ConectarDesignSystem
                                            .settings.primaryColor
                                        : Colors.grey[800],
                                    fontWeight: isSelected
                                        ? FontWeight.w600
                                        : FontWeight.normal,
                                  ),
                                ),
                                onTap: () {
                                  setState(() {
                                    selectedIndex = index;
                                  });
                                },
                              ),
                            );
                          },
                        ),
                      ),
                    ],
                  ),
                ),
                // Content
                Expanded(
                  child: Container(
                    color: ConectarDesignSystem.settings.backgroundColor,
                    child: sections[selectedIndex].page,
                  ),
                ),
              ],
            );
          }
        },
      ),
    );
  }

  Widget _buildContent() {
    return Container(
      color: ConectarDesignSystem.settings.backgroundColor,
      child: sections[selectedIndex].page,
    );
  }
}

class ShowcaseSection {
  final String title;
  final IconData icon;
  final Widget page;

  ShowcaseSection({
    required this.title,
    required this.icon,
    required this.page,
  });
}

class OverviewPage extends StatelessWidget {
  const OverviewPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(32),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Text(
            'Conectar Design System',
            style: TextStyle(
              fontSize: 32,
              fontWeight: FontWeight.bold,
            ),
          ),
          const SizedBox(height: 16),
          Text(
            'Uma biblioteca completa de componentes reutilizáveis para Flutter',
            style: TextStyle(
              fontSize: 18,
              color: Colors.grey[600],
            ),
          ),
          const SizedBox(height: 32),
          Expanded(
            child: LayoutBuilder(
              builder: (context, constraints) {
                int crossAxisCount = 1;
                if (constraints.maxWidth > 1200) {
                  crossAxisCount = 3;
                } else if (constraints.maxWidth > 800) {
                  crossAxisCount = 2;
                }

                return GridView.count(
                  crossAxisCount: crossAxisCount,
                  crossAxisSpacing: 16,
                  mainAxisSpacing: 16,
                  childAspectRatio: 1.2,
                  children: [
                    _buildFeatureCard(
                      'Componentes',
                      '30+ componentes prontos para uso',
                      Icons.widgets,
                      Colors.blue,
                    ),
                    _buildFeatureCard(
                      'Responsivo',
                      'Design adaptável para todas as telas',
                      Icons.devices,
                      Colors.green,
                    ),
                    _buildFeatureCard(
                      'Customizável',
                      'Temas e estilos personalizáveis',
                      Icons.palette,
                      Colors.purple,
                    ),
                    _buildFeatureCard(
                      'Validação',
                      'Validadores para formulários',
                      Icons.verified,
                      Colors.orange,
                    ),
                    _buildFeatureCard(
                      'Utilitários',
                      'Funções auxiliares e extensões',
                      Icons.build,
                      Colors.red,
                    ),
                    _buildFeatureCard(
                      'Documentação',
                      'Exemplos e guias detalhados',
                      Icons.description,
                      Colors.teal,
                    ),
                  ],
                );
              },
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildFeatureCard(
      String title, String description, IconData icon, Color color) {
    return MyBaseCard(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Icon(
            icon,
            size: 48,
            color: color,
          ),
          const SizedBox(height: 16),
          Text(
            title,
            style: const TextStyle(
              fontSize: 18,
              fontWeight: FontWeight.bold,
            ),
            textAlign: TextAlign.center,
          ),
          const SizedBox(height: 8),
          Text(
            description,
            style: TextStyle(
              fontSize: 14,
              color: Colors.grey[600],
            ),
            textAlign: TextAlign.center,
          ),
        ],
      ),
    );
  }
}