Flutter卡片布局插件booking_card

Flutter卡片布局插件booking_card_layout的使用

特性

当前正在开发中，此插件由BAI infosolutions private limited设计并用于taxivaxi。允许第三方用户重用该插件，但不允许进行自定义。

开始使用

在pubspec.yaml文件中添加以下依赖：

dependencies:
  booking_card_layout: <最新版本>

然后在你的Dart文件中导入该插件：

import 'package:booking_card_layout/taxi_card_layout.dart';
import 'package:booking_card_layout/tv_theme.dart';

使用方法

以下是一个简单的例子展示如何使用TaxiCardLayout：

class TaxiCardLayouts extends StatefulWidget {
  const TaxiCardLayouts({super.key});

  [@override](/user/override)
  State<TaxiCardLayouts> createState() => _TaxiCardLayoutsState();
}

class _TaxiCardLayoutsState extends State<TaxiCardLayouts> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          "Taxi Card Layout Examples",
          style: TextStyle(color: Colors.white, fontSize: 18),
        ),
        backgroundColor: TVTheme.secondColor,
      ),
      body: ListView(
        children: [
          // 正常的出租车卡示例
          Container(
            margin: const EdgeInsets.only(top: 5, bottom: 5),
            color: TVTheme.secondColor.withOpacity(0.5),
            alignment: Alignment.center,
            height: 45,
            child: const Text(
              "Normal Taxi Card Example",
              style: TextStyle(
                fontWeight: FontWeight.w600,
                fontSize: 16,
              ),
            ),
          ),
          TaxiCardLayout(
            context: context,
            referenceNo: '123',
            tourType: 'Local',
            assessmentCode: 'TVTEST56564',
            pickupDatetime: '2024-10-10 12:10:00',
            pickupLocation: 'Supreme Headquarters',
            dropLocation: '18 Highstreet, Baner-Pashan Link Road',
            statusCompany: 'Approved',
            passengerList: [],
            statusTv: 'Accepted',
            onAssignTap: () {
              ScaffoldMessenger.of(context)
                  .showSnackBar(const SnackBar(content: Text("Clicked On Assign")));
            },
            onAcceptTap: () {
              ScaffoldMessenger.of(context)
                  .showSnackBar(const SnackBar(content: Text("Clicked On Accept")));
            },
            onRejectTap: () {
              ScaffoldMessenger.of(context)
                  .showSnackBar(const SnackBar(content: Text("Clicked On Reject")));
            },
          ).normal(),

          // 代理卡/接受-拒绝示例
          Container(
            margin: const EdgeInsets.only(top: 5, bottom: 5),
            color: TVTheme.secondColor.withOpacity(0.5),
            alignment: Alignment.center,
            height: 45,
            child: const Text(
              "Agent Card / Accept-Reject",
              style: TextStyle(
                fontWeight: FontWeight.w600,
                fontSize: 18,
              ),
            ),
          ),
          TaxiCardLayout(
            context: context,
            referenceNo: '123',
            tourType: 'Local',
            assessmentCode: 'TVTEST56564',
            pickupDatetime: '2024-10-10 12:10:00',
            pickupLocation: 'Supreme Headquarters',
            dropLocation: '18 Highstreet, Baner-Pashan Link Road',
            statusCompany: 'Approved',
            passengerList: [],
            statusTv: 'Pending',
            onAssignTap: () {
              ScaffoldMessenger.of(context)
                  .showSnackBar(const SnackBar(content: Text("Clicked On Assign")));
            },
            onAcceptTap: () {
              ScaffoldMessenger.of(context)
                  .showSnackBar(const SnackBar(content: Text("Clicked On Accept")));
            },
            onRejectTap: () {
              ScaffoldMessenger.of(context)
                  .showSnackBar(const SnackBar(content: Text("Clicked On Reject")));
            },
          ).agentNew(),

          // 代理卡/分配示例
          Container(
            margin: const EdgeInsets.only(top: 5, bottom: 5),
            color: TVTheme.secondColor.withOpacity(0.5),
            alignment: Alignment.center,
            height: 45,
            child: const Text(
              "Agent Card / Assign",
              style: TextStyle(
                fontWeight: FontWeight.w600,
                fontSize: 18,
              ),
            ),
          ),
          TaxiCardLayout(
            context: context,
            referenceNo: '123',
            tourType: 'Local',
            assessmentCode: 'TVTEST56564',
            pickupDatetime: '2024-10-10 12:10:00',
            pickupLocation: 'Supreme Headquarters',
            dropLocation: '18 Highstreet, Baner-Pashan Link Road',
            statusCompany: 'Approved',
            passengerList: [],
            statusTv: 'Accepted',
            onAssignTap: () {
              ScaffoldMessenger.of(context)
                  .showSnackBar(const SnackBar(content: Text("Clicked On Assign")));
            },
            onAcceptTap: () {
              ScaffoldMessenger.of(context)
                  .showSnackBar(const SnackBar(content: Text("Clicked On Accept")));
            },
            onRejectTap: () {
              ScaffoldMessenger.of(context)
                  .showSnackBar(const SnackBar(content: Text("Clicked On Reject")));
            },
          ).agentNew(),

          // 审批卡/审批-拒绝示例
          Container(
            margin: const EdgeInsets.only(top: 5, bottom: 5),
            color: TVTheme.secondColor.withOpacity(0.5),
            alignment: Alignment.center,
            height: 45,
            child: const Text(
              "Approver Card / Approve-Reject",
              style: TextStyle(
                fontWeight: FontWeight.w600,
                fontSize: 18,
              ),
            ),
          ),
          TaxiCardLayout(
            context: context,
            referenceNo: '123',
            tourType: 'Local',
            assessmentCode: 'TVTEST56564',
            pickupDatetime: '2024-10-10 12:10:00',
            pickupLocation: 'Supreme Headquarters',
            dropLocation: '18 Highstreet, Baner-Pashan Link Road',
            statusCompany: 'Approved',
            passengerList: [],
            statusTv: 'Accepted',
            onApproveTap: () {
              ScaffoldMessenger.of(context)
                  .showSnackBar(const SnackBar(content: Text("Clicked On Approve")));
            },
            onRejectTap: () {
              ScaffoldMessenger.of(context)
                  .showSnackBar(const SnackBar(content: Text("Clicked On Reject")));
            },
          ).approverNew(),
        ],
      ),
    );
  }
}

额外信息

此插件由BAI Infosolutions管理，所有编辑和更新的权利均保留给BAI Infosolutions。

示例

以下是使用booking_card_layout的完整示例代码：

import 'package:booking_card_layout/taxi_card_layout.dart';
import 'package:booking_card_layout/bus_booking_layout.dart';
import 'package:booking_card_layout/hotel_card_layout.dart';
import 'package:booking_card_layout/train_card_layout.dart';
import 'package:booking_card_layout/flight_card_layout.dart';
import 'package:booking_card_layout/tv_theme.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Card Layouts',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: TVTheme.primaryColor),
        useMaterial3: true,
      ),
      home: const HomeScreen(),
    );
  }
}

class AllCards extends StatelessWidget {
  const AllCards({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          "All Card Layouts",
          style: TextStyle(color: Colors.black),
        ),
        backgroundColor: TVTheme.secondColor,
      ),
      body: ListView(
        children: [
          const Text(
            "Taxi Card Layout",
            style: TextStyle(fontWeight: FontWeight.w600, fontSize: 18),
          ),
          TaxiCardLayout(
            context: context,
            referenceNo: '123',
            tourType: 'Local',
            assessmentCode: 'TVTEST56564',
            pickupDatetime: '2024-10-10 12:10:00',
            pickupLocation: 'Supreme Headquarters',
            dropLocation: '18 Highstreet, Baner-Pashan Link Road',
            statusCompany: 'Approved',
            passengerList: [],
            statusTv: 'Accepted',
            onAssignTap: () {
              ScaffoldMessenger.of(context)
                  .showSnackBar(const SnackBar(content: Text("Clicked On Assign")));
            },
            onAcceptTap: () {
              ScaffoldMessenger.of(context)
                  .showSnackBar(const SnackBar(content: Text("Clicked On Accept")));
            },
            onRejectTap: () {
              ScaffoldMessenger.of(context)
                  .showSnackBar(const SnackBar(content: Text("Clicked On Reject")));
            },
          ).approverNew(),

          const Text(
            "Hotel Card Layout",
            style: TextStyle(fontWeight: FontWeight.w600, fontSize: 18),
          ),
          HotelBookingLayout(
            context: context,
            referenceNo: "123",
            city: "Pune",
            assCode: "TVTEST56564",
            arrivalDatetime: "2024-02-10 12:23",
            depDatetime: "2024-02-12 12:23",
            statusCompany: "Approved",
            people: [],
            statusTv: "Accepted",
            userName: "Demo Spoc",
            onRejectTap: () {},
            onAcceptTap: () {},
            onAssignTap: () {},
          ).newBookingAgent(),

          const Text(
            "Train Card Layout",
            style: TextStyle(fontWeight: FontWeight.w600, fontSize: 18),
          ),
          TrainCardLayout(
            context: context,
            referenceNo: "123",
            assessmentCode: "assessmentCode",
            dateOfJourney: "2024-10-10 12:10:00",
            fromCity: "Pune",
            toCity: "Mumbai",
            statusCompany: "Approved",
            people: [],
            statusTv: "Accepted",
            userName: "Spoc Name",
          ).normal(),

          const Text(
            "Bus Card Layout",
            style: TextStyle(fontWeight: FontWeight.w600, fontSize: 18),
          ),
          BusCardLayout(
            context: context,
            referenceNo: '123',
            assessmentCode: 'TVTEST56564',
            pickupDatetime: '2024-10-10 12:10:00',
            pickupLocation: 'Supreme Headquarters',
            dropLocation: '18 Highstreet, Baner-Pashan Link Road',
            statusCompany: 'Approved',
            statusTv: 'Accepted',
            people: [],
            spocName: 'Pavan Patil',
          ).normal(),

          const Text(
            "Flight Card Layout",
            style: TextStyle(fontWeight: FontWeight.w600, fontSize: 18),
          ),
          FlightCardLayout(
            type: "normal",
            context: context,
            referenceNo: '123',
            assessmentCode: 'TVTEST56564',
            statusCompany: 'Approved',
            statusTv: 'Accepted',
            people: [],
            assessmentCity: 'Pune',
            departureDate: '2024-02-20',
            fromCity: 'Pune',
            toCity: 'Delhi',
            userName: 'Pavan Patil',
          ),
        ],
      ),
    );
  }
}

更多关于Flutter卡片布局插件booking_card_layout的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

yuanlaile 1楼作者

更多关于Flutter卡片布局插件booking_card_layout的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，以下是如何在Flutter项目中使用booking_card_layout插件的一个简单示例。这个插件通常用于创建具有卡片布局的UI，特别适用于预订类应用。请注意，你需要先确保在pubspec.yaml文件中添加了该依赖项：

dependencies:
  flutter:
    sdk: flutter
  booking_card_layout: ^最新版本号  # 请替换为实际的最新版本号

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

下面是一个基本的示例代码，展示如何使用booking_card_layout插件来创建一个卡片布局：

import 'package:flutter/material.dart';
import 'package:booking_card_layout/booking_card_layout.dart'; // 导入插件

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Booking Card Layout Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: BookingCardLayoutDemo(),
    );
  }
}

class BookingCardLayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Booking Card Layout Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: BookingCardLayout(
          // 配置BookingCardLayout的属性
          cardAspectRatio: 1.5, // 卡片的宽高比
          mainAxisSpacing: 16.0, // 主轴方向上的间距
          crossAxisSpacing: 16.0, // 交叉轴方向上的间距
          children: <Widget>[
            // 创建第一个卡片
            BookingCard(
              header: Container(
                color: Colors.blue,
                child: Center(child: Text('Card 1', style: TextStyle(color: Colors.white))),
              ),
              content: Container(
                padding: EdgeInsets.all(16.0),
                child: Text('This is the content of Card 1.'),
              ),
              footer: Container(
                color: Colors.blue.withOpacity(0.5),
                child: Center(child: Text('Footer 1', style: TextStyle(color: Colors.white))),
              ),
            ),
            // 创建第二个卡片
            BookingCard(
              header: Container(
                color: Colors.green,
                child: Center(child: Text('Card 2', style: TextStyle(color: Colors.white))),
              ),
              content: Container(
                padding: EdgeInsets.all(16.0),
                child: Text('This is the content of Card 2.'),
              ),
              footer: Container(
                color: Colors.green.withOpacity(0.5),
                child: Center(child: Text('Footer 2', style: TextStyle(color: Colors.white))),
              ),
            ),
            // 可以根据需要添加更多卡片
          ],
        ),
      ),
    );
  }
}

// BookingCard是一个自定义的卡片组件，通常booking_card_layout插件会提供类似的组件
// 如果你使用的booking_card_layout版本不包含BookingCard，你可以自行定义一个
class BookingCard extends StatelessWidget {
  final Widget header;
  final Widget content;
  final Widget footer;

  BookingCard({required this.header, required this.content, required this.footer});

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        header,
        Expanded(child: content),
        footer,
      ],
    );
  }
}

注意：

booking_card_layout插件的实际API可能与示例中的不完全一致。请参考官方文档或插件的源代码来获取最新的API信息。
如果插件本身提供了BookingCard或类似组件，请直接使用插件提供的组件，而不是自定义BookingCard类。
上述代码中的BookingCard类是一个示例，用于展示卡片的结构。如果插件提供了具体的卡片组件，请使用插件提供的组件。

希望这个示例能够帮助你开始在Flutter项目中使用booking_card_layout插件。