A pixel-perfect, feature-rich Instagram Home Feed UI/UX replica built with Flutter.
A pixel-perfect, feature-rich Instagram Home Feed replica built with Flutter and BLoC pattern. This project demonstrates a production-grade approach to building modern social media UI with smooth animations, infinite scrolling, theme adaptation, and responsive interactions.
InstaFeed is a meticulous recreation of Instagram's core home feed experience, focusing on:
- Exact visual parity with the original app (spacing, typography, colors)
- Smooth, responsive interactions (double-tap like, pinch-to-zoom, swipeable carousel)
- Adaptive dark/light theming responding to system preferences
- Infinite feed pagination with optimized rendering
- Production-ready architecture using industry-standard patterns
This project reflects what a real Instagram feed implementation looks like under the hood—handling state, animations, and UX polish.
✅ Home Feed Composition
- Stories tray with gradient ring avatars (seen/unseen states)
- "Your story" bubble with add badge
- Feed post cards (header → media → actions → caption)
✅ Post Interactions
- ❤️ Like toggle with elastic animation
- 💬 Comment count display
- 📌 Save bookmark toggle
- 🔄 Share/send feature hint
✅ Media Handling
- Single & multi-image posts
- Pinch-to-zoom gesture on images
- Carousel navigation (next/prev swipe)
- Loading skeleton (shimmer effect)
- Cached image optimization
✅ Double-Tap Like
- Instagram-style animated heart overlay on media double-tap
- Auto-like on second tap (if not already liked)
- Smooth scale & fade animation
✅ Stories Tray
- Ring-based gradient visualization
- Live badge indicator
- Compact spacing mimicking original
✅ Adaptive Theming
- System dark/light mode detection
- Theme-aware SVG icons (dark/light icon packs)
- Seamless background/text color switching
✅ Infinite Scrolling
- Lazy pagination (loads next batch near bottom)
- Loading spinner on pagination
- Smooth scroll physics with bounce
✅ Top App Bar
- "Instagram" logo (Grand Hotel font)
- Dropdown menu (Following, Favorites)
- Notification heart with red dot
✅ Bottom Navigation
- Home, Search, Create, Reels, Profile tabs
- Theme-aware SVG icons
- Selected state handling
✅ Splash Screen
- System-theme-aware startup screen
- Instagram logo + Meta branding
- 2-second showing duration
- Comments section
- DM/Messenger
- Reels playback
- Following/Favorites feed switching
- Profile view
- Search functionality
- Flutter 3.5+ – Cross-platform mobile UI toolkit
- Uses Material Design 3 for modern component styling
- Responsive layout handling via MediaQuery
- flutter_bloc 9.1.1 – Event-driven state management
FeedBlochandles feed state: loading, pagination, like/save togglesEquatablefor state value comparison (prevents unnecessary rebuilds)- Predictable unidirectional data flow
- google_fonts 6.2.1 – Typography (Inter, Grand Hotel)
- flutter_svg 2.2.4 – SVG rendering for icons & logos
- shimmer 3.0.0 – Loading skeleton animations
- cached_network_image 3.4.1 – Image caching & optimization
- get_it 8.0.3 – Service locator for repositories & BLoC
- go_router 15.1.2 – Modern Flutter routing (future expansion)
- flutter_lints 6.0.0 – Code quality & best practices
- bloc_test 10.0.0 – BLoC unit testing
- flutter_launcher_icons 0.14.4 – App icon generation
lib/
├── main.dart # App entry point
├── app.dart # App root + splash flow
│
├── screens/
│ ├── home/
│ │ └── home_screen.dart # Feed composition + bottom nav
│ └── splash/
│ └── splash_screen.dart # Startup splash
│
├── blocs/
│ └── feed/
│ ├── feed_bloc.dart # State management logic
│ ├── feed_event.dart # User actions (Like, LoadMore)
│ └── feed_state.dart # Feed states (Loading, Loaded, Error)
│
├── repositories/
│ ├── post_repository.dart # Post data source abstraction
│ ├── story_repository.dart # Story data source abstraction
│ ├── mock_post_repository.dart # Mock implementation
│ └── mock_story_repository.dart
│
├── models/
│ ├── post_model.dart # Post data class (Equatable)
│ ├── story_model.dart
│ └── user_model.dart
│
├── widgets/
│ ├── app_top_bar.dart # SliverAppBar with dropdown
│ ├── post/
│ │ ├── post_card.dart # Card composition
│ │ ├── post_header.dart # Avatar + username + menu
│ │ ├── post_media.dart # Image carousel + double-tap
│ │ ├── post_actions.dart # Like, comment, share, save
│ │ ├── post_caption.dart # Caption + timestamps
│ │ ├── pinch_to_zoom.dart # Zoom interaction
│ │ └── carousel_media.dart # Multi-image swiping
│ ├── stories/
│ │ ├── stories_tray.dart # Horizontal story list
│ │ └── story_bubble.dart # Single story with ring
│ └── shimmer/
│ └── shimmer_widgets.dart # Loading placeholders
│
├── core/
│ ├── di/
│ │ └── injection.dart # DI setup (repositories)
│ └── theme/
│ ├── app_theme.dart # Light/dark theme definitions
│ └── app_colors.dart # Color palette
│
└── assets/
├── icons/
│ ├── dark/ # Dark theme SVG icons
│ └── light/ # Light theme SVG icons
├── splash/ # Splash screen SVG assets
└── logos/ # App logo
UI (HomeScreen)
↓ (dispatches FeedStarted event)
↓
FeedBloc (receives event)
↓ (maps event to state change)
↓
Repository (fetches posts/stories)
↓ (returns data or error)
↓
FeedBloc (emits new state)
↓ (FeedLoaded with posts/stories)
↓
UI Rebuilds (only affected widgets)
- User taps heart or double-taps image
_LikeButtonor_PostMediaStatedispatchesFeedPostLikeToggled(postId)eventFeedBloc._onLikeToggled()updates postisLiked+likeCount- New
FeedLoadedstate emitted with updated posts list PostCardrebuilds with new state- Heart animates with elastic curve, color changes to red
- Flutter SDK 3.5+
- Android SDK / Xcode (for emulator/device)
- Dart 3.5+
-
Clone the repository:
git clone https://github.com/thisisouvik/instafeed.git cd instafeed -
Install dependencies:
flutter pub get
-
Run the app:
flutter run
-
Build APK (Android):
flutter build apk --release
-
Build IPA (iOS):
flutter build ios --release
- Note: This project uses mock data. Replace repositories with real API calls for production use.
- Pixel-Perfect Spacing: Matches Instagram's exact padding/margins (verified against live app)
- Typography: Grand Hotel for header, Inter for body text
- Colors: Material 3 adaptive palette (light mode white, dark mode #000B17)
- Animations:
- Elastic heart bounce on like
- Smooth scale/fade on double-tap overlay
- Shimmer skeleton during load
- Smooth scroll bounce physics
- Lazy Loading: Posts load on-demand as user scrolls
- Image Caching:
cached_network_imagereduces network requests - Optimized Rebuilds:
RepaintBoundaryon post cards +Equatablestates - Memory Efficient: Mock data kept small; real data would use pagination
Run unit tests:
flutter testFuture: Integration tests for critical user flows.
- Instagram Design Team – for the reference UI/UX
- Flutter Community – for exceptional documentation and packages
- BLoC Library – for clean, scalable state management pattern
Q: Is this an official Instagram product?
A: No. This is an open-source educational project demonstrating modern Flutter architecture and UI polish.
Q: Can I use this in production?
A: This is a demo. Use it as a reference for your own projects, but integrate real backend APIs for production use.
Q: Why BLoC and not Provider/Riverpod?
A: BLoC provides excellent separation of concerns and is widely used in production Flutter apps. It's scalable and testable.
Q: How do I connect a real backend?
A: Replace the mock repositories in lib/repositories/ with real HTTP calls using http or dio package.
For issues, questions, or suggestions:
- GitHub Issues: Open an issue
- GitHub Discussions: Start a discussion
Happy coding! 🚀