Conectar Design System #

📊 Status do Build #

📋 Índice #

• 🚀 Instalação
• ⚙️ Configuração
• 🧩 Componentes
  • 🎯 Novos Destaques
  • 🔘 Botões
  • 📝 Campos de Formulário
  • 🃏 Cartões e Containers
  • 🧭 Navegação
  • 💬 Feedback
  • ☑️ Seleção
  • 🎞️ Mídia
  • 📊 Tabelas
• 🛠️ Utilitários
• 📦 Modelos
• ✔️ Validadores
• 🔧 Extensões
• 🎮 Showcase App
• 🧪 Testes
• 📚 Documentação

🚀 Instalação #

Via Git (Recomendado) #

dependencies:
  conectar_design_system:
    git:
      url: https://github.com/seu-usuario/conectar_design_system.git
      ref: v0.1.3

Via Pub.dev (Em breve) #

dependencies:
  conectar_design_system: ^0.1.3

Instalação rápida #

flutter pub add conectar_design_system
flutter pub get

⚙️ Configuração #

Inicialização básica #

import 'package:conectar_design_system/conectar_design_system.dart';

void main() {
  // Inicializar o design system
  ConectarDesignSystem.init(
    systemSettings: ConectarSettings(
      primaryColor: Color(0xff1bb17a),
      backgroundColor: Color(0xFFfafafa),
      successColor: Color(0xFF4CAF50),
      textColor: Color(0xFF000000),
      borderColor: Color(0xFFDEE2E6),
    ),
  );

  runApp(MyApp());
}

Configuração avançada #

ConectarDesignSystem.init(
  systemSettings: ConectarSettings(
    // Cores principais
    primaryColor: Color(0xff1bb17a),
    secondaryColor: Color(0xFF6C757D),
    backgroundColor: Color(0xFFfafafa),

    // Estados
    successColor: Color(0xFF4CAF50),
    warningColor: Color(0xFFFF9800),
    errorColor: Color(0xFFF44336),
    infoColor: Color(0xFF2196F3),

    // Texto e bordas
    textColor: Color(0xFF000000),
    borderColor: Color(0xFFDEE2E6),

    // Configurações específicas
    enableDebug: true,
    defaultFontFamily: 'Roboto',
  ),
);

🧩 Componentes #

🎯 Novos Destaques #

📸 MyImagePicker (v0.1.1) - NOVO!

Seletor de imagens revolucionário com suporte completo multiplataforma:

MyImagePicker(
  label: "Selecionar Foto do Perfil",
  width: 300,
  height: 200,
  defaultSource: ImageSource.gallery,
  onImageSelected: (XFile? image) {
    if (image != null) {
      print('Imagem selecionada: ${image.name}');
      print('Caminho: ${image.path}');

      // Ler bytes se necessário
      final bytes = await image.readAsBytes();
    }
  },
),

Funcionalidades:

• 📸 Câmera nativa: Suporte completo em todas as plataformas
• 🖼️ Galeria: Seleção de imagens existentes
• 🗑️ Remover: Botão para limpar seleção
• 🎨 Preview: Visualização com informações da imagem
• 📱 Otimizações: Android Photo Picker (13+), PHPicker (iOS 14+)
• 📐 Responsivo: Layout adaptável e constraints seguros

🔘 Botões #

// Botão principal
MyButton(
  text: "Salvar",
  onPressed: () => print("Salvando..."),
  backgroundColor: Colors.green,
  icon: Icons.save,
)

// Botão flat
MyFlatButton(
  text: "Cancelar",
  onPressed: () => Navigator.pop(context),
)

// Botão link
MyLinkButton(
  text: "Esqueci minha senha",
  onPressed: () => _resetPassword(),
)

📝 Campos de Formulário #

// Campo de texto com debounce
MyDebouncedTextFormField(
  label: "Buscar produtos",
  hintText: "Digite para buscar...",
  onChanged: (value) => _searchProducts(value),
  debounceTime: Duration(milliseconds: 500),
)

// Dropdown com BaseModel
MyDrowdownFormField<StatusModel>(
  label: "Status do Pedido",
  items: statusList,
  selectedItem: selectedStatus,
  onChanged: (status) => setState(() => selectedStatus = status),
  required: true,
)

// Campo de moeda
MyCurrencyFormField(
  label: "Valor do Produto",
  onChanged: (value) => _updatePrice(value),
  prefix: "R\$ ",
)

🃏 Cartões e Containers #

MyBaseCard(
  title: "Informações do Cliente",
  subtitle: "Dados cadastrais atualizados",
  showBullet: true,
  backgroundColor: Colors.blue[50],
  child: Column(
    children: [
      Text("Nome: João Silva"),
      Text("Email: joao@email.com"),
    ],
  ),
)

☑️ Seleção #

// Múltipla seleção
MyMultiSelectDropdownFormField<CategoryModel>(
  label: "Categorias",
  items: categoryList,
  selectedItems: selectedCategories,
  onChanged: (categories) => _updateCategories(categories),
)

// Checkbox personalizado
MyRoundedCheckbox(
  value: isAccepted,
  onChanged: (value) => setState(() => isAccepted = value),
  label: "Aceito os termos de uso",
)

// Switch
MySwitchButton(
  value: isEnabled,
  onChanged: (value) => _toggleFeature(value),
  activeText: "Ativo",
  inactiveText: "Inativo",
)

📊 Tabelas #

MyTableView<ProductModel>(
  columns: [
    TableColumn(key: 'name', title: 'Produto'),
    TableColumn(key: 'price', title: 'Preço'),
    TableColumn(key: 'category', title: 'Categoria'),
  ],
  data: productList,
  onRowTap: (product) => _editProduct(product),
  pagination: PaginationModel(
    currentPage: 1,
    totalPages: 10,
    itemsPerPage: 20,
  ),
)

🛠️ Utilitários #

🔍 PlatformUtils #

// Detecção de plataforma
if (PlatformUtils.isWeb) {
  // Lógica específica para web
} else if (PlatformUtils.isMobile) {
  // Lógica para mobile
}

print(PlatformUtils.platformName); // "Web", "iOS", "Android", etc.

📱 Responsive #

Responsive(
  mobile: MobileLayout(),
  tablet: TabletLayout(),
  desktop: DesktopLayout(),
)

🎯 Debounce #

final debouncer = Debounce(duration: Duration(milliseconds: 300));

debouncer.call(() {
  // Ação com debounce
  _performSearch(query);
});

📦 Modelos #

BaseModel #

class ProductModel extends BaseModel {
  final String id;
  final String name;
  final double price;

  ProductModel({
    required this.id,
    required this.name,
    required this.price,
  });

  @override
  String get internalId => id;

  @override
  String get title => name;

  @override
  Map<String, dynamic> toJson() => {
    'id': id,
    'name': name,
    'price': price,
  };
}

✔️ Validadores #

MyTextFormField(
  label: "Email",
  validator: Validators.compose([
    Validators.required("Email é obrigatório"),
    Validators.email("Email inválido"),
  ]),
)

MyTextFormField(
  label: "CPF",
  validator: Validators.cpf("CPF inválido"),
  inputFormatters: [TaxInputFormatter()],
)

🎮 Showcase App #

Execute o app de demonstração para ver todos os componentes em ação:

cd example
flutter run -d chrome  # Para web
flutter run            # Para mobile

Páginas disponíveis: #

• 🏠 Visão Geral: Estatísticas e introdução
• 🔘 Botões: Todos os tipos de botão
• 📝 Formulários: Campos e validação
• 🃏 Cartões: Containers e layouts
• ☑️ Seleção: Checkboxes, switches, radio
• 🎞️ Mídia: Image picker e players
• 📊 Tabelas: Grids e paginação
• 🛠️ Utilitários: Helpers e tools
• 🔧 Componentes Corrigidos: Testes de compatibilidade

🧪 Testes #

Executar todos os testes #

# Testes unitários
flutter test

# Testes específicos
flutter test test/my_image_picker_test.dart
flutter test test/fixed_components_test.dart

# Testes de compatibilidade
./scripts/test_platforms.sh

Coverage atual #

• ✅ MyImagePicker: 6/6 testes passando
• ✅ Componentes Corrigidos: 6/6 testes passando
• ✅ Layout Tests: 5/5 testes passando

🛠️ Scripts de Desenvolvimento #

O projeto inclui scripts úteis para desenvolvimento e publicação:

Script de Desenvolvimento (scripts/dev.sh) #

# Configurar projeto pela primeira vez
./scripts/dev.sh setup

# Executar testes
./scripts/dev.sh test

# Análise de código
./scripts/dev.sh analyze

# Formatar código
./scripts/dev.sh format

# Build para todas as plataformas
./scripts/dev.sh build

# Executar showcase
./scripts/dev.sh showcase

# Executar showcase na web
./scripts/dev.sh web

# Limpar projeto
./scripts/dev.sh clean

# Health check completo
./scripts/dev.sh check

# Ver ajuda
./scripts/dev.sh help

Script de Publicação (publisher.sh) #

Script avançado para publicação automatizada:

# Bump automático de versão
./publisher.sh patch   # 0.1.1 -> 0.1.2
./publisher.sh minor   # 0.1.1 -> 0.2.0
./publisher.sh major   # 0.1.1 -> 1.0.0

# Versão específica
./publisher.sh 1.2.3

# Modo interativo
./publisher.sh

# Ver ajuda
./publisher.sh --help

O que o script de publicação faz:

• ✅ Valida e atualiza versões
• ✅ Executa análise de código
• ✅ Roda todos os testes
• ✅ Testa builds multiplataforma
• ✅ Atualiza documentação
• ✅ Cria commits e tags git
• ✅ Publica no pub.flutter-io.cn

Script de Teste de Plataformas (scripts/test_platforms.sh) #

# Testar todas as plataformas
./scripts/test_platforms.sh

# Testar plataforma específica
./scripts/test_platforms.sh web
./scripts/test_platforms.sh ios
./scripts/test_platforms.sh android

📚 Documentação #

Arquivos de documentação: #

• 📖 PLATFORM_COMPATIBILITY.md: Guia de compatibilidade
• 🔧 COMPATIBILITY_FIXES_FINAL.md: Correções técnicas
• 📈 SUCCESS_REPORT.md: Relatório de sucesso
• 📝 CHANGELOG.md: Histórico de mudanças

Links úteis: #

• 🌐 Demo Web: Aplicação de demonstração
• 📚 API Docs: Documentação da API
• 🎥 Video Tutorials: Tutoriais em vídeo
• 💬 Community: Comunidade no Discord

🤝 Contribuindo #

Adoramos contribuições! Veja nosso Guia de Contribuição.

Como contribuir: #

1. 🍴 Fork o projeto
2. 🔧 Crie sua feature branch (git checkout -b feature/AmazingFeature)
3. ✅ Commit suas mudanças (git commit -m 'Add some AmazingFeature')
4. 📤 Push para a branch (git push origin feature/AmazingFeature)
5. 🔄 Abra um Pull Request

📄 Licença #

Este projeto está licenciado sob a Licença MIT - veja o arquivo LICENSE para detalhes.

🙏 Agradecimentos #

• Flutter Team pela plataforma incrível
• image_picker pela solução multiplataforma
• Comunidade Flutter pelos feedbacks e contribuições