card_expand_flutter

KO | EN

gitlite — search

#c #react #html #anthropic #tensorflow #nlp #mcp #ai #agents #database

card_expand_flutter

(★ 9)

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

파일 탐색기

ZIP 다운로드

# CDN으로 사용하기

jsDelivr

jsDelivr는 공개 GitHub 리포지토리를 별도 설정 없이 CDN으로 즉시 서빙합니다. 버전과 파일을 고르면 웹페이지에 바로 붙일 수 있는 링크와 예시 코드가 만들어집니다.

버전

파일

링크

예시

// 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

오너의 다른 레포

파일 탐색기

# CDN으로 사용하기

Was this content helpful?

Recent Feedback

card_expand_flutter

오너의 다른 레포

파일 탐색기

# CDN으로 사용하기

Was this content helpful?

Recent Feedback

Download README