SushiViewFlipper

A composable that automatically cycles through multiple content items with animated transitions.

SushiViewFlipper provides a way to display a sequence of items in the same space, automatically transitioning between them with customizable animation. This is useful for displaying rotating promotions, suggestions, or other content that should cycle through multiple options.

Example

The SushiViewFlipper component is used to automatically cycle through different content items:

// Basic usage with a list of items
val searchSuggestions = listOf(
    "Search for \"Pizza\"",
    "Search for \"Burger\"",
    "Search for \"Pasta\"",
    "Search for \"Sushi\"",
    "Search for \"Salad\""
)

// Create a ViewFlipper that cycles through the suggestions
SushiViewFlipper(
    props = SushiViewFlipperProps(
        count = searchSuggestions.size  // Number of items to display
    ),
    modifier = Modifier.fillMaxWidth()
) { index ->
    // Content for each item based on index
    SushiText(
        props = SushiTextProps(
            text = searchSuggestions[index],
            color = SushiTheme.colors.text.secondary
        ),
        modifier = Modifier.padding(16.dp)
    )
}

Customization Examples

// Custom flip interval (faster transitions)
SushiViewFlipper(
    props = SushiViewFlipperProps(
        count = items.size,
        flipInterval = 1000L  // 1 second flip interval
    ),
    onFlip = { index ->
        // Called when a flip occurs
        currentItemIndex = index
    }
) { index ->
    // Item content
}

// Custom animation direction
SushiViewFlipper(
    props = SushiViewFlipperProps(
        count = items.size,
        animationDirection = SushiViewFlipperProps.FlipAnimationDirection.FlipToBottom
        // New content slides in from top, current content slides out to bottom
    )
) { index ->
    // Item content
}

// Play/Pause control
var isPlaying by remember { mutableStateOf(true) }

SushiViewFlipper(
    props = SushiViewFlipperProps(
        count = items.size,
        isPlaying = isPlaying  // Control whether animation is playing
    )
) { index ->
    // Item content
}

// Custom animation duration
SushiViewFlipper(
    props = SushiViewFlipperProps(
        count = items.size,
        animationDuration = 1200,  // Slower animation (1.2 seconds)
        flipInterval = 4000L       // Show each item for 4 seconds
    )
) { index ->
    // Item content
}

Dynamic Content

// Create state for a dynamic item list
var itemCount by remember { mutableStateOf(3) }

// ViewFlipper with dynamic count
SushiViewFlipper(
    props = SushiViewFlipperProps(
        count = itemCount  // Can be updated to change the number of items
    )
) { index ->
    // Content for the current index
}

// Button to update the content
SushiButton(
    props = SushiButtonProps(text = "Add Item"),
    onClick = {
        itemCount++
    }
)

Component API

SushiViewFlipperProps

Parameter	Description
flipInterval	Time in milliseconds between content flips (default: 3000ms)
animationDuration	Duration of the flip animation in milliseconds (default: 600ms)
animationDirection	Direction for the flip animation (FlipToTop or FlipToBottom)
isPlaying	Whether the flipper should be actively cycling (default: true)
count	Number of items to display in the flipper (default: 1)

FlipAnimationDirection

Value	Description
FlipToTop	New content slides in from bottom, current content slides out to top
FlipToBottom	New content slides in from top, current content slides out to bottom