Flare

The flare enables you to display content with a pointer to directional content.

Flare

Maven Central Class reference Source code

Default

Day Night
Flare component Flare component - dark mode

Installation

Backpack Compose is available through Maven Central. Check the main Readme for a complete installation guide.

Usage

Example of a Flare:


                                                
                                                import net.skyscanner.backpack.compose.flare.BpkFlare
                                                
                                                BpkFlare {
                                                  // content
                                                }

Example of a Flare pointing up:


                                                
                                                import net.skyscanner.backpack.compose.flare.BpkFlare
                                                
                                                BpkFlare(pointerDirection = BpkFlarePointerDirection.Up) {
                                                  // content
                                                }

Example of a Flare with rounded corners:


                                                
                                                import net.skyscanner.backpack.compose.flare.BpkFlare
                                                
                                                BpkFlare(radius = BpkFlareRadius.Medium) {
                                                  // content
                                                }

Example of a Flare with content inset to take the flare into account when arranging the content:


                                                
                                                import net.skyscanner.backpack.compose.checkbox.BpkChecbox
                                                
                                                BpkFlare(background = BpkTheme.colors.primary, insetContent = true) {
                                                  // content
                                                }