src/flit/widgets/transitions

Route transition widgets. Wrap a pushed Navigator route in one of these and it animates in from the chosen direction. Each transition owns its own AnimationController, runs forward on mount, and reverses on dispose if requested.

Use directly:

slideInLeft(child = detailScreen())

Or via the Navigator integration:

currentNavigator().push(proc(): Widget = detailScreen(),
                        transition = trSlideLeft)

Types

FadeIn = ref object of StatefulWidget
  child*: Widget
  durationMs*: int
RouteTransitionKind = enum
  trNone, trFade, trSlideLeft, trSlideRight, trSlideUp, trSlideDown, trScale
Built-in transition kinds. trNone skips the animation.
ScaleIn = ref object of StatefulWidget
  child*: Widget
  durationMs*: int
SlideIn = ref object of StatefulWidget
  direction*: RouteTransitionKind
  child*: Widget
  durationMs*: int

Procs

proc fadeIn(child: Widget; durationMs: int = 200; key: Key = nil): FadeIn {.
    ...raises: [], tags: [], forbids: [].}
Fades child from invisible to opaque. Material-style screen transition.
proc scaleIn(child: Widget; durationMs: int = 200; key: Key = nil): ScaleIn {.
    ...raises: [], tags: [], forbids: [].}
Scales child from 85% to 100%. Useful for dialogs and popups.
proc slideInDown(child: Widget; durationMs: int = 250; key: Key = nil): SlideIn {.
    ...raises: [], tags: [], forbids: [].}
proc slideInLeft(child: Widget; durationMs: int = 250; key: Key = nil): SlideIn {.
    ...raises: [], tags: [], forbids: [].}
Slides child in from the right edge, settling left to its natural position. Common "push from right" iOS-style.
proc slideInRight(child: Widget; durationMs: int = 250; key: Key = nil): SlideIn {.
    ...raises: [], tags: [], forbids: [].}
proc slideInUp(child: Widget; durationMs: int = 250; key: Key = nil): SlideIn {.
    ...raises: [], tags: [], forbids: [].}
Slides child in from below. Common "modal sheet" pattern.
proc withTransition(kind: RouteTransitionKind; child: Widget): Widget {.
    ...raises: [], tags: [], forbids: [].}
Wraps child in the requested transition. trNone returns the child unchanged. Used by Navigator.push to apply transitions without the caller knowing about the specific transition widget type.

Methods

method build(s: FadeInState; ctx: BuildContext): Widget {....raises: [], tags: [],
    forbids: [].}
method build(s: ScaleInState; ctx: BuildContext): Widget {....raises: [], tags: [],
    forbids: [].}
method build(s: SlideInState; ctx: BuildContext): Widget {....raises: [], tags: [],
    forbids: [].}
method createElement(w: FadeIn): Element {....raises: [], tags: [], forbids: [].}
method createElement(w: ScaleIn): Element {....raises: [], tags: [], forbids: [].}
method createElement(w: SlideIn): Element {....raises: [], tags: [], forbids: [].}
method createState(w: FadeIn): State {....raises: [], tags: [], forbids: [].}
method createState(w: ScaleIn): State {....raises: [], tags: [], forbids: [].}
method createState(w: SlideIn): State {....raises: [], tags: [], forbids: [].}
method widgetTypeName(w: FadeIn): string {....raises: [], tags: [], forbids: [].}
method widgetTypeName(w: ScaleIn): string {....raises: [], tags: [], forbids: [].}
method widgetTypeName(w: SlideIn): string {....raises: [], tags: [], forbids: [].}