Flutter时间线卡片展示插件easy_flutter_timeline_card的使用

发布于 1周前 作者 songsunli 来自 Flutter

Flutter时间线卡片展示插件easy_flutter_timeline_card的使用

一个用于在你的应用中创建美观时间线的Flutter包。它支持本地资源和网络图像。

功能

  • 可定制的时间线卡片小部件
  • 支持从本地资源或网络URL添加图像
  • 自动处理卡片之间的连接线
  • 易于集成到你的Flutter项目中

安装

在pubspec.yaml文件中添加以下内容：

dependencies:
  easy_flutter_timeline_card: ^<最新版本>

然后运行flutter pub get来安装该包。

示例截图

使用

在Dart文件中导入包：

import 'package:easy_flutter_timeline_card/timeline_card.dart';

在你的应用中使用TimelineCard小部件：

// 使用本地资源图像
TimelineCard.asset(
  title: '本地资源图像卡片',
  subtitle: '卡片副标题',
  imageUrl: 'assets/card_image.jpg',
)

// 使用网络图像
TimelineCard.network(
  title: '网络图像卡片',
  subtitle: '卡片副标题',
  imageUrl: 'https://example.com/card_image.jpg',
)

自定义

参数 描述
title 卡片的标题文字
subtitle 卡片的副标题文字
imageUrl 图像的URL或路径。使用TimelineCard.asset为本地资源图像，使用TimelineCard.network为网络图像。
isLast 布尔值，表示卡片是否是时间线中的最后一张。设置为true以调整连接线。

示例

一个包含样例应用的目录在包中可用。你可以运行它来查看带有本地资源和网络图像的时间线卡片的实际效果。

贡献

欢迎贡献！如果你发现任何问题或有改进建议，请在GitHub仓库上打开一个issue或提交pull request。

许可证

该包发布在MIT许可证下。详情请参阅LICENSE文件。

示例代码

import 'package:easy_flutter_timeline_card/timeline_card.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: 'Easy Flutter Timeline Card 示例',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Easy Flutter Timeline Card 示例'),
      ),
      body: ListView(
        children: [
          // 第一张卡片，使用本地资源图像
          TimelineCard.asset(
            title: '本地资源图像卡片 1',
            subtitle: '副标题 1',
            imageUrl: 'assets/image1.jpg',
          ),
          // 第二张卡片，使用网络图像
          TimelineCard.network(
            title: '网络图像卡片 2',
            subtitle: '副标题 2',
            imageUrl: 'https://example.com/image2.jpg',
          ),
          // 第三张卡片，使用本地资源图像，并设置为最后一张卡片
          TimelineCard.asset(
            title: '本地资源图像卡片 3',
            subtitle: '副标题 3',
            imageUrl: 'assets/image3.jpg',
            isLast: true,
          ),
        ],
      ),
    );
  }
}

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

1 回复

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


当然，以下是如何在Flutter项目中使用easy_flutter_timeline_card插件来展示时间线卡片的示例代码。

首先，确保你已经在pubspec.yaml文件中添加了easy_flutter_timeline_card依赖项：

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

然后运行flutter pub get来获取依赖项。

接下来，你可以在你的Flutter项目中使用EasyTimelineCard组件来展示时间线卡片。以下是一个完整的示例代码：

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

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

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

class TimelinePage extends StatelessWidget {
  final List<TimelineEvent> events = [
    TimelineEvent(
      index: 0,
      content: Text('Event 1: This is the first event'),
      time: Text('2023-10-01'),
      icon: Icon(Icons.event),
    ),
    TimelineEvent(
      index: 1,
      content: Text('Event 2: This is the second event'),
      time: Text('2023-10-05'),
      icon: Icon(Icons.announcement),
    ),
    TimelineEvent(
      index: 2,
      content: Text('Event 3: This is the third event'),
      time: Text('2023-10-10'),
      icon: Icon(Icons.star),
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Timeline Card Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: ListView.builder(
          itemCount: events.length,
          itemBuilder: (context, index) {
            return Padding(
              padding: const EdgeInsets.symmetric(vertical: 8.0),
              child: EasyTimelineCard(
                event: events[index],
                alignment: TimelineAlignment.centered, // 或者 TimelineAlignment.start
              ),
            );
          },
        ),
      ),
    );
  }
}

class TimelineEvent {
  final int index;
  final Widget content;
  final Widget time;
  final Widget icon;

  TimelineEvent({required this.index, required this.content, required this.time, required this.icon});
}

在这个示例中：

  1. TimelineEvent类用于存储时间线事件的数据，包括事件的索引、内容、时间和图标。
  2. TimelinePage是主页面，其中包含一个ListView.builder，用于根据事件列表动态生成时间线卡片。
  3. EasyTimelineCard组件用于展示每个时间线事件，alignment属性用于设置时间线卡片的对齐方式。

这个示例展示了如何使用easy_flutter_timeline_card插件来创建一个简单的时间线卡片展示界面。你可以根据需要自定义每个事件的内容、时间和图标。

回到顶部