Derex.dev

Dynamic Forms Modal

Concept: A reusable bottom sheet in SwiftUI that displays a set of buttons based on some input criteria. Each button advances to a new “step” or “form screen,” dynamically updated.


Suggested 10-Day Breakdown

Step Focus Description
Step 1 Setup & Modal UI Build the app scaffold and basic bottom sheet modal using .sheet or custom geometry-based layout.
Step 2 Static Buttons Add hardcoded buttons in the modal to explore layout, user taps, and animations.
Step 3 Dynamic Button Model Define a Swift model like FormStep with dynamic content and branching options.
Step 4 Navigation Logic Enable stateful transitions between steps by updating current form state on button tap.
Step 5 Back Button & History Track and implement back navigation using a stack or array of visited steps.
Step 6 Basic Validation Add rules for what qualifies as a “valid” selection before enabling the Next button.
Step 7 Save User Progress Track choices in a dictionary or user state model as the form progresses.
Step 8 UI Polish Add animations, color styles, accessibility labels, and overall design smoothing.
Step 9 External Config Load form step data from a local JSON file to simulate a dynamic form pipeline.
Step 10 Shareable Version Refactor into a reusable SwiftUI component, clean up code, and publish to GitHub or blog.
10-day SwiftUI project plan for building a dynamic, branching bottom sheet modal—ideal for mastering Swift fundamentals via playful iteration.

How to Think About the Logic

You could model the forms like this:

struct FormStep: Identifiable {
    let id: String
    let title: String
    let options: [FormOption]
}

struct FormOption {
    let label: String
    let nextStepID: String?
}

That way, you can define a flow like this:

[
  {
    "id": "start",
    "title": "Choose a category",
    "options": [
      { "label": "Tech", "nextStepID": "techForm" },
      { "label": "Health", "nextStepID": "healthForm" }
    ]
  },
  ...
]

Each form step updates the state, and the modal dynamically renders based on that state.


Would you like me to help scaffold the code for Day 1: building the basic bottom sheet modal and launching it from a button?

Did I make a mistake? Please consider Send Email With Subject