Flutter票务展示插件ticketview的使用

简介

TicketViewFlutter 是一个用于 Flutter 的简单且可定制的票务/收据视图插件。该插件完全由 Dart 编写。

动机

我在开发我的 Flutter 应用程序时，需要一些简洁的票务/收据视图组件。

开始使用

安装

将此依赖项添加到您的 pubspec.yaml 文件中：

dependencies:
  ticketview: ^1.0.0

然后运行以下命令以安装依赖项：

flutter pub get

导入

在您的项目中导入此库：

import 'package:ticketview/ticketview.dart';

使用方法

默认票务视图

您可以直接在 Widget 树中使用默认的票务视图：

TicketView(
  child: Container(),
)

自定义收据视图

以下是一个自定义收据视图的示例：

TicketView(
  backgroundPadding: EdgeInsets.symmetric(vertical: 0, horizontal: 20),
  backgroundColor: Color(0xFF8F1299),
  contentPadding: EdgeInsets.symmetric(vertical: 24, horizontal: 0),
  drawArc: false,
  triangleAxis: Axis.vertical,
  borderRadius: 6,
  drawDivider: true,
  trianglePos: .5,
  child: Container(),
)

自定义选项

根据您的需求，可以调整以下属性来定制票务视图的外观：

属性名称	类型	描述
`backgroundColor`	Color	票务视图的背景颜色
`contentBackgroundColor`	Color	票务视图内容区域的颜色

示例代码

以下是一个完整的示例代码，展示了如何使用 TicketView 来创建票务和收据视图：

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:ticketview/ticketview.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter TicketView Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter TicketView Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

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

bool _showTicketView = true;

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xffe3e3e3),
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Row(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                RaisedButton(
                  onPressed: () {
                    setState(() {
                      _showTicketView = true;
                    });
                  },
                  child: Text('Ticket View'),
                ),
                SizedBox(
                  width: 20,
                ),
                RaisedButton(
                  onPressed: () {
                    setState(() {
                      _showTicketView = false;
                    });
                  },
                  child: Text('Receipt View'),
                )
              ],
            ),
            Expanded(
              child: Container(
                margin: EdgeInsets.all(10),
                child: _showTicketView
                    ? _getTicketInfoView()
                    : _getTicketReceiptView(),
              ),
            )
          ],
        ),
      ),
    );
  }

  Widget _getTicketInfoView() {
    return Center(
      child: Container(
        height: 160,
        margin: EdgeInsets.all(10),
        child: TicketView(
          child: Container(),
        ),
      ),
    );
  }

  Container ticketInfoWidget() {
    return Container(
      child: Column(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: <Widget>[
          Text(
            'PROMO TICKET',
            style: GoogleFonts.poppins(color: Colors.black, fontSize: 16),
          ),
          Text(
            '\$10.00',
            style: GoogleFonts.poppins(
                color: Colors.red, fontSize: 20, fontWeight: FontWeight.w700),
          ),
          Text(
            '120 Tickets Available',
            style: GoogleFonts.poppins(color: Colors.black, fontSize: 12),
          )
        ],
      ),
    );
  }

  int _ticketCount = 0;
  Container counterWidget() {
    return Container(
      child: Row(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          IconButton(
              icon: Icon(
                Icons.chevron_left,
                color: Colors.grey,
                size: 30,
              ),
              onPressed: () {
                if (_ticketCount > 0) {
                  setState(() {
                    _ticketCount--;
                  });
                }
              }),
          Expanded(
            child: Text(
              "$_ticketCount",
              maxLines: 1,
              softWrap: true,
              textAlign: TextAlign.center,
              style: GoogleFonts.poppins(color: Colors.black, fontSize: 30),
            ),
          ),
          IconButton(
            icon: Icon(
              Icons.chevron_right,
              color: Colors.grey,
              size: 30,
            ),
            onPressed: () {
              setState(() {
                _ticketCount++;
              });
            },
          ),
        ],
      ),
    );
  }

  Widget _getTicketReceiptView() {
    return TicketView(
      backgroundPadding: EdgeInsets.symmetric(vertical: 0, horizontal: 20),
      backgroundColor: Color(0xFF8F1299),
      contentPadding: EdgeInsets.symmetric(vertical: 24, horizontal: 0),
      drawArc: false,
      triangleAxis: Axis.vertical,
      borderRadius: 6,
      drawDivider: true,
      trianglePos: .5,
      child: Container(
        child: Column(
          children: <Widget>[
            Expanded(
              flex: 5,
              child: Container(
                padding: EdgeInsets.all(24),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Row(
                      children: <Widget>[
                        Text(
                          'DRAKE',
                          style: GoogleFonts.poppins(
                              color: Colors.black,
                              fontSize: 18,
                              fontWeight: FontWeight.w700),
                        ),
                        Expanded(child: Container()),
                        RichText(
                          text: TextSpan(
                            children: [
                              TextSpan(
                                text: 'Price: ',
                                style: GoogleFonts.poppins(
                                    color: Colors.black,
                                    fontSize: 14,
                                    fontWeight: FontWeight.w400),
                              ),
                              TextSpan(
                                text: '\$15.00',
                                style: GoogleFonts.poppins(
                                    color: Colors.black,
                                    fontSize: 14,
                                    fontWeight: FontWeight.w600),
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                    SizedBox(height: 14),
                    Text(
                      'VR Tickets, General Admission',
                      style: GoogleFonts.poppins(
                          color: Colors.black,
                          fontSize: 14,
                          fontWeight: FontWeight.w300),
                    ),
                    SizedBox(height: 14),
                    Text(
                      'Madison Square Garden, NY',
                      style: GoogleFonts.poppins(
                          color: Colors.black,
                          fontSize: 14,
                          fontWeight: FontWeight.w300),
                    ),
                    SizedBox(height: 14),
                    Text(
                      'November 30,2020, 7:00PM',
                      style: GoogleFonts.poppins(
                          color: Colors.black,
                          fontSize: 14,
                          fontWeight: FontWeight.w500),
                    ),
                    SizedBox(height: 14),
                    RichText(
                      text: TextSpan(
                        children: [
                          TextSpan(
                            text: 'Price: ',
                            style: GoogleFonts.poppins(
                                color: Colors.black,
                                fontSize: 14,
                                fontWeight: FontWeight.w400),
                          ),
                          TextSpan(
                            text: '\$15.00',
                            style: GoogleFonts.poppins(
                                color: Colors.black,
                                fontSize: 14,
                                fontWeight: FontWeight.w400),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ),
            Expanded(
              flex: 5,
              child: Container(
                margin: EdgeInsets.symmetric(vertical: 30),
                child: Image.asset('assets/qr_placeholder.png'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

截图

默认视图	收据视图

作者

Saurabh K Sharma - GIT

我是开源社区的新手，所有建议和改进都欢迎。

贡献指南

Fork 该项目： https://github.com/sorbh/ticketviewflutter/fork
创建您的功能分支：
```
git checkout -b feature/fooBar
```
提交更改：
```
git commit -am 'Add some fooBar'
```
推送到分支：
```
git push origin feature/fooBar
```

更多关于Flutter票务展示插件ticketview的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

sinazl 1楼

更多关于Flutter票务展示插件ticketview的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

TicketView 是一个用于在 Flutter 应用中展示票务信息的插件。它可以帮助你创建类似于电影票、活动票等样式的 UI 组件。以下是如何使用 TicketView 插件的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 ticket_view 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  ticket_view: ^1.0.0  # 请检查最新版本

然后运行 flutter pub get 来安装依赖。

2. 导入包

在你的 Dart 文件中导入 ticket_view 包：

import 'package:ticket_view/ticket_view.dart';

3. 使用 `TicketView`

TicketView 提供了多种自定义选项，你可以根据需要调整票务的外观。以下是一个简单的示例：

import 'package:flutter/material.dart';
import 'package:ticket_view/ticket_view.dart';

class TicketExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('TicketView Example'),
      ),
      body: Center(
        child: TicketView(
          width: 300.0,
          height: 200.0,
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  'Event Name',
                  style: TextStyle(
                    fontSize: 20.0,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                SizedBox(height: 8.0),
                Text(
                  'Location: Event Location',
                  style: TextStyle(
                    fontSize: 16.0,
                  ),
                ),
                SizedBox(height: 8.0),
                Text(
                  'Date: 2023-10-15',
                  style: TextStyle(
                    fontSize: 16.0,
                  ),
                ),
                SizedBox(height: 8.0),
                Text(
                  'Time: 18:00',
                  style: TextStyle(
                    fontSize: 16.0,
                  ),
                ),
              ],
            ),
          ),
          backgroundColor: Colors.white,
          shadowColor: Colors.grey,
          elevation: 5.0,
          borderRadius: BorderRadius.circular(12.0),
          isCornerRounded: true,
        ),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: TicketExample(),
  ));
}

Flutter票务展示插件ticketview的使用

Flutter票务展示插件ticketview的使用

简介

动机

开始使用

安装

导入

使用方法

默认票务视图

自定义收据视图

自定义选项

示例代码

截图

作者

贡献指南

1. 添加依赖

2. 导入包

3. 使用 TicketView

3. 使用 `TicketView`