Flutter时间线展示插件timeline_tile_nic的使用
Flutter时间线展示插件timeline_tile_nic的使用
timeline_tile 是一个用于在Flutter中构建可自定义时间线的插件。它提供了丰富的配置选项，可以轻松创建各种类型的时间线，如垂直和水平时间线、带图标的时间线等。下面是一个完整的示例demo，展示了如何使用 timeline_tile 插件来创建一个简单的时间线。
1. 添加依赖
首先，在 pubspec.yaml 文件中添加 timeline_tile 依赖：
dependencies:
flutter:
sdk: flutter
timeline_tile: ^2.0.3 # 请根据最新版本进行调整
然后运行 flutter pub get 来安装依赖。
2. 创建主应用
接下来，我们创建一个简单的Flutter应用，并在其中使用 TimelineTile 来展示时间线。
import 'package:flutter/material.dart';
import 'package:timeline_tile/timeline_tile.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
title: 'TimelineTile Demo',
theme: ThemeData(
brightness: Brightness.light,
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: TimelinePage(),
);
}
}
class TimelinePage extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('TimelineTile Demo'),
),
body: ListView(
children: [
// 第一个时间线项
TimelineTile(
alignment: TimelineAlign.manual, // 手动对齐
lineXY: 0.3, // 线的位置为30%
isFirst: true, // 这是第一个时间线项
indicatorStyle: IndicatorStyle(
width: 20, // 指示器宽度
color: Colors.blue, // 指示器颜色
iconStyle: IconStyle(
icon: Icon(Icons.check, color: Colors.white), // 指示器中的图标
),
),
startChild: Container(
padding: EdgeInsets.all(16),
child: Text(
'开始任务',
style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
),
),
endChild: Container(
padding: EdgeInsets.all(16),
child: Text(
'这是任务的描述，描述了任务的具体内容。',
style: TextStyle(fontSize: 14),
),
),
),
// 第二个时间线项
TimelineTile(
alignment: TimelineAlign.center, // 居中对齐
indicatorStyle: IndicatorStyle(
width: 20, // 指示器宽度
color: Colors.green, // 指示器颜色
),
startChild: Container(
padding: EdgeInsets.all(16),
child: Text(
'完成任务1',
style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
),
),
endChild: Container(
padding: EdgeInsets.all(16),
child: Text(
'任务1已经完成，继续下一个任务。',
style: TextStyle(fontSize: 14),
),
),
),
// 第三个时间线项
TimelineTile(
alignment: TimelineAlign.manual, // 手动对齐
lineXY: 0.7, // 线的位置为70%
isLast: true, // 这是最后一个时间线项
indicatorStyle: IndicatorStyle(
width: 20, // 指示器宽度
color: Colors.red, // 指示器颜色
iconStyle: IconStyle(
icon: Icon(Icons.close, color: Colors.white), // 指示器中的图标
),
),
startChild: Container(
padding: EdgeInsets.all(16),
child: Text(
'结束任务',
style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
),
),
endChild: Container(
padding: EdgeInsets.all(16),
child: Text(
'所有任务已完成，任务结束。',
style: TextStyle(fontSize: 14),
),
),
),
],
),
);
}
}
更多关于Flutter时间线展示插件timeline_tile_nic的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter时间线展示插件timeline_tile_nic的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，以下是一个关于如何使用 timeline_tile_nic 插件在 Flutter 中展示时间线的示例代码。timeline_tile_nic 是一个用于在 Flutter 应用中创建时间线视图的流行插件。
首先，确保你已经在 pubspec.yaml 文件中添加了 timeline_tile_nic 依赖：
dependencies:
flutter:
sdk: flutter
timeline_tile_nic: ^最新版本号 # 替换为实际最新版本号
然后运行 flutter pub get 来安装依赖。
接下来，下面是一个简单的示例代码，展示如何使用 timeline_tile_nic 插件来创建一个时间线视图：
import 'package:flutter/material.dart';
import 'package:timeline_tile_nic/timeline_tile.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Timeline Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: TimelineScreen(),
);
}
}
class TimelineScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Timeline Demo'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: ListView(
children: <Widget>[
TimelineTile(
alignment: TimelineAlignment.center,
indicatorStyle: IndicatorStyle(
width: 4.0,
height: 4.0,
color: Colors.blue,
borderRadius: 2.0,
),
leftChild: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 5,
blurRadius: 7,
offset: Offset(0, 3), // changes position of shadow
),
],
),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'Event 1',
style: TextStyle(fontSize: 18),
),
),
),
rightChild: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 5,
blurRadius: 7,
offset: Offset(0, 3), // changes position of shadow
),
],
),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Description for Event 1',
style: TextStyle(fontSize: 14),
),
SizedBox(height: 8),
Text(
'Date: 2023-10-01',
style: TextStyle(fontSize: 12, color: Colors.grey),
),
],
),
),
),
),
SizedBox(height: 20),
TimelineTile(
alignment: TimelineAlignment.center,
indicatorStyle: IndicatorStyle(
width: 4.0,
height: 4.0,
color: Colors.green,
borderRadius: 2.0,
),
leftChild: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 5,
blurRadius: 7,
offset: Offset(0, 3), // changes position of shadow
),
],
),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'Event 2',
style: TextStyle(fontSize: 18),
),
),
),
rightChild: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 5,
blurRadius: 7,
offset: Offset(0, 3), // changes position of shadow
),
],
),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Description for Event 2',
style: TextStyle(fontSize: 14),
),
SizedBox(height: 8),
Text(
'Date: 2023-10-05',
style: TextStyle(fontSize: 12, color: Colors.grey),
),
],
),
),
),
),
],
),
),
);
}
}
在这个示例中，我们创建了一个包含两个时间线事件的简单页面。每个时间线事件都由 TimelineTile 组件表示，其中 leftChild 和 rightChild 分别表示时间线两侧的内容。你可以根据需要自定义这些组件的内容和样式。
indicatorStyle 用于定义时间线指示器的样式，包括宽度、高度、颜色和圆角半径。
你可以根据需要添加更多的事件，或者进一步自定义每个事件的样式和内容。
