Flutter Dating App UI for Android and iOS

Introduction

Flutter Dating App UI Kit for Android & iOS is a modern dating app template built with Flutter. Ships polished screens covering the full user dating journey — from onboarding sign up steps to Discovery screen with Tinder-like profile cards swiping, matches screen, who likes you screen, chats screen, video calls screen, premium plans screen, and everything you need to launch a modern dating app. Designed with a sleek dark theme for premium look and feel. Perfect for those who want to save time on UI design and focus on backend integration.

Important: This item is a Dating UI Kit (screen templates + components). It is not a complete, ready-to-publish app. You will need to connect it to your own backend/API to make it fully functional. If you need a full solution or any customization feel free to contact us via WhatsApp.

UI Screens Kit

Splash Screen

• Animated app logo entrance with fade-in effect
• Auto-navigates to Login screen after a short delay

Login Screen

• Email and password login
• Google Sign-In button
• Apple Sign-In button
• Link to Sign Up and Forgot Password screens

Sign Up Screen

• 4-step guided onboarding flow with progress steps:
• Step 1: Register account info
• Step 2: Profile info
• Step 3: Gallery photos
• Step 4: Location info

Discover Screen (Home)

• Tinder-style profile swipe cards stack: Swipe Right to like, Left to pass, UP to super-like
• Each card shows profile photos with a multi-photo carousel
• Profile card with info such as: name, age, distance, interests, and looking for
• Quick-view profile page with full bio and other details
• Discover Filter modal to adjust the user’s preference such as: age range, distance radius, and “show me” options
• Action buttons: pass, like and super-like

Matches Screen

• Two tabs: Matches (mutual likes) and Likes (who liked you)
• Grid of matched profile cards with names and other details
• Premium-locked “Likes” tab UI (blurred profiles grid with upgrade prompt)

Chats Screen

• Search chats bar
• “New Matches” profile avatars list on horizontal carousel at the top
• Chats list with avatar, name, last message preview, timestamp, and unread badge counters

Message Screen

• Message bubbles with timestamps
• Online status indicator
• Video call shortcut button
• Photo picker & text input with send button

Video Call Screen

• Full-screen video call layout
• PiP (picture-in-picture) self-view
• Caller name and elapsed call timer
• Control buttons: mute, camera toggle, end call

User Profile Screen

• Full-screen profile details with main photo and gallery photos
• Name, age, location, verification and online badges
• Bio, interest list and looking-for preference
• Action buttons: like, super-like, pass

Edit Profile Screen

• Manage profile details
• Edit display name, bio, gender and date of birth
• Add/remove gallery photos
• Edit interest list and looking-for preference

My Profile Screen

• Current user’s profile info
• Shortcut buttons to Edit Profile and View Profile screens
• Verification badge display
• Location info display
• General app navigation links to account page and other options

Notifications Screen

• Activity feed list
• Notification types: match, super-like, and system alerts
• Read / unread notifications badge
• Relative timestamps (e.g. “2 minutes ago”)

Premium Plans Screen

• List subscription plans
• Listed exclusive benefits for premium members
• Pricing tier cards (e.g. monthly, 3-months & yearly)
• Subscribe CTA button

Account Screen

• Displays email and login provider
• Logout button with confirmation dialog
• Delete account button with confirmation dialog

Download the Android Demo APK

Download Demo APK

Design System

Theme: Dark-only Primary Color: Vibrant Pink / Magenta Accent Color: Gold Background: Black Font: Sora (Google Font) Architecture: MVC + GetX state management

Organized Project Structure

lib/
├── config/            # central app config for constant values
├── components/        # reusable widgets (buttons, avatars, chips, skeletons)
├── dialogs/           # match celebration, alerts, report user, processing dialogs
├── models/            # User, Message, Chat, Match, Like, Swipe, Notification
├── screens/           # full-page screens (auth, splash, home, account, notifications, ...)
├── tabs/              # bottom-nav tabs (Discover, Matches, Chats, Profile)
├── controllers/       # GetX controllers per page feature
└── routes/            # named routes config (app_pages.dart, app_routes.dart)

Project Requirements

• Install latest Flutter v3.41.x
• Latest Android Studio and Java 17 to run your Android app
• Latest Xcode to run your iOS app
• Recommended code editor: Visual Studio Code (VS Code)

Support

If you have questions or need customisations, a full functional solution, or a ready-to-publish app, please reach out via email: info.dating.app@gmail.com or chat on WhatsApp for faster communication.

Changelog

v1.0.2 — Brand New UI Desgin Kit

• New Design Architecture using MVC
• New State management using GetX
• Organized Project Structure for scalable project