搜索插件、代码仓与 APP 分类

ticket_material 封面
插件详情v0.3.1

ticket_material

一张票的视图组件。支持所有平台。具有标准的点击行为。

AndroidiOSWebmacOSWindowsLinux
近 30 天下载
431
喜欢数
32
Pub 分数
150

安装插件

flutter pub add ticket_material

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

一个 Flutter 小部件,创建具有平台自适应设计的票券样式视图,支持所有主要平台,包括 Android、iOS、Web、macOS、Windows 和 Linux。它具备标准的点击交互以增强用户参与度,并包含内置的视觉样式,以模拟现实世界的票券。该包使用自定义裁剪和装饰技术,在各种设备上提供精致且一致的外观。非常适合用于活动票券、登机牌或数字优惠券。

适合场景

  • 数字票务显示
  • 事件通行证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.

所属分类

源码仓库

使用此插件的项目

暂无相关数据。