📩 Mailchimp Contact Sales UI — Flutter

A clean Flutter recreation of the Mailchimp Contact Sales webpage UI.

I built this project to practice turning a real-world web design into a Flutter interface while focusing on clean layouts, form components, spacing, typography, and responsive UI structure.

⚠️ Note: This is an independent UI recreation created for learning and portfolio purposes. It is not an official Mailchimp application.

---

✨ Preview

Contact Sales UI

🛠️ Built With

• Flutter
• Dart
• Material Design
• Responsive UI principles
• Custom form components
• Flutter layout widgets

---

🎯 What I Practiced

While building this interface, I focused on:

• Creating a clean and structured Flutter layout
• Recreating a real-world web interface
• Building reusable form fields
• Working with buttons and dropdowns
• Managing spacing and alignment
• Creating responsive UI sections
• Improving typography and visual hierarchy
• Structuring Flutter widgets cleanly

---

📱 UI Sections

The project includes:

• Navigation bar
• Contact Sales section
• Call Sales button
• Chat button
• Email form
• First and last name fields
• Phone number field
• Business email field
• Company name field
• Website field
• Country dropdown
• Contact count dropdown
• Message field
• reCAPTCHA-style UI element
• Submit button
• Floating chat button

---

📂 Project Structure

lib/
├── main.dart
├── screens/
│   └── contact_sales_screen.dart
├── widgets/
│   ├── custom_text_field.dart
│   ├── custom_dropdown.dart
│   └── custom_button.dart
│
preview/
├── contact_sales_preview.png
└── contact_sales_ui.mp4

---

🚀 Getting Started

1. Clone the repository

git clone http://github.com/hamza-hafeez-dev/mailchimp-contact-sales-ui.git

2. Open the project

Open the project in Android Studio or VS Code.

3. Get dependencies

flutter pub get

4. Run the project

flutter run

---

📸 Preview

The project recreates the overall visual structure of the original Contact Sales design while implementing the interface using Flutter widgets.

---

📚 What I Learned

This project helped me improve my understanding of:

• Flutter widget composition
• Layout and alignment
• Form UI development
• Responsive design
• Reusable widgets
• UI consistency
• Converting a design reference into working Flutter code

---

👨‍💻 About

I'm currently building my skills in Flutter and Dart while coming from a background in Android development with Java.

I use projects like this to turn designs and ideas into working mobile interfaces and continuously improve my Flutter development skills.

---

⭐ Feedback

If you have suggestions for improving the UI or code structure, feel free to open an issue or share your feedback.

If you like the project, consider giving the repository a ⭐.

---

📄 License

This project is created for educational and portfolio purposes.

The Mailchimp name, branding, and original design belong to their respective owners.