rohansurve.in

    UI Screens

    Free
    UI Blocks
    1. Home
    2. >
    3. UI Screens
    4. >
    5. Settings
    6. >
    7. Profile & Settings Screen

    Profile & Settings Screen

    Settings
    flutter-ui
    mobile-app-design
    ui-template
    cursor-ai-prompt
    app-screen-design
    frontend-ui

    A customizable Flutter UI screen for a profile and settings section.

    5 views1 copies
    Twitter/XWhatsApp

    Build this screen in 2 simple steps

    1

    Copy the prompt below

    This prompt includes design specs extracted from this screen.

    Convert this HTML into a Flutter UI screen. Create reusable components/widgets first, then make it responsive. Extracted design specs: 
   - Background color: #fbfcfe
   - Foreground color: #0f1724
   - Border radius values: 4px, 6px, 8px, 12px
   - Font family: Inter
   - Font sizes: 17px, 20px, 15px, 11px
   - Shadows: 0 2px 8px rgba(0, 0, 0, 0.05)
   - Gradients: None
   - Padding: 16px 20px, 20px, 4px
   [PASTE YOUR HTML CODE BELOW]
    2

    Paste in Cursor

    Open Cursor in your Flutter project. Paste the prompt, then paste your HTML below the [PASTE YOUR HTML CODE BELOW] line.

    Cursor will generate Flutter UI to match this design.

    Pro tip: works best with Cursor Composer mode (Cmd+I).

    More Settings Screens

    You might also like

    FREE
    Finance & Wallet

    Payment Method Selection UI

    Finance & Wallet8 views
    FREE
    Food & Restaurant

    Clean Shopping Cart UI

    Food & Restaurant8 views
    FREE
    E-commerce

    E-commerce Seasonal Decor Catalog

    E-commerce8 views
    FREE
    Login & Auth

    Login and Authentication Screen

    Login & Auth7 views