Flutter票务展示插件sks_ticket_view的使用
Flutter票务展示插件sks_ticket_view的使用
简介
TicketViewFlutter 是一个简单且可定制的票务/收据视图插件，适用于 Flutter 应用程序。源代码是 100% Dart 编写的。
动机
在开发 Flutter 应用程序时，我需要一个干净的票务/收据视图。
入门
安装
在你的 pubspec.yaml 文件中添加以下依赖：
dependencies:
sks_ticket_view: ^1.0.0
使用
导入库后，你可以在你的 Widget 树中直接使用这个视图。
import 'package:sks_ticket_view/sks_ticket_view.dart';
默认票务视图
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(),
)
自定义
根据你的需求，你可以调整以下属性来定制 UI：
| 属性 | 类型 | 描述 |
|---|---|---|
backgroundColor |
Color |
票务视图的背景颜色 |
contentBackgroundColor |
Color |
票务视图内容的背景颜色 |
截图
| 默认视图 | 收据视图 |
|---|---|
 |
 |
作者
- Saurabh K Sharma - GIT
示例代码
以下是一个完整的示例代码，展示了如何在 Flutter 应用程序中使用 sks_ticket_view 插件。
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:sks_ticket_view/sks_ticket_view.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter 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>[
TextButton(
onPressed: () {
setState(() {
_showTicketView = true;
});
},
child: Text('Ticket View'),
),
SizedBox(
width: 20,
),
TextButton(
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: 200,
margin: EdgeInsets.all(10),
child: SKSTicketView(
drawDivider: true,
dividerPadding: 0,
contentPadding: EdgeInsets.all(20),
backgroundColor: Colors.black,
child: Row(
children: <Widget>[
Flexible(
flex: 7,
child: ticketInfoWidget(),
),
const SizedBox(
width: 10,
),
Flexible(
flex: 3,
child: SizedBox(
child: counterWidget(),
),
),
],
),
),
),
);
}
Widget ticketInfoWidget() {
return SizedBox(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Text(
'PROMO TICKET',
style: GoogleFonts.poppins(color: Colors.white, 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.white, 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.white, fontSize: 30),
),
),
IconButton(
icon: Icon(
Icons.chevron_right,
color: Colors.grey,
size: 30,
),
onPressed: () {
setState(() {
_ticketCount++;
});
},
),
],
),
);
}
Widget _getTicketReceiptView() {
return SKSTicketView(
backgroundPadding: EdgeInsets.symmetric(vertical: 0, horizontal: 20),
backgroundColor: Color(0xFF8F1299),
contentPadding: EdgeInsets.symmetric(vertical: 24, horizontal: 0),
triangleAxis: Axis.vertical,
borderRadius: 6,
drawDivider: true,
trianglePos: .5,
circleDash: true,
drawArc: true,
dividerPadding: 5,
dividerColor: Color(0xFF8F1299),
dashWidth: 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.white,
fontSize: 18,
fontWeight: FontWeight.w700),
),
Expanded(child: Container()),
RichText(
text: TextSpan(
children: [
TextSpan(
text: 'Price: ',
style: GoogleFonts.poppins(
color: Colors.white,
fontSize: 14,
fontWeight: FontWeight.w400),
),
TextSpan(
text: '\$15.00',
style: GoogleFonts.poppins(
color: Colors.white,
fontSize: 14,
fontWeight: FontWeight.w600),
),
],
),
),
],
),
SizedBox(height: 14),
Text(
'VR Tickets, General Admission',
style: GoogleFonts.poppins(
color: Colors.white,
fontSize: 14,
fontWeight: FontWeight.w300),
),
SizedBox(height: 14),
Text(
'Madison Square Garden, NY',
style: GoogleFonts.poppins(
color: Colors.white,
fontSize: 14,
fontWeight: FontWeight.w300),
),
SizedBox(height: 14),
Text(
'November 30,2020, 7:00PM',
style: GoogleFonts.poppins(
color: Colors.white,
fontSize: 14,
fontWeight: FontWeight.w500),
),
SizedBox(height: 14),
RichText(
text: TextSpan(
children: [
TextSpan(
text: 'Price: ',
style: GoogleFonts.poppins(
color: Colors.white,
fontSize: 14,
fontWeight: FontWeight.w400),
),
TextSpan(
text: '\$15.00',
style: GoogleFonts.poppins(
color: Colors.white,
fontSize: 14,
fontWeight: FontWeight.w400),
),
],
),
),
],
),
),
),
Expanded(
flex: 5,
child: Container(
margin: EdgeInsets.symmetric(vertical: 30),
child: Image.asset('assets/qr_placeholder.png'),
),
),
],
),
),
);
}
}
希望这个示例能帮助你更好地理解和使用 sks_ticket_view 插件。如果你有任何问题或需要进一步的帮助，请随时提问！
更多关于Flutter票务展示插件sks_ticket_view的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter票务展示插件sks_ticket_view的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，以下是如何在Flutter项目中集成和使用sks_ticket_view插件来展示票务信息的示例代码。这个插件通常用于展示电影票、演唱会票等票务详情。
1. 添加依赖
首先，在pubspec.yaml文件中添加sks_ticket_view依赖：
dependencies:
flutter:
sdk: flutter
sks_ticket_view: ^最新版本号 # 请替换为最新版本号
然后运行flutter pub get来获取依赖。
2. 导入插件
在你的Dart文件中导入sks_ticket_view：
import 'package:sks_ticket_view/sks_ticket_view.dart';
3. 使用插件
以下是一个简单的例子，展示如何在Flutter应用中使用sks_ticket_view来展示票务信息：
import 'package:flutter/material.dart';
import 'package:sks_ticket_view/sks_ticket_view.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: TicketViewDemo(),
);
}
}
class TicketViewDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Ticket View Demo'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Center(
child: SKSTicketView(
ticket: TicketModel(
code: "123456789",
name: "演唱会门票",
date: "2023-10-01 20:00",
seat: "A1区1排1座",
price: "¥888",
logo: "assets/logo.png", // 请确保在assets文件夹中有此图片
background: "assets/background.jpg", // 请确保在assets文件夹中有此图片
),
),
),
),
);
}
}
// 定义TicketModel类（假设插件需要此类，实际使用时请参考插件文档）
class TicketModel {
final String code;
final String name;
final String date;
final String seat;
final String price;
final String logo;
final String background;
TicketModel({
required this.code,
required this.name,
required this.date,
required this.seat,
required this.price,
required this.logo,
required this.background,
});
}
4. 添加资源文件
确保在pubspec.yaml中声明了资源文件：
flutter:
assets:
- assets/logo.png
- assets/background.jpg
并将logo.png和background.jpg放在项目的assets文件夹中。
注意事项
TicketModel类的定义可能需要根据sks_ticket_view插件的实际需求进行调整。请参考插件的官方文档以获取最新的API和字段定义。- 确保插件版本与Flutter SDK版本兼容。
- 在实际开发中，可能需要对插件进行更多的自定义和样式调整，以满足具体需求。
以上代码提供了一个基本的示例，展示了如何在Flutter应用中集成和使用sks_ticket_view插件来展示票务信息。请根据实际需求进行调整和扩展。
