Flutter气泡时间线插件lecle_bubble_timeline的使用

Flutter气泡时间线插件lecle_bubble_timeline的使用

Lecle Bubble Timeline Package

一个为您的Flutter项目提供交互式时间线组件的插件。该插件是从bubble_timeline包迁移而来的。

此组件可以用于创建事件时间线或特定旅行路线的时间线。每个事件气泡都可以轻松自定义。

截图

安装

要使用此插件，请在pubspec.yaml文件中添加以下依赖项：

dependencies:
  lecle_bubble_timeline: ^0.0.1

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

如何使用

要使用BubbleTimeline组件，只需创建一个BubbleTimeline小部件，并传递所需的参数：

import 'package:lecle_bubble_timeline/lecle_bubble_timeline.dart';

class HomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Bubble Timeline Example')),
      body: BubbleTimeline(
        bubbleSize: 120,
        // 时间线气泡项列表
        items: [
          TimelineItem(
              title: 'Boat',
              subtitle: 'Travel through Oceans',
              icon: Icon(
                Icons.directions_boat,
                color: Colors.black,
              ),
              bubbleColor: Colors.red,
              description: 'Description for boat',
              titleStyle: TextStyle(fontSize: 25.0, fontWeight: FontWeight.w700),
              subtitleStyle: TextStyle(fontSize: 16.0, fontWeight: FontWeight.w500),
              descriptionStyle: TextStyle(fontSize: 12.0),
          ),
          TimelineItem(
              title: 'Bike',
              subtitle: 'Road Trips are best',
              icon: Icon(
                Icons.directions_bike,
                color: Colors.black,
              ),
              bubbleColor: Colors.yellow,
              description: 'Description for bike',
              titleStyle: TextStyle(fontSize: 25.0, fontWeight: FontWeight.w700),
              subtitleStyle: TextStyle(fontSize: 16.0, fontWeight: FontWeight.w500),
              descriptionStyle: TextStyle(fontSize: 12.0),
          ),
          TimelineItem(
              title: 'Bus',
              subtitle: 'I like to go with friends',
              icon: Icon(
                Icons.directions_bus,
                color: Colors.black,
              ),
              bubbleColor: Colors.green,
              description: 'Description for bus',
              titleStyle: TextStyle(fontSize: 25.0, fontWeight: FontWeight.w700),
              subtitleStyle: TextStyle(fontSize: 16.0, fontWeight: FontWeight.w500),
              descriptionStyle: TextStyle(fontSize: 12.0),
          ),
        ],
        stripColor: Colors.teal,
        dividerCircleColor: Colors.white,
      ),
    );
  }
}

使用TimelineItem来添加时间线中的项目：

TimelineItem(
  title: 'Boat',
  subtitle: 'Travel through Oceans',
  icon: Icon(
    Icons.directions_boat,
    color: Colors.black,
  ),
  bubbleColor: Colors.red,
  description: 'Description for boat',
  titleStyle: TextStyle(fontSize: 25.0, fontWeight: FontWeight.w700),
  subtitleStyle: TextStyle(fontSize: 16.0, fontWeight: FontWeight.w500),
  descriptionStyle: TextStyle(fontSize: 12.0),
),

示例代码

下面是一个完整的示例代码，展示了如何在Flutter应用中使用lecle_bubble_timeline插件。

example/lib/main.dart

import 'package:flutter/material.dart';

import './home_page.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: HomePage(),
    );
  }
}

example/lib/home_page.dart

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

class HomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Bubble Timeline Example')),
      body: BubbleTimeline(
        bubbleSize: 120,
        // 时间线气泡项列表
        items: [
          TimelineItem(
              title: 'Boat',
              subtitle: 'Travel through Oceans',
              icon: Icon(
                Icons.directions_boat,
                color: Colors.black,
              ),
              bubbleColor: Colors.red,
              description: 'Description for boat',
              titleStyle: TextStyle(fontSize: 25.0, fontWeight: FontWeight.w700),
              subtitleStyle: TextStyle(fontSize: 16.0, fontWeight: FontWeight.w500),
              descriptionStyle: TextStyle(fontSize: 12.0),
          ),
          TimelineItem(
              title: 'Bike',
              subtitle: 'Road Trips are best',
              icon: Icon(
                Icons.directions_bike,
                color: Colors.black,
              ),
              bubbleColor: Colors.yellow,
              description: 'Description for bike',
              titleStyle: TextStyle(fontSize: 25.0, fontWeight: FontWeight.w700),
              subtitleStyle: TextStyle(fontSize: 16.0, fontWeight: FontWeight.w500),
              descriptionStyle: TextStyle(fontSize: 12.0),
          ),
          TimelineItem(
              title: 'Bus',
              subtitle: 'I like to go with friends',
              icon: Icon(
                Icons.directions_bus,
                color: Colors.black,
              ),
              bubbleColor: Colors.green,
              description: 'Description for bus',
              titleStyle: TextStyle(fontSize: 25.0, fontWeight: FontWeight.w700),
              subtitleStyle: TextStyle(fontSize: 16.0, fontWeight: FontWeight.w500),
              descriptionStyle: TextStyle(fontSize: 12.0),
          ),
        ],
        stripColor: Colors.teal,
        dividerCircleColor: Colors.white,
      ),
    );
  }
}