Deepyr Documentation

Diff

Compares two images. The slider is interactive and can be dragged left and right.

/// The Diff component is a stateful wrapper that requires `DiffItem1`
/// and `DiffItem2` to be passed as direct children.

Diff(
  [
    DiffItem1([
      img(src: '/images/flower2.jpg'),
    ]),
    DiffItem2([
      img(src: '/images/flower2.jpg'),
    ]),
  ],
  // Applying sizing and effects for a better presentation.
  style: [Size.w96, Size.h96, Effects.roundedBox],
)

Diff with text

You can compare any two elements. This example uses styled Containers to hold text.

Deepyr

Diff(
  [
    DiffItem1([
      // Using a deepyr Container for styling is cleaner.
      Container(
        [text('Deepyr')],
        style: [
          BgUtil.primary,
          TextUtil.primaryContent,
          TextUtil.xl3,
          TextUtil.xl5.at(Breakpoint.md),
          TextUtil.xl9.at(Breakpoint.lg),
          FontUtil.black,
          Layout.grid,
          Alignment.placeItemsCenter,
        ],
      ),
    ]),
    DiffItem2([
      Container(
        [text('Deepyr')],
        style: [
          BgUtil.base200,
          TextUtil.baseContent,
          TextUtil.xl3,
          TextUtil.xl5.at(Breakpoint.md),
          TextUtil.xl9.at(Breakpoint.lg),
          FontUtil.black,
          Layout.grid,
          Alignment.placeItemsCenter,
        ],
      ),
    ]),
  ],
  style: [Size.wFull, Size.h72, Effects.roundedBox],
)