Flutter悬浮展示插件elevated_ticket_widget的使用
Flutter悬浮展示插件 elevated_ticket_widget 的使用
特性
- 高度可定制
- 使用简单
开始使用
1. 添加依赖
在你的 pubspec.yaml 文件中添加以下依赖：
dependencies:
elevated_ticket_widget: ^0.0.4
2. 导入包
在 Dart 文件中导入该包：
import 'package:elevated_ticket_widget/elevated_ticket_widget.dart';
3. 使用 Widget
在代码中使用 ElevatedTicketWidget：
ElevatedTicketWidget(
height: 100,
width: 100,
elevation: 2,
child: Text('Elevated Ticket Widget'),
)
示例代码
以下是一个完整的示例代码，展示了如何使用 ElevatedTicketWidget 来创建一个机票样式的悬浮卡片。你可以直接运行这个例子来查看效果。
import 'package:elevated_ticket_widget/elevated_ticket_widget.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ElevatedTicketWidget(
height: 500,
width: 300,
elevation: 1.5,
backgroundColor: Colors.white,
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
height: 80,
width: 80,
decoration: BoxDecoration(
color: Colors.blue,
boxShadow: const [
BoxShadow(color: Colors.black12),
],
borderRadius: BorderRadius.circular(10),
),
child: const Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Icon(
Icons.flight,
color: Colors.white,
),
Text(
'ABC Airways',
style: TextStyle(color: Colors.white, fontSize: 11),
),
],
),
),
const SizedBox(width: 16),
const Expanded(
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'FLIGHT',
style: TextStyle(fontSize: 11),
),
Text(
'ABC123',
style: TextStyle(fontSize: 11),
),
],
),
),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'BOARDING TIME',
style: TextStyle(fontSize: 11),
),
Text(
'11:30',
style: TextStyle(fontSize: 11),
),
],
),
),
],
),
SizedBox(height: 16),
Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'GATE',
style: TextStyle(fontSize: 11),
),
Text(
'15',
style: TextStyle(fontSize: 11),
),
],
),
),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'SEAT',
style: TextStyle(fontSize: 11),
),
Text(
'11A',
style: TextStyle(fontSize: 11),
),
],
),
),
],
),
],
),
),
],
),
const SizedBox(height: 16),
const Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'PASSANGER NAME',
style: TextStyle(fontSize: 11),
),
Text(
'JOHAN',
style: TextStyle(fontSize: 11),
),
],
),
),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'CLASS',
style: TextStyle(fontSize: 11),
),
Text(
'ECONOMY',
style: TextStyle(fontSize: 11),
),
],
),
),
],
),
const SizedBox(height: 16),
const Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'FROM',
style: TextStyle(fontSize: 11),
),
Text(
'ZEA',
style: TextStyle(fontSize: 11),
),
],
),
),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'TO',
style: TextStyle(fontSize: 11),
),
Text(
'ROME',
style: TextStyle(fontSize: 11),
),
],
),
),
],
),
const SizedBox(height: 16),
const Row(
children: [
Text(
'DATE: ',
style: TextStyle(fontSize: 11),
),
Text(
'30NOV',
style: TextStyle(fontSize: 11),
),
],
),
const SizedBox(height: 80),
const Center(child: Text('E-TICKET 345-65647527457')),
],
),
),
),
],
),
),
);
}
}
通过上述步骤和示例代码，你应该能够成功地在 Flutter 应用中集成并使用 elevated_ticket_widget 插件来创建一个悬浮的、具有机票样式设计的卡片组件。
更多关于Flutter悬浮展示插件elevated_ticket_widget的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter悬浮展示插件elevated_ticket_widget的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，以下是如何在Flutter项目中使用elevated_ticket_widget插件的一个简单示例代码。这个插件通常用于创建悬浮展示的UI组件，比如悬浮的通知、票据等。
首先，确保你已经在pubspec.yaml文件中添加了elevated_ticket_widget依赖：
dependencies:
flutter:
sdk: flutter
elevated_ticket_widget: ^最新版本号 # 请替换为实际可用的最新版本号
然后，运行flutter pub get来安装依赖。
接下来，你可以在你的Flutter应用中使用这个插件。以下是一个基本的示例，展示如何创建并显示一个悬浮的票据：
import 'package:flutter/material.dart';
import 'package:elevated_ticket_widget/elevated_ticket_widget.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Elevated Ticket Widget Example'),
),
body: Center(
child: ElevatedTicketWidgetExample(),
),
),
);
}
}
class ElevatedTicketWidgetExample extends StatefulWidget {
@override
_ElevatedTicketWidgetExampleState createState() => _ElevatedTicketWidgetExampleState();
}
class _ElevatedTicketWidgetExampleState extends State<ElevatedTicketWidgetExample> {
bool _isTicketVisible = false;
void _showTicket() {
setState(() {
_isTicketVisible = true;
});
// Simulate ticket dismissal after 5 seconds
Future.delayed(Duration(seconds: 5), () {
setState(() {
_isTicketVisible = false;
});
});
}
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ElevatedButton(
onPressed: _showTicket,
child: Text('Show Ticket'),
),
if (_isTicketVisible)
ElevatedTicketWidget(
content: Text('This is a ticket message!'),
onClose: () {
setState(() {
_isTicketVisible = false;
});
},
ticketBackgroundColor: Colors.amber,
ticketTextStyle: TextStyle(color: Colors.black),
closeButtonStyle: ElevatedTicketCloseButtonStyle(
backgroundColor: Colors.red,
icon: Icons.close,
),
alignment: Alignment.topRight,
margin: EdgeInsets.only(top: 50, right: 20),
),
],
);
}
}
// Note: Column is used here for simplicity, in a real app you might want to use
// a more appropriate layout widget like Stack or Positioned inside a Stack.
注意事项
- 布局管理：在这个示例中，我使用了
Column来简单展示按钮和票据。但在实际应用中，你可能需要更复杂的布局管理，比如使用Stack和Positioned来精确定位票据的位置。 - 状态管理：这里使用了
StatefulWidget来管理票据的显示状态。你可以根据需求选择更适合的状态管理方式，比如使用Provider、Riverpod等。 - 样式定制：你可以通过
ElevatedTicketWidget的参数来自定义票据的样式，包括背景颜色、文本样式、关闭按钮样式等。
希望这个示例能帮助你更好地理解和使用elevated_ticket_widget插件！
