card_expand_flutter

KO | EN

gitlite — search

#data-science #developer-tools #containers #android #cross-platform #codex #go #electron #git #docker

card_expand_flutter

(★ 9)

App Store card expand transition in Flutter — one shared element, one progress value, drag to dismiss

File Explorer

ZIP Download

# Use via CDN

jsDelivr

jsDelivr serves any public GitHub repository as a CDN with zero setup. Pick a version and a file to get a ready-to-paste link and snippet.

Version

File

Link

Example

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

The App Store card transition in Flutter: tap a card in the list and it becomes
the screen. Drag down and it goes back to its slot, pixel perfect. One shared
element, one progress value, zero bounce.

Ported from the React Native original in
[rs-4/labs](https://github.com/rs-4/labs/tree/main/src/components/card-expand).

## How it works

- **Measure the card.** On tap, `RenderBox.localToGlobal` gives the card's rect
  in the container's coordinate space. That rect is the whole shared-element
  contract: the clone starts there and must land back there.
- **Mount a clone, interpolate the rect.** The overlay renders the same
  `CardFace` widget, and a single `AnimationController` interpolates its rect
  from the slot to fullscreen. The corner radius travels from 28 to 55, so
  fullscreen still hugs the phone corners.
- **One progress drives everything.** A calm curve, `Cubic(0.32, 0.72, 0, 1)`,
  no spring. The body fade, the label safe-area offset, the close button and the
  background list zoom all read the same value, so nothing can desync and the
  close lands exactly on the origin card.
- **Drag to dismiss.** A vertical drag translates and shrinks the sheet. Past
  140px or a 900px/s flick it releases into the close animation, reversed on the
  same curve. Under the threshold it settles back to fullscreen.

## Usage

```dart
CardExpand(
  topInset: MediaQuery.paddingOf(context).top + 110,
  cards: const [
    ExpandCard(
      id: 'focus',
      label: 'Featured',
      title: 'Deep Focus',
      subtitle: 'One line under the title.',
      body: 'The long text revealed once the card is fullscreen.',
      colors: [Color(0xFF3B2F2A), Color(0xFF8A5A3B)],
    ),
  ],
)
```

Place `CardExpand` in a full-screen `Stack` so the overlay can cover the header.

## Tuning

- `kOpenDuration` (440ms) and `kCloseDuration` (380ms), same cubic.
- `kCardRadius` (28) and `kFullRadius` (55).
- Dismiss thresholds in `_onDragEnd`: 140px distance or 900px/s velocity.
- The list zoom (`scale 0.95`, `opacity 0.65`) in `CardExpand.build`.

## Run

```sh
flutter run
```

card_expand_flutter

Owner Repos

File Explorer

# Use via CDN

Was this content helpful?

Recent Feedback

card_expand_flutter

Owner Repos

File Explorer

# Use via CDN

Was this content helpful?

Recent Feedback

Download README