FDN MVVM Flutter Widget Generator

Uma extensão para VS Code e Cursor IDE que gera automaticamente widgets Flutter seguindo o padrão MVVM (Model-View-ViewModel) com arquivos separados para view e view model.

🚀 Recursos

• ✅ Gera widgets Flutter stateful seguindo o padrão MVVM
• ✅ Cria arquivos separados para Widget, View e ViewModel
• ✅ Interface intuitiva com seleção de pasta e nome do widget
• ✅ Compatível com VS Code e Cursor IDE
• ✅ Geração automática de nomes de arquivos em snake_case
• ✅ Templates personalizáveis

📦 Instalação

No Cursor IDE

1. Abra o Cursor
2. Pressione Ctrl+Shift+X (ou Cmd+Shift+X no macOS) para abrir o painel de extensões
3. Procure por "FDN MVVM Flutter Widget Generator"
4. Clique em "Install"

No VS Code

1. Abra o VS Code
2. Pressione Ctrl+Shift+X (ou Cmd+Shift+X no macOS) para abrir o painel de extensões
3. Procure por "FDN MVVM Flutter Widget Generator"
4. Clique em "Install"

Instalação Manual (VSIX)

Se você não encontrar a extensão no marketplace:

1. Baixe o arquivo .vsix da página de releases
2. No Cursor/VS Code, pressione Ctrl+Shift+P (ou Cmd+Shift+P no macOS)
3. Digite "Extensions: Install from VSIX..."
4. Selecione o arquivo .vsix baixado

🎯 Como Usar

1. Abra um projeto Flutter no Cursor ou VS Code
2. Execute o comando de uma das formas:
   • Pressione Ctrl+Shift+P (ou Cmd+Shift+P no macOS) e digite "Generate MVVM Flutter Widget"
   • Clique com o botão direito em uma pasta no explorador e selecione "Generate MVVM Flutter Widget"
3. Digite o nome do widget em PascalCase (ex: LoginPage, UserProfile)
4. Selecione a pasta onde os arquivos serão criados
5. Pronto! A extensão criará 3 arquivos automaticamente

📁 Estrutura de Arquivos Gerada

Para um widget chamado LoginPage, a extensão criará:

login_page/
├── login_page.dart           # Widget principal
├── login_page_view.dart      # View (UI)
└── login_page_view_model.dart # ViewModel (lógica)

Exemplo de Código Gerado

login_page.dart

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

class LoginPage extends StatefulWidget {
  static const route = '/LoginPage/';
  const LoginPage({Key? key}) : super(key: key);

  @override
  LoginPageView createState() => LoginPageView();
}

login_page_view.dart

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

class LoginPageView extends LoginPageViewModel {

  @override
  Widget build(BuildContext context) {
    // Replace this with your build function
    return const Text('Just a placeholder');
  }
}

login_page_view_model.dart

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

abstract class LoginPageViewModel extends State<LoginPage> {
  // Add your state and logic here
}

🏗️ Padrão MVVM

Esta extensão implementa o padrão MVVM para Flutter:

• Model: Representa os dados (não gerado pela extensão)
• View: Responsável pela interface do usuário (*_view.dart)
• ViewModel: Contém a lógica de negócio e estado (*_view_model.dart)

Vantagens do Padrão MVVM

• ✅ Separação de responsabilidades
• ✅ Código mais testável
• ✅ Maior reutilização
• ✅ Manutenção facilitada
• ✅ Melhor organização do projeto

🛠️ Desenvolvimento

Pré-requisitos

• Node.js 14+
• VS Code ou Cursor IDE

Configuração Local

# Clone o repositório
git clone https://github.com/fdenisnascimento/fdn-mvvm-flutter.git

# Instale as dependências
cd fdn-mvvm-flutter
npm install

# Compile o projeto
npm run compile

# Execute os testes
npm test

Scripts Disponíveis

npm run compile     # Compila o TypeScript
npm run watch       # Compila em modo watch
npm run test        # Executa os testes
npm run lint        # Executa o linter
npm run package     # Gera o arquivo VSIX

📤 Publicação

Esta extensão pode ser publicada em ambos os marketplaces:

🚀 Publicação Automatizada (Recomendado)

Use o script integrado que suporta ambos os marketplaces:

# Executar script interativo
./publish-commands.sh

Opções disponíveis:

• 🟦 VS Code Marketplace apenas
• 🟠 OpenVSX Registry (Cursor) apenas
• 🚀 Ambos os marketplaces

🔧 Publicação Manual

VS Code Marketplace

npm install -g @vscode/vsce
vsce publish -p YOUR_VSCODE_TOKEN

OpenVSX Registry (Cursor)

npm install -g ovsx
ovsx publish fdn-mvvm-flutter-0.0.3.vsix -p YOUR_OPENVSX_TOKEN

📖 Guia completo: Veja CURSOR_PUBLISHING_GUIDE.md para instruções detalhadas

🤝 Contribuição

Contribuições são bem-vindas! Por favor:

1. Faça um fork do projeto
2. Crie uma branch para sua feature (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.

🐛 Relatório de Bugs

Encontrou um bug? Por favor, abra uma issue com:

• Descrição detalhada do problema
• Passos para reproduzir
• Versão do Cursor/VS Code
• Sistema operacional

📞 Suporte

• 📧 Email: [seu-email@exemplo.com]
• 🐙 GitHub: fdenisnascimento
• 💬 Issues: GitHub Issues

⭐ Se esta extensão foi útil para você, considere dar uma estrela no repositório!