flutter_custom_timeline

Description:

flutter custom timeline

This Package is used to create a custom steppers inside the Header Message and Header Subtitle Node, It is a of wrapper of flutter_timeline.
Features #


Easy Customization: Effortlessly customize the colors and alignment in the form of horizontal and vertical to suit your requirements.


Flexible Size Control: Define the size of the Header Nodes(Message Nodes) according to your needs. Specify the width and height to ensure a perfect fit within your application's UI.


Use it to show the sports timeline like Football, cricket, order details stepper etc.


Default it comes with the Header Nodes. you can customise as per your need if Header nodes is not required in your requirements.


Getting started #
import package
import 'package:flutter_custom_timeline/package.dart';
copied to clipboard
Usage:- #
For Sports like Foot Ball, Cricket, and any other Events Steppers
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(),
),
);
}
}
copied to clipboard
Left Align #

Center Align #

timeLineBuilder- #
No other properties will work expect isHeaderNode if you give your own timeline. Inside you time line Widget properties will work
FlutterCustomTimeline(
timeLineBuilder: (context, index) {
return TimelineTile(
isFirst: true,
startChild: Text("Date"),
endChild: Text("Title"),
);
},
// alignment: TimelineAlign.manual,
// lineXy: 0.3,
// headerXy: -0.7,
steppers: getStepperData(),
)
copied to clipboard
Additional information #

headerXy:- It is used to align the header nodes negative double value(-0.7) will align to left and positive value (0.4) will align to right
lineXy:- It is ued to align the stepper timeline, Alingment.manual will only work for lineXy
steppers:- It will take List of Steppers
isFirst:- Used to give the stepper at first
isLast:- Used to give the stepper line at last
isHeaderNode: bool is used to show the header Node default is 'true'
backgroundColor: It used to change the background color of all the steppers
afterLineStyle: It is used to style the line after the node
beforeLineStyle:- It is used to style the line before node
hasIndicator:- bool is used to show the indicator
headerStyle: used to style the header Text
subHeaderStyle: used to style the sub Header Text
headerBackgroundColor:- used to change the header background color
timeLineBuilder:- used to full customization your time line.