Live Preview PoC | CoUI
LogoCoUI

Live Preview PoC

Web/Flutter 듀얼 라이브 프리뷰 기능의 PoC 페이지입니다.

Live Preview PoC#

Web과 Flutter 프리뷰를 나란히 보여주는 듀얼 라이브 프리뷰 기능입니다.

Single Variant Mode#

Button — Primary#

Web
Flutter
Loading Flutter... 
class ButtonPrimaryExample extends StatefulComponent {
  const ButtonPrimaryExample({super.key});

  @override
  State<ButtonPrimaryExample> createState() => _ButtonPrimaryExampleState();
}

class _ButtonPrimaryExampleState extends State<ButtonPrimaryExample> {
  @override
  Component build(BuildContext context) {
    return CoButton(
      variant: CoreButtonVariant.primary,
      onPressed: () {},
      child: text('Primary'),
    );
  }
}
class ButtonPrimaryExample extends StatefulWidget {
  const ButtonPrimaryExample({super.key});

  @override
  State<ButtonPrimaryExample> createState() => _ButtonPrimaryExampleState();
}

class _ButtonPrimaryExampleState extends State<ButtonPrimaryExample> {
  @override
  Widget build(BuildContext context) {
    return CoButton(
      variant: CoreButtonVariant.primary,
      onPressed: () {},
      child: const Text('Primary'),
    );
  }
}

Button — Outline#

Web
Flutter
Loading Flutter... 
class ButtonOutlineExample extends StatefulComponent {
  const ButtonOutlineExample({super.key});

  @override
  State<ButtonOutlineExample> createState() => _ButtonOutlineExampleState();
}

class _ButtonOutlineExampleState extends State<ButtonOutlineExample> {
  @override
  Component build(BuildContext context) {
    return CoButton(
      variant: CoreButtonVariant.outline,
      onPressed: () {},
      child: text('Outline'),
    );
  }
}
class ButtonOutlineExample extends StatefulWidget {
  const ButtonOutlineExample({super.key});

  @override
  State<ButtonOutlineExample> createState() => _ButtonOutlineExampleState();
}

class _ButtonOutlineExampleState extends State<ButtonOutlineExample> {
  @override
  Widget build(BuildContext context) {
    return CoButton(
      variant: CoreButtonVariant.outline,
      onPressed: () {},
      child: const Text('Outline'),
    );
  }
}

모든 Button variant를 한번에 확인합니다.

primary
Web
Flutter
Loading Flutter... 
class ButtonPrimaryExample extends StatefulComponent {
  const ButtonPrimaryExample({super.key});

  @override
  State<ButtonPrimaryExample> createState() => _ButtonPrimaryExampleState();
}

class _ButtonPrimaryExampleState extends State<ButtonPrimaryExample> {
  @override
  Component build(BuildContext context) {
    return CoButton(
      variant: CoreButtonVariant.primary,
      onPressed: () {},
      child: text('Primary'),
    );
  }
}
class ButtonPrimaryExample extends StatefulWidget {
  const ButtonPrimaryExample({super.key});

  @override
  State<ButtonPrimaryExample> createState() => _ButtonPrimaryExampleState();
}

class _ButtonPrimaryExampleState extends State<ButtonPrimaryExample> {
  @override
  Widget build(BuildContext context) {
    return CoButton(
      variant: CoreButtonVariant.primary,
      onPressed: () {},
      child: const Text('Primary'),
    );
  }
}
secondary
Web
Flutter
Loading Flutter... 
class ButtonSecondaryExample extends StatefulComponent {
  const ButtonSecondaryExample({super.key});

  @override
  State<ButtonSecondaryExample> createState() =>
      _ButtonSecondaryExampleState();
}

class _ButtonSecondaryExampleState extends State<ButtonSecondaryExample> {
  @override
  Component build(BuildContext context) {
    return CoButton(
      variant: CoreButtonVariant.secondary,
      onPressed: () {},
      child: text('Secondary'),
    );
  }
}
class ButtonSecondaryExample extends StatefulWidget {
  const ButtonSecondaryExample({super.key});

  @override
  State<ButtonSecondaryExample> createState() => _ButtonSecondaryExampleState();
}

class _ButtonSecondaryExampleState extends State<ButtonSecondaryExample> {
  @override
  Widget build(BuildContext context) {
    return CoButton(
      variant: CoreButtonVariant.secondary,
      onPressed: () {},
      child: const Text('Secondary'),
    );
  }
}
outline
Web
Flutter
Loading Flutter... 
class ButtonOutlineExample extends StatefulComponent {
  const ButtonOutlineExample({super.key});

  @override
  State<ButtonOutlineExample> createState() => _ButtonOutlineExampleState();
}

class _ButtonOutlineExampleState extends State<ButtonOutlineExample> {
  @override
  Component build(BuildContext context) {
    return CoButton(
      variant: CoreButtonVariant.outline,
      onPressed: () {},
      child: text('Outline'),
    );
  }
}
class ButtonOutlineExample extends StatefulWidget {
  const ButtonOutlineExample({super.key});

  @override
  State<ButtonOutlineExample> createState() => _ButtonOutlineExampleState();
}

class _ButtonOutlineExampleState extends State<ButtonOutlineExample> {
  @override
  Widget build(BuildContext context) {
    return CoButton(
      variant: CoreButtonVariant.outline,
      onPressed: () {},
      child: const Text('Outline'),
    );
  }
}
ghost
Web
Flutter
Loading Flutter... 
class ButtonGhostExample extends StatefulComponent {
  const ButtonGhostExample({super.key});

  @override
  State<ButtonGhostExample> createState() => _ButtonGhostExampleState();
}

class _ButtonGhostExampleState extends State<ButtonGhostExample> {
  @override
  Component build(BuildContext context) {
    return CoButton(
      variant: CoreButtonVariant.ghost,
      onPressed: () {},
      child: text('Ghost'),
    );
  }
}
class ButtonGhostExample extends StatefulWidget {
  const ButtonGhostExample({super.key});

  @override
  State<ButtonGhostExample> createState() => _ButtonGhostExampleState();
}

class _ButtonGhostExampleState extends State<ButtonGhostExample> {
  @override
  Widget build(BuildContext context) {
    return CoButton(
      variant: CoreButtonVariant.ghost,
      onPressed: () {},
      child: const Text('Ghost'),
    );
  }
}
link
Web
Flutter
class ButtonLinkExample extends StatefulComponent {
  const ButtonLinkExample({super.key});

  @override
  State<ButtonLinkExample> createState() => _ButtonLinkExampleState();
}

class _ButtonLinkExampleState extends State<ButtonLinkExample> {
  @override
  Component build(BuildContext context) {
    return CoButton(
      variant: CoreButtonVariant.link,
      onPressed: () {},
      child: text('Link'),
    );
  }
}
class ButtonLinkExample extends StatefulWidget {
  const ButtonLinkExample({super.key});

  @override
  State<ButtonLinkExample> createState() => _ButtonLinkExampleState();
}

class _ButtonLinkExampleState extends State<ButtonLinkExample> {
  @override
  Widget build(BuildContext context) {
    return CoButton(
      variant: CoreButtonVariant.link,
      onPressed: () {},
      child: const Text('Link'),
    );
  }
}
destructive
Web
Flutter
Loading Flutter... 
class ButtonDestructiveExample extends StatefulComponent {
  const ButtonDestructiveExample({super.key});

  @override
  State<ButtonDestructiveExample> createState() =>
      _ButtonDestructiveExampleState();
}

class _ButtonDestructiveExampleState extends State<ButtonDestructiveExample> {
  @override
  Component build(BuildContext context) {
    return CoButton(
      variant: CoreButtonVariant.destructive,
      onPressed: () {},
      child: text('Destructive'),
    );
  }
}
class ButtonDestructiveExample extends StatefulWidget {
  const ButtonDestructiveExample({super.key});

  @override
  State<ButtonDestructiveExample> createState() =>
      _ButtonDestructiveExampleState();
}

class _ButtonDestructiveExampleState extends State<ButtonDestructiveExample> {
  @override
  Widget build(BuildContext context) {
    return CoButton(
      variant: CoreButtonVariant.destructive,
      onPressed: () {},
      child: const Text('Destructive'),
    );
  }
}