Instagram Clone Flutter

Um aplicativo Flutter que replica a interface do usuário do Instagram, com telas de login, perfil estilo Instagram e modal de visualização de fotos. Desenvolvido com Material Design 3 e imagens dinâmicas da web.

Funcionalidades

Implementadas

• Tela de Login com Material Design 3

  • Autenticação via email/senha (mock)
  • Botões para login social (Google, Facebook, Apple)
  • Validação de formulário
  • Design responsivo
  • Navegação automática para o perfil após login

• Tela de Perfil estilo Instagram

  • Perfil personalizado: Bruno Meredyk - Desenvolvedor & Technical Writer
  • Foto de perfil, estatísticas e informações do usuário
  • Seção de destaques (Stories Highlights) com 5 categorias
  • Grade de fotos 3xN com 24 imagens
  • Abas de navegação (Posts, Reels, Marcações)
  • Imagens dinâmicas carregadas do Picsum Photos

• Bottom Navigation Bar estilo Instagram

  • 5 ícones: Home, Search, Add, Reels, Profile
  • Interface responsiva e interativa
  • Design Material 3 com cores dinâmicas
  • Profile selecionado por padrão

• Modal de Visualização de Fotos

  • Foto ampliada com detalhes
  • Botões de curtir, comentar, compartilhar e salvar
  • Contador de curtidas interativo
  • Loading states e error handling
  • Design moderno com Material Design 3

Tecnologias Utilizadas

• Flutter 3.32.5 - Framework de desenvolvimento
• Dart 3.8.1 - Linguagem de programação
• Material Design 3 - Sistema de design com tema claro/escuro
• Font Awesome Flutter - Ícones para redes sociais
• Picsum Photos API - Imagens aleatórias da web
• Image.network - Carregamento nativo de imagens com cache

Características Visuais

• Sem banner de debug (debugShowCheckedModeBanner: false)
• Material Design 3 com cores dinâmicas
• Interface responsiva para diferentes tamanhos de tela
• Loading states para carregamento de imagens
• Error handling para falhas de rede
• Navegação fluida entre telas

Como Executar

Pré-requisitos

• Flutter SDK 3.32.5 ou superior
• Dart SDK 3.8.1 ou superior
• Android Studio (para emulador Android)
• VS Code (recomendado)

Passos

1. Clone o repositório:

   git clone <url-do-repositorio>
   cd flutt_av1

2. Instale as dependências:

   flutter pub get

3. Execute no emulador Android:

   flutter run -d emulator-5554

4. Ou execute em modo debug no VS Code:

   • Abra o projeto no VS Code
   • Pressione F5 ou Ctrl+F5

Como Usar

1. Login: Use qualquer email/senha ou clique nos botões sociais
2. Navegação: Use a bottom navigation bar para navegar
3. Perfil: Explore o perfil do Bruno Meredyk
4. Fotos: Toque em qualquer foto da grade para ver detalhes
5. Interação: Curtir, comentar e compartilhar fotos no modal

Estrutura do Projeto

flutt_av1/
├── lib/
│   ├── main.dart                    # Ponto de entrada da aplicação
│   ├── screens/
│   │   ├── login_screen.dart        # Tela de login com validação
│   │   └── profile_screen.dart      # Tela de perfil estilo Instagram
│   └── widgets/
│       └── photo_detail_modal.dart  # Modal de visualização de fotos
├── android/                         # Configurações Android
├── assets/                          # Assets locais (vazios)
├── pubspec.yaml                     # Dependências do projeto
└── README.md                        # Documentação

Dependências

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.8
  font_awesome_flutter: ^10.7.0

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^5.0.0

APIs Utilizadas

• Picsum Photos - Imagens aleatórias para perfil, destaques e grade de fotos

Status do Projeto

• Compilação: Sem erros ou warnings
• Flutter Analyze: 0 problemas detectados
• Funcionalidade: Todas as features implementadas
• Performance: Otimizado com loading states
• Responsividade: Compatível com diferentes telas
• Material Design 3: Interface moderna e consistente

Melhorias Futuras

• Implementar telas para Home, Search, Add e Reels
• Adicionar autenticação real com Firebase
• Implementar upload de fotos
• Adicionar sistema de comentários real
• Implementar stories funcionais
• Adicionar modo escuro personalizado