Portal

Installation

implementation("com.composables:composeunstyled-portal")

Anatomy

PortalHost {
  Portal {
    BasicText("Portal content")
  }
}

Concepts

• PortalHost provides the destination where portal content is rendered.
• Portal sends content to the nearest PortalHost, or renders nothing when no host is available.
• Portal content is rendered after the host content, inside the same window.

Code Examples

Rendering content in a portal

Place PortalHost above the content that needs to render portals:

PortalHost {
  BasicText("Screen content")

  Portal {
    BasicText("Portal content")
  }
}

Showing portal content conditionally

Add or remove the Portal from composition to control whether its content is rendered:

var showPortal by remember { mutableStateOf(false) }

PortalHost {
  BasicText(
    text = "Show portal",
    modifier = Modifier.clickable { showPortal = true }
  )

  if (showPortal) {
    Portal {
      BasicText("Portal content")
    }
  }
}

Hosting multiple portals

A single PortalHost can render content from multiple Portal calls:

PortalHost {
  Portal {
    BasicText("First portal")
  }

  Portal {
    BasicText("Second portal")
  }
}

API Reference

PortalHost

Portal