🎨 Neomorphic Chat Flutter

A Flutter Chat Application with Modern Neomorphic Design

📖 Overview

Neomorphic Chat Flutter is a modern chat application that showcases advanced Flutter development skills, clean architecture principles, and beautiful neomorphic UI design. Built as a technical demonstration, this project implements a complete authentication system with persistent sessions and an interactive chatbot interface.

Note: This project was developed as a technical assignment to demonstrate Flutter development capabilities, clean architecture implementation, and modern UI/UX design skills.

📱 App Screenshots

🚀 Onboarding Experience


Welcome Screen	Feature Highlights	Design Showcase	Get Started

🔐 Authentication Flow


User Registration	Secure Login

💬 Chat Interface

Interactive Chat Experience

✨ Key Features

🔐 Authentication System

User Registration with comprehensive form validation
Secure Login with credential verification
Persistent Sessions using SharedPreferences
Professional Onboarding experience with smooth transitions
Secure Logout with confirmation dialogs

💬 Chatbot Interface

Interactive Chat with message bubbles and input field
Smart Bot Responses with keyword-based logic
Conversation Management with clear chat functionality
Real-time Message Updates with smooth animations
Responsive Design across different screen sizes

🎨 UI/UX Excellence

Neomorphic Design Language with soft shadows and depth
Custom Widget Library for consistent design patterns
Typography System with Poppins font family
Adaptive Icons with proper Android implementation
Smooth Animations and micro-interactions

🏗️ Architecture & Technical Stack

Clean Architecture Implementation

Business logic
Models (User, ChatMessage)
Repository interfaces

3. Data Layer

Repository implementations
Data sources (local storage)
External services

📋 State Management with BLoC

The app uses the BLoC (Business Logic Component) pattern for state management, which:

📁 lib/
├── 🔐 Auth/                    # Authentication Layer
│   ├── bloc/                   # BLoC State Management
│   │   ├── auth_bloc.dart      # Business Logic Component
│   │   ├── auth_event.dart     # User Actions & Events
│   │   └── auth_state.dart     # Application States
│   ├── auth_provider.dart      # Abstract Auth Interface
│   ├── auth_service.dart       # Authentication Service
│   ├── cache_manager.dart      # Local Storage Management
│   ├── exception.dart          # Custom Exception Handling
│   └── mock_auth_provider.dart # Mock Implementation
│
├── 📊 models/                  # Data Models
│   ├── chat_message.dart       # Chat Message Structure
│   ├── onboarding_page_model.dart # Onboarding Data
│   └── user_model.dart         # User Data Structure
│
├── 📱 screens/                 # Presentation Layer
│   ├── home_screen.dart        # Main Chat Interface
│   ├── onboarding_page.dart    # User Onboarding
│   ├── register_page.dart      # User Registration
│   └── sign_in_page.dart       # User Authentication
│
├── 🛠️ utilities/               # Shared Components
│   ├── widgets/                # Custom Widget Library
│   │   ├── button_neomorphic.dart     # Neomorphic Buttons
│   │   ├── chat_bubble_neomorphic.dart # Chat UI Components
│   │   ├── chat_input_neomorphic.dart  # Message Input Widget
│   │   ├── dialog_neomorphic.dart      # Custom Dialog System
│   │   ├── logo_neomorphic.dart        # Branded Logo Widget
│   │   └── textfield_neomorphic.dart   # Input Field Components
│   └── Text_styles.dart        # Typography System
│
└── 🚀 main.dart               # Application Entry Point

Technology Stack

Framework: Flutter 3.7.2+
Language: Dart
State Management: BLoC Pattern
Local Storage: SharedPreferences
Architecture: Clean Architecture
Design: Neomorphic UI/UX
Font: Poppins Typography

🎨 Design Philosophy

Neomorphic Design Elements

The application implements a comprehensive neomorphic design system featuring:

Soft UI Elements: Subtle shadows and highlights creating depth
Consistent Color Palette: Neutral grays with accent colors
Smooth Interactions: Gentle animations and state transitions
Accessibility Focus: High contrast and readable typography
Modern Aesthetics: Clean, minimalist interface design

Custom Component Library

All UI components are custom-built following neomorphic principles:

Reusable button components with consistent styling
Chat bubbles with depth and shadow effects
Input fields with soft, inset appearance
Dialog systems with branded styling │ └── sign_in_page.dart # User login │ ├── utilities/ # Utility classes and widgets │ ├── widgets/ # Reusable widgets │ │ ├── button_neomorphic.dart # Custom buttons │ │ ├── chat_bubble_neomorphic.dart # Chat bubbles │ │ ├── chat_input_neomorphic.dart # Message input

🚀 Getting Started

Prerequisites

Flutter SDK (3.7.2 or higher)
Dart SDK
Android Studio / VS Code
Android Emulator or Physical Device

Installation

Clone the repository

git clone https://github.com/your-username/neomorphic_chat_flutter.git
cd neomorphic_chat_flutter

Install dependencies
```
flutter pub get
```
Generate app icons
```
flutter pub run flutter_launcher_icons
```
Run the application
```
flutter run
```

Building for Release

Build APK
```
flutter build apk --release
```
Build App Bundle (for Google Play Store)
```
flutter build appbundle --release
```

� App Walkthrough

Authentication Flow

Onboarding Screen: Welcome interface with app introduction
Registration: Create account with email/password validation
Login: Secure authentication with credential verification
Session Management: Automatic login for returning users

Chat Experience

Welcome Message: Automated greeting upon login
Interactive Chat: Type messages and receive bot responses
Smart Responses: Keyword-based bot logic for demonstrations
Conversation Management: Clear chat history when needed

Demo Bot Commands

Try these sample interactions:

"hi" or "hello" → Greeting response
"help" → Available commands
"joke" → Random joke
"weather" → Weather information
"time" → Current time

🧪 Technical Highlights

State Management with BLoC

Predictable State: Unidirectional data flow
Separation of Concerns: Business logic separated from UI
Testability: Easy unit testing of business logic
Scalability: Clean state management for complex apps

Authentication Architecture

// Example: Authentication Event Handling
class AuthBloc extends Bloc<AuthEvent, AuthState> {
  AuthBloc() : super(AuthStateLoggedOut()) {
    on<AuthEventSignUp>(_onSignUp);
    on<AuthEventSignIn>(_onSignIn);
    on<AuthEventSignOut>(_onSignOut);
  }
}

Custom Widget Implementation

// Example: Neomorphic Button Component
Widget neomorphicButton({
  required String text,
  required VoidCallback onPressed,
  Color? color,
}) {
  return Container(
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(15),
      boxShadow: [
        // Neomorphic shadow implementation
      ],
    ),
    // Button implementation
  );
}

📊 Project Metrics

Lines of Code: ~2,000+
Custom Widgets: 8 reusable components
Screens: 4 main application screens
Models: 3 data structure implementations
Architecture Layers: 3-tier clean architecture

🛡️ Security & Best Practices

Input Validation: Comprehensive form validation
Error Handling: Custom exception management
Code Organization: Clean architecture principles
Documentation: Comprehensive code comments
Git Workflow: Professional commit practices

🤝 Contributing

This project welcomes contributions! Here's how you can help:

Fork the repository
Create a feature branch: git checkout -b feature/amazing-feature
Commit changes: git commit -m 'Add amazing feature'
Push to branch: git push origin feature/amazing-feature
Open a Pull Request

Development Guidelines

Follow Flutter/Dart style guidelines
Maintain clean architecture principles
Add tests for new features
Update documentation as needed

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

Flutter Team for the incredible framework
BLoC Library developers for state management solution
Neomorphic Design community for UI inspiration
Open Source contributors and maintainers

📞 Contact

Vineet - Flutter Developer

🐱 GitHub: @DevNebula

⭐️ Star this repository if you found it helpful!

Built with ❤️ using Flutter

⭐️ If you find this project helpful, please give it a star on GitHub! ⭐️

Name		Name	Last commit message	Last commit date
android		android
assets		assets
ios		ios
lib		lib
linux		linux
macos		macos
screenshorts		screenshorts
web		web
windows		windows
.gitignore		.gitignore
.metadata		.metadata
CHANGELOG.md		CHANGELOG.md
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
analysis_options.yaml		analysis_options.yaml
pubspec.lock		pubspec.lock
pubspec.yaml		pubspec.yaml

Latest commit

History

Folders and files

Repository files navigation