🧠 Freud UI Challenge App

A Flutter project to challenge myself by recreating a stunning and highly complex UI from the Freud UI Kit: AI Mental Health App on Figma.

---

---

✨ Overview

This app is a personal Flutter UI challenge where I set out to build a feature-rich, pixel-perfect UI from the Freud UI Kit (AI Mental Health App) found on Figma.

It includes some of the most difficult UI elements I've ever worked on — from custom shapes, complex scroll interactions, to elegant layered widgets — all built from scratch in Flutter.

While the design is primarily mobile-focused, I’m working to make the layout responsive and adaptable to tablets and wider screens.

---

📱 Features

• 🎨 Stunning design based on Freud UI Kit (Figma)
• 🔧 Custom hand-crafted widgets and animations
• 📏 Responsive UI that adapts to different screen sizes
• 🌍 Device preview support when running the web version
• 🚀 Precompiled APKs in Releases for quick access

---

🧰 Getting Started

✅ Prerequisites

• Flutter SDK
• A Flutter-compatible IDE (VSCode, Android Studio, etc.)
• Chrome or another browser (to test the web version)

📥 Installation

Clone the repository and fetch dependencies:

git clone https://github.com/MoazSalem/Flutter_freud_UI_Kit.git
cd freud-ui-challenge
flutter pub get

---

▶️ Running the App

📱 Mobile

Run the app on an emulator or real device:

flutter run

🌐 Web with Device Preview

To try the app on various screen sizes using the device_preview package:

flutter run -d chrome

💡 You can also enable DevicePreview in main.dart like this:

DevicePreview(
  enabled: true,
  builder: (context) => MyApp(),
);

This lets you simulate multiple screen types inside the browser.

---

▶️ 📸 Preview

Light Mode	Dark Mode

---

📦 Releases

You can try the Web version here

or You can download the latest APK builds from the Releases section.

This makes it easy for others to test the app without building it locally.

---

🍃 Why I Built This

This project is about challenging myself with extremely advanced UI work in Flutter. I wanted to push my boundaries, experiment with creative UI layouts, and improve my skills working with:

• Custom paint and shapes

• Advanced scroll views

• Adaptive layouts

• Animation management

It’s also a fun and visually rewarding experience!

---

🤝 Contributions

This is a personal learning project, but I welcome:

• Opening issues for bugs

• Feedback

• Questions about widget implementation

• UI/UX discussions

Feel free to fork it or use pieces in your own UI work.

---

📄 License

This project is licensed under the MIT License. See LICENSE for details.

---

🔗 Links

• Flutter documentation

• Freud UI Kit on Figma

• Device Preview package

---

🛠️ To Be Done

Here are some of the things I'm still working on or planning to improve:

• ❇️ Implement more screens and widgets
• 🌐 Host the web version of the app for easier previews and demos
• 📱 Improve responsive behavior on tablets and wide screens
• 🔄 Refactor and clean up state management
• 📷 Add more screenshots and demo GIFs to this README

Feel free to suggest or request features via issues!

---