搜尋套件、儲存庫與 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.

所屬分類

原始碼儲存庫

使用此套件的專案

暫無相關資料。