Flutter订单追踪插件order_tracker_zen的使用

制作一个精美的订单追踪器对于你的电商应用来说不是问题。

展示

有什么不同？

我们的团队始终乐于帮助像你这样的技术爱好者。如果你遇到任何困难，可以通过电子邮件联系我们：dev_support@zenzzen.com

如何开始？

你可以通过以下命令从命令行添加依赖：

flutter pub add order_tracker_zen

或者在你的pubspec.yaml文件中添加它：

dependencies:
  order_tracker_zen:

如何使用？

使用它就像创建一个TextFormField一样简单。你不相信？让我展示给你看：

OrderTrackerZen(
  tracker_data: [
    TrackerData(
      title: "订单已下",
      date: "周六, 8 四月 '22",
      tracker_details: [
        TrackerDetails(
          title: "您的订单已在Zenzzen下单",
          datetime: "周六, 8 四月 '22 - 17:17",
        ),
        TrackerDetails(
          title: "Zenzzen安排了回拨请求",
          datetime: "周六, 8 四月 '22 - 17:42",
        ),
      ],
    ),
    TrackerData(
      title: "订单已发货",
      date: "周六, 8 四月 '22",
      tracker_details: [
        TrackerDetails(
          title: "您的订单已通过MailDeli发货",
          datetime: "周六, 8 四月 '22 - 17:50",
        ),
      ],
    ),
    TrackerData(
      title: "订单已送达",
      date: "周六, 8 四月 '22",
      tracker_details: [
        TrackerDetails(
          title: "您已通过MailDeli收到您的订单",
          datetime: "周六, 8 四月 '22 - 17:51",
        ),
      ],
    ),
  ],
)

看起来很长？别担心…这是因为这里使用了硬编码的数据。在实际项目中，你应该使用循环来动态生成这些数据。

现在让我解释一下OrderTrackerZen、TrackerData 和 TrackerDetails 是什么。

• OrderTrackerZen 是整个订单追踪器的主要容器，如：

  

• TrackerData 是包含跟踪详情的容器。

  

• TrackerDetails 是单个跟踪详情。

  

额外参数（可选）

• success_color: 进度条的颜色
• background_color: 进度条的背景颜色
• screen_background_color: 进度条上的点有一个小边框，这必须与背景颜色匹配，以达到一致的效果
• text_primary_color: 主要文本颜色
• text_secondary_color: 次要文本颜色
• isShrinked: 这个布尔值可以在收缩和详细视图之间切换

这是Zenzzen团队为你特别制作的，现在轮到你了，创造一款震撼人心的应用吧！

完整示例代码

/// Order Tracker Zen
///
/// A Flutter package that provides a simple and customizable order tracking widget for your applications.
/// This example demonstrates how to create an order tracking widget using the OrderTrackerZen package.
///
/// To use this package, add `order_tracker_zen` as a dependency in your `pubspec.yaml` file.
import 'package:flutter/material.dart';
import 'package:order_tracker_zen/order_tracker_zen.dart';

/// The main function is the entry point of the application.
void main(List<String> args) {
  runApp(MyApp());
}

/// MyApp is a StatelessWidget that acts as the root widget of the application.
///
/// It configures the MaterialApp with the necessary theme and routing information.
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        useMaterial3: true,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Order Tracker Zen"),
        ),
        body: Center(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              // Add padding around the OrderTrackerZen widget for better presentation.
              Padding(
                padding: EdgeInsets.symmetric(horizontal: 20, vertical: 30),
                // OrderTrackerZen is the main widget of the package which displays the order tracking information.
                child: OrderTrackerZen(
                  // Provide an array of TrackerData objects to display the order tracking information.
                  tracker_data: [
                    // TrackerData represents a single step in the order tracking process.
                    TrackerData(
                      title: "订单已下",
                      date: "周六, 8 四月 '22",
                      // Provide an array of TrackerDetails objects to display more details about this step.
                      tracker_details: [
                        // TrackerDetails contains detailed information about a specific event in the order tracking process.
                        TrackerDetails(
                          title: "您的订单已在Zenzzen下单",
                          datetime: "周六, 8 四月 '22 - 17:17",
                        ),
                        TrackerDetails(
                          title: "Zenzzen安排了回拨请求",
                          datetime: "周六, 8 四月 '22 - 17:42",
                        ),
                      ],
                    ),
                    // Yet another TrackerData object
                    TrackerData(
                      title: "订单已发货",
                      date: "周六, 8 四月 '22",
                      tracker_details: [
                        TrackerDetails(
                          title: "您的订单已通过MailDeli发货",
                          datetime: "周六, 8 四月 '22 - 17:50",
                        ),
                      ],
                    ),
                    // And yet another TrackerData object
                    TrackerData(
                      title: "订单已送达",
                      date: "周六, 8 四月 '22",
                      tracker_details: [
                        TrackerDetails(
                          title: "您已通过MailDeli收到您的订单",
                          datetime: "周六, 8 四月 '22 - 17:51",
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}