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.


  • 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';


For Sports like Foot Ball, Cricket, and any other Events Steppers

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

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

 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(),

Left Align

Screenshot 2023-10-29 at 2 09 52 PM

Center Align

Screenshot 2023-10-29 at 2 10 24 PM


No other properties will work expect isHeaderNode if you give your own timeline. Inside you time line Widget properties will work

        timeLineBuilder: (context, index) {
          return TimelineTile(
            isFirst: true,
            startChild: Text("Date"),
            endChild: Text("Title"),
        //   alignment: TimelineAlign.manual,
        //   lineXy: 0.3,
        //   headerXy: -0.7,
        steppers: getStepperData(),

Additional information

  1. 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
  2. lineXy:- It is ued to align the stepper timeline, Alingment.manual will only work for lineXy
  3. steppers:- It will take List of Steppers
  4. isFirst:- Used to give the stepper at first
  5. isLast:- Used to give the stepper line at last
  6. isHeaderNode: bool is used to show the header Node default is 'true'
  7. backgroundColor: It used to change the background color of all the steppers
  8. afterLineStyle: It is used to style the line after the node
  9. beforeLineStyle:- It is used to style the line before node
  10. hasIndicator:- bool is used to show the indicator
  11. headerStyle: used to style the header Text
  12. subHeaderStyle: used to style the sub Header Text
  13. headerBackgroundColor:- used to change the header background color
  14. timeLineBuilder:- used to full customization your time line.