A full-featured Flutter app that replicates the core UI experience of Facebook’s mobile app. This project is designed to showcase modern UI techniques, stateful/stateless architecture, and component modularization using Flutter.
- Learn and apply Flutter widget composition
- Replicate a real-world app interface (Facebook)
- Practice layout structuring, image assets usage, and responsive design
- Modularize code for reusability and scalability
Displays the centered Facebook logo with branding at the bottom (“From Meta”).
Allows users to enter credentials with UI elements for email, password, forgotten password link, and a CTA for creating a new account.
Includes a scrollable post feed, stories section, AppBar with Facebook-style actions, and styled story cards with overlays.
- Facebook-style AppBar with title and action icons (add, search, chat)
- Fully scrollable stories section with dynamic images and labels
- Scrollable post feed using
ListView.builder - Like, comment, share, and bookmark icons
+button on "Create Story" with overlay position
- Matching Facebook color palette (blue, white, gray tones)
- Circular avatars, rounded corners, and gradient overlays
- Fully responsive using device width
- Stateless widgets where possible
- Stateful upgrade-ready (can add state interactions later)
- Code split into logical components:
StoriesWidgetandPostWidget
- Flutter SDK: 3.8+
- Dart for programming
- Material Design components
- Asset-based splash screen with
flutter_native_splash
To run this project locally:
- Clone this repository:
git clone https://github.com/YOUR_USERNAME/facebook_ui_flutter.git
cd facebook_ui_flutter- Get dependencies:
flutter pub get- Run on emulator or device:
flutter runMake sure your assets are correctly declared in
pubspec.yaml
lib/
├── main.dart # Entry point
│ ├── login_screen.dart # Login form UI
│ └── home_screen.dart # Main home screen with posts and stories
├── widgets/
│ ├── stories_widget.dart # Stories carousel widget
│ └── post_widget.dart # Post list widget
assets/
├── logo.png
├── meta_brand.png
├── model1.png, model2.png, etc.
├── route_post.png, route_prof.png
└── screenshots/
├── splash_screen.png
├── login_screen.png
└── home_screen.png- Add real-time stories and post content
- Implement Firebase login/authentication
- Add animations and post reactions
- Dark mode theming
- Backend integration to fetch data
Fager Hussein
Flutter Developer & UI Enthusiast