패키지, 저장소 및 앱 카테고리 검색

ticket_material 표지
패키지 상세v0.3.1

ticket_material

티켓 보기 위젯입니다. 모든 플랫폼을 지원합니다. 표준 클릭 동작이 있습니다.

AndroidiOSWebmacOSWindowsLinux
30일 다운로드
431
좋아요
32
Pub 점수
150

패키지 설치

flutter pub add ticket_material

패키지 개요

공개 정보를 바탕으로 생성한 선택 가이드입니다.

플랫폼 적응형 디자인을 갖춘 티켓 스타일 뷰를 생성하는 플러터 위젯으로, 안드로이드, 아이오스, 웹, 맥OS, 윈도우, 리눅스 등 모든 주요 플랫폼을 지원합니다. 사용자 참여를 위한 표준 클릭 인터랙션과 실제 티켓을 모방하는 내장된 시각적 스타일링 기능을 포함하고 있습니다. 커스텀 클리핑 및 장식 기술을 사용하여 다양한 기기에서 매끄럽고 일관된 외관을 제공합니다. 이벤트 티켓, 탑승권 또는 디지털 쿠폰에 이상적입니다.

사용 사례

  • 디지털 티켓 표시
  • 이벤트 패스 UI
  • 승차권 인터페이스
  • 충성도 카드 디자인
  • 프로모션 쿠폰 레이아웃

주요 기능

  • 크로스 플랫폼 호환성
  • 내장 클릭 동작
  • 사용자 지정 가능한 티켓 스타일
  • 플랫폼별 렌더링
  • 클리퍼 기반 디자인
  • 반응형 레이아웃

적합한 대상

  • 티켓 기반 UI를 만드는 앱 개발자
  • 재사용 가능한 티켓 컴포넌트가 필요한 디자이너
  • 다양한 플랫폼 간 일관된 티켓 시각화가 필요한 프로젝트

고려 사항

  • 기본 스타일링을 초과한 제한된 사용자 정의
  • 플랫폼별 렌더링 동작에 의존합니다
  • 상호작용 기능을 위해 추가적인 상태 관리가 필요할 수 있습니다

원본 README

연결된 소스 저장소의 README 원문 스냅샷입니다. 최신 내용은 저장소에서 확인하세요.

ticket_material

A ticket view widget.

Platform compatibility

Plugin was tested on following platforms:

  • Android;
  • IOS;
  • Windows 10 64 bit;
  • Linux (Ubuntu 20.04.1 LTS).

The support of MacOS is not guaranteed, but you can try to build it.

Also on web platform it's does not work.

Usage

To use this plugin, add universal_navigation as a dependency in your pubspec.yaml file.

Getting Started

Add dependency into pubspec.yaml.

dependencies:
  ticket_material:

Create a page.

class ExamplePage extends StatefulWidget {
  static final routeName = '/example';

  @override
  _ExamplePageState createState() => _ExamplePageState();
}

class _ExamplePageState extends State<ExamplePage> {
  final colorBg = Colors.grey[300];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: colorBg,
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: TicketMaterial(
            height: 150,
            colorBackground: Colors.blue,
            leftChild: _buildLeft(),
            rightChild: _buildRight(),
          ),
        ),
      ),
    );
  }

  Widget _buildLeft() {
    return Container(
      child: Center(
        child: Text('LEFT PART'),
      ),
    );
  }

  Widget _buildRight() {
    return Container(
      child: Center(
        child: Icon(Icons.airplanemode_active),
      ),
    );
  }
}

Result: demo

With tap animation: demo_tap

Full example with ticket_material you can check by this link.

카테고리

소스 저장소

이 패키지를 사용하는 프로젝트

아직 데이터가 없습니다.