Flutter自定义时间线插件flutter_custom_timeline的使用

Flutter自定义时间线插件flutter_custom_timeline的使用

本README描述了该包的功能。如果你将此包发布到pub.dev，则此README的内容将出现在你的包的首页上。

特性

  • 易定制化：轻松自定义颜色和对齐方式，支持水平和垂直对齐。
  • 灵活的大小控制：根据需求定义头部节点（消息节点）的大小。指定宽度和高度以确保在应用程序UI中完美适配。
  • 可用于展示体育时间线，如足球、板球、订单详情等。
  • 默认情况下带有头部节点。如果不需要头部节点，可以根据需求进行自定义。

开始使用

导入包：

import 'package:flutter_custom_timeline/flutter_custom_timeline.dart';

使用方法

示例：适用于足球、板球和其他事件步骤

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: FlutterCustomTimeline(
        alignment: TimelineAlign.manual,
        lineXy: 0.3,
        headerXy: -0.7,
        steppers: getStepperData(),
      ),
    );
  }
}

List<StepperData> getStepperData() {
  return [
    StepperData(
      headerTitle: "比赛开始",
      timeLineData: [
        const TimeLineSteps(
          leftTitle: "4:30 AM",
          rightTitle: '犯规!',
          rightSubtitle: '大卫·路易斯放倒了对手。',
        ),
        const TimeLineSteps(
          rightTitle: '黄牌',
          leftTitle: "4:30 AM",
          rightSubtitle: '这张黄牌是应得的。',
        ),
        const TimeLineSteps(
          leftTitle: "4:30 AM",
          rightTitle: '进球!',
          rightSubtitle: '梅西从近距离将球打进空门。',
        ),
        const TimeLineSteps(
          rightTitle: '再来一个!',
          leftTitle: "4:30 AM",
          rightSubtitle: '皮克因与裁判争论而得到一张黄牌。',
        ),
        const TimeLineSteps(
          leftTitle: "4:30 AM",
          rightTitle: '哎哟',
          rightSubtitle: '厄齐尔痛苦地倒在地上，现在可以接受治疗。',
        ),
      ],
    ),
    StepperData(
      headerTitle: "下半场开始",
      timeLineData: [
        const TimeLineSteps(
          leftTitle: "4:30 AM",
          rightTitle: '犯规!',
          rightSubtitle: '大卫·路易斯放倒了对手。',
        ),
        const TimeLineSteps(
          rightTitle: '黄牌',
          leftTitle: "4:30 AM",
          rightSubtitle: '这张黄牌是应得的。',
        ),
        const TimeLineSteps(
          leftTitle: "4:30 AM",
          rightTitle: '进球!',
          rightSubtitle: '梅西从近距离将球打进空门。',
        ),
        const TimeLineSteps(
          rightTitle: '再来一个!',
          leftTitle: "4:30 AM",
          rightSubtitle: '皮克因与裁判争论而得到一张黄牌。',
        ),
        const TimeLineSteps(
          leftTitle: "4:30 AM",
          rightTitle: '哎哟',
          rightSubtitle: '厄齐尔痛苦地倒在地上，现在可以接受治疗。',
        ),
      ],
    ),
  ];
}

左对齐

左对齐示例

中心对齐

中心对齐示例

时间线构建器

只有在你提供自己的时间线时，isHeaderNode属性才有效。在你的自定义时间线Widget中，其他属性将生效。

FlutterCustomTimeline(
  timeLineBuilder: (context, index) {
    return TimelineTile(
      isFirst: true,
      startChild: Text("日期"),
      endChild: Text("标题"),
    );
  },
  // alignment: TimelineAlign.manual,
  // lineXy: 0.3,
  // headerXy: -0.7,
  steppers: getStepperData(),
)

更多关于Flutter自定义时间线插件flutter_custom_timeline的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter自定义时间线插件flutter_custom_timeline的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用flutter_custom_timeline插件来创建一个自定义时间线的基本示例。这个插件允许你创建时间线视图，通常用于展示事件的时间顺序。

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

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

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

接下来，你可以在你的Flutter应用中使用flutter_custom_timeline。以下是一个简单的示例，展示了如何创建和显示一个时间线：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Custom Timeline Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: TimelineScreen(),
    );
  }
}

class TimelineScreen extends StatelessWidget {
  final List<TimelineEvent> events = [
    TimelineEvent(
      title: 'Event 1',
      description: 'This is the first event description.',
      dateTime: DateTime.now().subtract(Duration(days: 3)),
      icon: Icons.event,
      color: Colors.blue,
    ),
    TimelineEvent(
      title: 'Event 2',
      description: 'This is the second event description.',
      dateTime: DateTime.now().subtract(Duration(days: 1)),
      icon: Icons.announcement,
      color: Colors.green,
    ),
    TimelineEvent(
      title: 'Event 3',
      description: 'This is the third event description.',
      dateTime: DateTime.now(),
      icon: Icons.today,
      color: Colors.red,
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Custom Timeline Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: CustomTimeline(
          events: events,
          onEventClick: (event) {
            // Handle event click here
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(
                content: Text('You clicked on ${event.title}'),
              ),
            );
          },
        ),
      ),
    );
  }
}

class TimelineEvent {
  final String title;
  final String description;
  final DateTime dateTime;
  final IconData icon;
  final Color color;

  TimelineEvent({
    required this.title,
    required this.description,
    required this.dateTime,
    required this.icon,
    required this.color,
  });
}

在上面的代码中，我们定义了一个TimelineEvent类来存储时间线事件的属性，如标题、描述、日期时间、图标和颜色。然后，在TimelineScreen中，我们创建了一个包含几个示例事件的列表，并使用CustomTimeline小部件来显示这些事件。

CustomTimeline小部件接受一个事件列表和一个可选的onEventClick回调，该回调在用户点击某个事件时被调用。

请确保你已经在你的Flutter项目中正确安装了flutter_custom_timeline插件，并根据你的需求调整事件数据和其他UI细节。

注意：flutter_custom_timeline插件的具体API可能会随着版本更新而变化，因此请参考最新的插件文档以获取最准确的信息。

回到顶部