Flutter动画时间线展示插件animated_scrollable_timeline的使用

Flutter动画时间线展示插件animated_scrollable_timeline的使用

动画滚动时间线插件 #

简介

animated_scrollable_timeline 是一个用于创建动画滚动时间线的 Flutter 插件。通过此插件，您可以轻松地在应用中展示具有动画效果的时间线。

使用示例

以下是一个简单的示例，演示如何使用 animated_scrollable_timeline 插件来创建一个滚动时间线。

import 'package:animated_scrollable_timeline/animated_scrollable_timeline.dart';
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "动画滚动时间线示例",
      theme: ThemeData.light(useMaterial3: true),
      darkTheme: ThemeData.dark(useMaterial3: true),
      home: Scaffold(
        appBar: AppBar(
          title: const Text("动画滚动时间线示例"),
        ),
        body: Stack(
          children: [
            // 使用 AnimatedScrollableTimelineWidget 创建滚动时间线
            AnimatedScrollableTimelineWidget(
              limitDateTime: () => DateTime.now(), // 设置当前时间作为限制
              dateTimeFormat: (dateTime) {
                // 自定义日期时间格式化
                return DateFormat('HH:mm:ss').format(dateTime);
              },
            ),
          ],
        ),
      ),
    );
  }
}

代码解释

  • 导入库:

    import 'package:animated_scrollable_timeline/animated_scrollable_timeline.dart';
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';

    导入所需的库，包括 animated_scrollable_timeline 和 intl（用于日期时间格式化）。

  • 主函数:

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

    定义主函数，运行 MyApp 应用程序。

  • MyApp 类:

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "动画滚动时间线示例",
      theme: ThemeData.light(useMaterial3: true),
      darkTheme: ThemeData.dark(useMaterial3: true),
      home: Scaffold(
        appBar: AppBar(
          title: const Text("动画滚动时间线示例"),
        ),
        body: Stack(
          children: [
            // 使用 AnimatedScrollableTimelineWidget 创建滚动时间线
            AnimatedScrollableTimelineWidget(
              limitDateTime: () => DateTime.now(), // 设置当前时间作为限制
              dateTimeFormat: (dateTime) {
                // 自定义日期时间格式化
                return DateFormat('HH:mm:ss').format(dateTime);
              },
            ),
          ],
        ),
      ),
    );
  }
}

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

1 回复

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


当然，animated_scrollable_timeline 是一个用于在 Flutter 中创建时间线动画的非常有用的插件。下面是一个示例代码，展示了如何使用 animated_scrollable_timeline 来创建一个简单的时间线动画。

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

dependencies:
  flutter:
    sdk: flutter
  animated_scrollable_timeline: ^x.y.z  # 请替换为最新版本号

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

接下来是示例代码：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Animated Scrollable Timeline Example'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: AnimatedScrollableTimeline(
            position: TimelinePosition(index: 0), // 初始位置
            items: _buildItems(),
            builder: (context, position, itemData) {
              return _buildTimelineCard(itemData);
            },
          ),
        ),
      ),
    );
  }

  List<TimelineItem> _buildItems() {
    return [
      TimelineItem(
        index: 0,
        start: DateTime(2023, 1, 1),
        content: 'Event 1',
      ),
      TimelineItem(
        index: 1,
        start: DateTime(2023, 3, 15),
        content: 'Event 2',
      ),
      TimelineItem(
        index: 2,
        start: DateTime(2023, 6, 1),
        content: 'Event 3',
      ),
      TimelineItem(
        index: 3,
        start: DateTime(2023, 9, 10),
        content: 'Event 4',
      ),
    ];
  }

  Widget _buildTimelineCard(TimelineItem itemData) {
    return Card(
      elevation: 4.0,
      margin: EdgeInsets.symmetric(vertical: 8.0),
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              '${itemData.content}',
              style: TextStyle(fontSize: 18),
            ),
            SizedBox(height: 8.0),
            Text(
              'Date: ${itemData.start.toLocal()}',
              style: TextStyle(color: Colors.grey),
            ),
          ],
        ),
      ),
    );
  }
}

class TimelineItem {
  final int index;
  final DateTime start;
  final String content;

  TimelineItem({required this.index, required this.start, required this.content});
}

解释

  1. 依赖引入：在 pubspec.yaml 中添加 animated_scrollable_timeline 依赖。
  2. 构建主应用：MyApp 类中定义了一个简单的 Flutter 应用，包含一个 Scaffold 和一个 AnimatedScrollableTimeline 组件。
  3. 时间线数据：_buildItems 方法返回一个 TimelineItem 对象的列表，每个对象包含索引、开始日期和内容。
  4. 时间线项构建器：_buildTimelineCard 方法用于构建每个时间线项的 UI，这里简单地使用了一个 Card 组件。
  5. TimelineItem 类：定义了一个简单的数据类来存储时间线项的索引、开始日期和内容。

运行这个示例代码，你会看到一个可滚动的时间线，每个时间线项都有一个卡片显示事件内容及其日期。当用户滚动时，时间线会平滑地动画滚动到相应的位置。

请根据你的实际需求进一步定制和扩展这个示例。

回到顶部