8080.AI
DesignReqsTasksUser FlowArchitecture
Log inSign up for free

coral-complete-temp

byDeveloper infibrain

I want you to build the complete Flutter App UI based on this above images: Your task is to inspect the complete Figma file and recreate the entire mobile application UI in Flutter as accurately as possible. ## Goal Create a production-quality Flutter UI that matches the Figma design closely. Do NOT implement only one screen. Inspect all frames/screens in Figma and implement the whole app, including: * Splash * Onboarding * Login/Signup * Home * Detail screens * Profile * Settings * Bottom navigation * Forms * Lists * Cards * Dialogs * Bottom sheets * Tabs * Empty/loading states * Other screens available in Figma Implement every visible Figma screen. ## Technical Requirements Use: * Latest stable Flutter * Dart null safety * Material 3 where suitable * Clean reusable widgets * Responsive UI * Proper navigation * Centralized colors * Centralized typography * Centralized spacing * Organized assets * Clean feature-based architecture Avoid unnecessary third-party packages. If Flutter SDK can handle something, do not add an external dependency. ## First Analyze Figma Before coding, inspect the complete Figma file. Identify: * All screens * Navigation flow * Reusable components * Colors * Fonts * Typography * Spacing * Padding/margins * Border radius * Shadows * Icons * Images * Buttons * Text fields * Cards * Lists * Tabs * Bottom navigation * Dialogs * Bottom sheets * Selected/unselected states First provide a short inventory of screens/components, then immediately start implementation. ## Architecture Use a clean folder structure similar to: lib/ main.dart app.dart core/ constants/ theme/ utils/ widgets/ features/ splash/ onboarding/ auth/ home/ profile/ settings/ Add/remove feature folders based on the actual Figma. Do not place the entire application in one Dart file. Extract reusable components. ## Theme Create centralized theme files such as: core/theme/app_colors.dart core/theme/app_text_styles.dart core/theme/app_theme.dart core/constants/app_spacing.dart core/constants/app_radius.dart core/constants/app_assets.dart Extract the actual Figma colors. Do not scatter hardcoded colors throughout the app. ## Typography Match Figma typography as accurately as possible: * Font family * Font size * Font weight * Line height * Letter spacing * Text colors Create reusable text styles. If the exact font is unavailable, use the closest suitable font and mention the substitution. ## Responsive UI The app must support different mobile screen sizes. Do NOT build the UI by hardcoding the complete Figma screen dimensions like: width: 375 height: 812 Prefer: * Expanded * Flexible * LayoutBuilder * MediaQuery when necessary * AspectRatio * FractionallySizedBox * Constraints * Proper padding Small fixed values are fine for icons, avatars, border radius, etc. The UI must avoid: * RenderFlex overflow * Text clipping * Horizontal overflow * Broken layouts on small devices Support common screen widths such as: 320, 360, 375, 390, 412, 430. ## Reusable Widgets Create reusable widgets for repeated components, for example: AppPrimaryButton AppSecondaryButton AppTextField AppSearchField AppCard AppIconButton AppSectionHeader AppBottomNavigation AppEmptyState AppLoadingPlaceholder Do not duplicate identical UI code across screens. ## Figma Accuracy Match Figma closely, including: * Alignment * Padding * Margins * Font sizes * Font weights * Colors * Backgrounds * Button heights * Field heights * Border radius * Borders * Shadows * Divider thickness * Icon size * Image aspect ratio * Card size * Bottom navigation Do NOT redesign or "improve" the Figma. Reproduce the design. ## Assets Organize assets properly: assets/ images/ icons/ illustrations/ Configure assets in pubspec.yaml. Use the original Figma assets whenever available. If an asset cannot be accessed, add a clear placeholder and TODO with the required asset name. Do not silently replace important artwork with unrelated icons. ## Navigation Implement the user flow shown in Figma. Connect screens through: * Buttons * Cards * Tabs * Bottom navigation * Back buttons * Other interactions Use Flutter Navigator unless another navigation solution is genuinely required. Do not add a heavy routing dependency unnecessarily. ## Forms For forms implement proper: * TextEditingController * Password visibility * Keyboard type * Focus behavior * Validation-ready structure * Prefix/suffix icons * Error UI where shown * Enabled/disabled states Backend/API integration is NOT required yet. ## Lists and Scrolling Use the correct Flutter widget: * ListView * ListView.separated * GridView * CustomScrollView * SliverList * SingleChildScrollView only where suitable Avoid unnecessary nested scroll views. Keep scrolling performant. ## Interactions Implement UI interactions shown or implied in Figma: * Navigation * Tab switching * Bottom navigation * Password show/hide * Checkbox * Radio buttons * Switches * Favorite/bookmark * Quantity buttons * Dropdowns * Dialogs * Bottom sheets * Expand/collapse Use realistic static/mock data where API data would normally appear. Structure mock data so APIs can easily replace it later. ## Loading UI If Figma contains loading/skeleton states, implement them. Avoid third-party shimmer packages unless absolutely necessary. Prefer a lightweight custom Flutter loading animation. Do not duplicate entire screens just to create skeleton loaders. ## Safe Area Handle: * Device notch * Status bar * Bottom gesture/navigation area Use SafeArea only where appropriate so it does not create incorrect Figma spacing. ## Code Quality Follow these rules: * Use const constructors when possible * Avoid giant build() methods * Extract meaningful widgets * Avoid duplicate code * Use descriptive names * Avoid unnecessary abstractions * Avoid excessive magic numbers * Keep code maintainable * Make sure all imports are correct * Make sure the project compiles ## Deliverables Actually create/update the Flutter files. Do not only explain or provide sample code. Implement all Figma screens screen-by-screen. For every screen: 1. Inspect Figma. 2. Build the Flutter screen. 3. Match the design. 4. Extract reusable widgets. 5. Connect navigation. 6. Continue to the next screen. Do not stop after creating a demo or first screen. ## Final Verification Before finishing, verify: * All Figma screens are implemented * No important UI is missing * Navigation works * Colors match * Fonts match * Spacing matches * Assets are configured * UI is responsive * No overflow errors * No duplicated UI code * No unnecessary dependencies * flutter analyze passes * Application compiles successfully Fix all errors and warnings caused by your implementation. You have permission to create, modify, move, delete, and refactor Flutter project files required for this task. Do not repeatedly ask for confirmation. If something in Figma is unclear, make the most reasonable design-matching assumption and continue. Start by inspecting the complete Figma file, list the screens/components briefly, and then build the entire Flutter UI.

LandingLogin/SignupSettingsHomeProfileSplashCheckoutDetail screens
Landing

Comments (0)

No comments yet. Be the first!

System Requirements

System Requirement Document
Page 1 of 9

System Requirements Document for coral-complete-temp

Introduction

The coral-complete-temp project aims to develop a production-quality Flutter mobile application UI that closely matches the provided Figma design. The application will include all visible screens and components, ensuring a responsive and user-friendly interface.

System Overview

The application will be developed using Flutter with Dart null safety, adhering to Material 3 design principles where suitable. The UI will be responsive, supporting various mobile screen sizes, and will avoid unnecessary third-party packages. The project will follow a clean, feature-based architecture with centralized themes and reusable widgets.

Product Interpretation and Delivery Boundary

The application will deliver a complete mobile shopping experience, including splash, onboarding, login/signup, home, detail screens, profile, settings, and more. The UI will be implemented based on the provided Figma design, ensuring visual fidelity and responsive layouts. Backend/API integration is not required at this stage; mock data will be used where necessary.

Page Content and Component Coverage

Page 2 of 9

Landing

  • Information/State: Introduction to ShopPro, language selection.
  • Primary Actions: Language selection, proceed to onboarding.
  • Components: Language buttons, next button.
  • States: Initial load, language selected.

Splash

  • Information/State: ShopPro branding.
  • Primary Actions: Transition to onboarding.
  • Components: Logo, loading animation.
  • States: Initial load, transition.

Onboarding

  • Information/State: Product choice, secure payments, exciting deals.
  • Primary Actions: Navigate through slides, skip, proceed to login/signup.
  • Components: Slides, navigation dots, skip button, next button.
  • States: Slide transitions, skip.

Login/Signup

  • Information/State: User authentication.
  • Primary Actions: Login, signup, password visibility toggle.
  • Components: Text fields, buttons, password toggle.
  • States: Input validation, error display.
Page 3 of 9

Home

  • Information/State: Main shopping interface.
  • Primary Actions: Browse products, navigate to detail screens.
  • Components: Product cards, bottom navigation.
  • States: Loading, empty state, error.

Detail Screens

  • Information/State: Product details.
  • Primary Actions: Add to cart, favorite, share.
  • Components: Product images, description, action buttons.
  • States: Loading, error.

Checkout

  • Information/State: Payment process.
  • Primary Actions: Enter payment details, confirm purchase.
  • Components: Form fields, confirm button.
  • States: Validation, error.

Profile

  • Information/State: User account details.
  • Primary Actions: Edit profile, view order history.
  • Components: Profile picture, edit button, order list.
  • States: Loading, error.
Page 4 of 9

Settings

  • Information/State: App settings, language, account settings.
  • Primary Actions: Change settings, logout.
  • Components: Toggle switches, dropdowns.
  • States: Save confirmation, error.
Page 5 of 9

Functional Requirements

  1. As a Shopper, I should be able to select a language on the Landing page to proceed to Onboarding.

    • Provenance: Required inference.
    • Lifecycle Facts: Initial load, language selection, proceed.
    • Observable Acceptance: Language buttons function correctly.

  2. As a Shopper, I should be able to navigate through Onboarding slides and proceed to Login/Signup.

    • Provenance: Explicit.
    • Lifecycle Facts: Slide transitions, skip option.
    • Observable Acceptance: Navigation dots and buttons work as expected.

  3. As a Shopper, I should be able to log in or sign up to access the Home page.

    • Provenance: Explicit.
    • Lifecycle Facts: Input validation, authentication.
    • Observable Acceptance: Login/signup process completes successfully.

  4. As a Shopper, I should be able to browse products on the Home page and view details on Detail screens.

    • Provenance: Explicit.
    • Lifecycle Facts: Product browsing, detail navigation.
    • Observable Acceptance: Product cards and navigation function correctly.

  5. As a Shopper, I should be able to complete a purchase on the Checkout page.

    • Provenance: Required inference.
    • Lifecycle Facts: Payment details entry, confirmation.
    • Observable Acceptance: Checkout process completes without errors.

  6. As a Shopper, I should be able to view and edit my profile information on the Profile page.

    • Provenance: Explicit.
    • Lifecycle Facts: Profile viewing, editing.
    • Observable Acceptance: Profile updates are saved correctly.

  7. As a Shopper, I should be able to change app settings on the Settings page.

    • Provenance: Explicit.
    • Lifecycle Facts: Settings modification, logout.
    • Observable Acceptance: Settings changes are applied successfully.
Page 6 of 9

User Personas

  • Shopper: The primary user who interacts with the app to browse products, make purchases, and manage account settings.
Page 7 of 9

Core User Flows

  1. Landing to Onboarding:

    • Steps: Open app → Select language → Proceed to onboarding.
    • Outcome: User is guided to onboarding slides.

  2. Onboarding to Login/Signup:

    • Steps: Navigate slides → Skip or complete → Proceed to login/signup.
    • Outcome: User reaches authentication screen.

  3. Login/Signup to Home:

    • Steps: Enter credentials → Authenticate → Access home.
    • Outcome: User enters main shopping interface.

  4. Home to Detail Screens:

    • Steps: Browse products → Select product → View details.
    • Outcome: User views detailed product information.

  5. Detail Screens to Checkout:

    • Steps: Add to cart → Proceed to checkout → Enter payment details → Confirm purchase.
    • Outcome: Purchase is completed.

  6. Profile Management:

    • Steps: Access profile → Edit information → Save changes.
    • Outcome: Profile updates are saved.

  7. Settings Management:

    • Steps: Access settings → Modify preferences → Save changes.
    • Outcome: Settings are updated.
Page 8 of 9

Visuals Colors and Theme

  • Palette:

    • Background: #FDF8F3
    • Surface: #FFFFFF
    • Text: #333333
    • Primary: #FF6F61
    • Accent: #FFD700
    • Muted: #A8A8A8

  • Typography:

    • Headings: Nunito, Bold
    • Body: DM Sans
    • Scale: 48/32/24/18/16

  • Shape Language: Rounded edges, pill-shaped buttons.

  • Imagery: Modular vector illustrations, hand-drawn accents.

Signature Design Concept

  • Hero: Full-width vector illustration with a bold CTA button.
  • Signature Moves: Large radii on cards, pill-shaped buttons, playful animations.

Interaction Model & Motion Direction

  • Interaction Model: Animated
  • Motion Tempo: Expressive
  • Hero Dimensionality: Layered_2d
  • Landing Hero Motion Brief: A friendly vector illustration with a bold CTA button, using springy animations for interactions.
Page 9 of 9

Non-Functional Requirements

  • Performance: Ensure smooth animations and transitions.
  • Accessibility: Support screen readers and high contrast modes.
  • Security: Protect user data and authentication processes.

Tech Stack

  • Frontend: Flutter, Dart
  • Design: Material 3
  • Architecture: Feature-based folder structure

Assumptions and Constraints

  • Assumptions:

    • The Figma design is the final reference for UI implementation.
    • Mock data will be used for all dynamic content.

  • Constraints:

    • Avoid unnecessary third-party packages.
    • Ensure the UI is responsive and matches the Figma design closely.

Glossary

  • Figma: A design tool used for creating the UI mockups.
  • Flutter: An open-source UI software development kit created by Google.
  • Dart: A programming language optimized for building mobile, desktop, server, and web applications.
  • Material 3: The latest version of Google's open-source design system.
Landing design preview
Landing: Select language
Splash: View branding
Onboarding: Navigate slides
Onboarding: Skip onboarding
Login/Signup: Sign up
Login/Signup: Log in
Home: Browse products
Detail screens: View product details
Detail screens: Add to cart
Checkout: Enter payment details
Checkout: Confirm purchase
Profile: View order history
Profile: Edit profile
Settings: Change settings
Settings: Logout
Landing design preview
Landing: Select language
Splash: View branding
Onboarding: Navigate slides
Onboarding: Skip onboarding
Login/Signup: Sign up
Login/Signup: Log in
Home: Browse products
Detail screens: View product details
Detail screens: Add to cart
Checkout: Enter payment details
Checkout: Confirm purchase
Profile: View order history
Profile: Edit profile
Settings: Change settings
Settings: Logout