dynamic_timeline_tile_flutter 0.0.4

Fully Dynamic and customized timelineTile, where you can create a multi events list within the dates and customized child widgets..

Dynamic_Timeline_Tile_Flutter

Fully Dynamic and customized timelineTile, where you can create a multi events list within the dates and customized child widgets.

Installation

Install Dynamic_Timeline_Flutter

  cd my-project

  pub add dynamic_timeline_tile_flutter

Demo Video

Usage / Examples

DynamicTimelineTile widget can be simply call by importing the package.

After importing the package use DynamicTimelineTile like below shown :

DynamicTimelineTile

DynamicTimelineTile();

MultiDynamicTimelineTile

• The MultiDynamicTimelineTile allows you to create a multiple Events or Contents within the sameDate or starerChild

MultiDynamicTimelineTile();

This is how to use events in MultiDynamicTimelineTile

MultiDynamicTimelineTile(

    eventsList : [

   [
     EventCard(),
     EventCard(),
     EventCard(),
   ]
  [
     EventCard(),
     EventCard(),
  ]
    
                ]

);

DynamicTimeLineTileBuilder

DynamicTimeLineTileBuilder();

MultiDynamicTimelineTileBuilder

MultiDynamicTimelineTileBuilder helps you to display the MultiDynamicTimelineTile easily from your model class or api. You dont need to get panic and write a long code to display multiple contents under same date. You can simply use the MultiDynamicTimelineTileBuilder.

MultiDynamicTimelineTileBuilder();

This is how to use MultiDynamicTimelineTileBuilder in flutter :

// Create a model class 

class Event {
  final String subject;
  final String description;

  Event({required this.subject, required this.description});
}

final Map<String, List<Event>> myEvents = {
  '2 Jan': [
    Event(
        subject: 'Mathematics',
        description: "Exam will start from 11:30 and ends in 3:15"),
    Event(
        subject: 'General Science',
        description:
            "Exam will start from 11:30 and ends in 3:15. Students are informed to bring their project work along with the materials needed."),
  ],
  '14 Jan': [
    Event(
        subject: 'Physics',
        description:
            "Exam will start from 9:00 and ends in 12:00. Please bring a scientific calculator."),
    Event(
        subject: 'Foreign Language',
        description:
            "Exam will start from 8:00 and ends in 11:00. Bilingual dictionaries permitted."),
    Event(
        subject: 'Literature',
        description:
            "Exam will start from 11:00 and ends in 2:00. Bring novels for reference."),
  ],
}; .......................

Now call the MultiDynamicTimelineTileBuilder widget inside your build class and display the data as shown below.

 MultiDynamicTimelineTileBuilder(
                  itemCount: myEvents.keys.toList().length,
                  itemBuilder: (context, index) {

                    final date = myEvents.keys.toList()[index];
                    final eventsList = myEvents[date] ?? [];

                    return MultiDynamicTimeline(
                    // Displaying date list
                      starerDates: [date],

                      // Displaying event list from each date
                      eventsList: [
                        eventsList.map((exam) {
                          return EventCard(
                            cardColor: purple.withOpacity(0.05),
                            child: CustomEventTile2(
                              icon: MdiIcons.bookOutline,
                              title: exam.subject,
                              description: exam.description,
                            ),
                          );
                        }).toList()
                      ],
                    );
                  },
                ),

DynamicTimelineTile widget contains :

• breakDate
• indicatorColor
• indicatorWidth
• indicatorRadius
• crossSpacing
• mainSpacing
• dateStyle
• starerChild
• starerDates
• events

breakDate (bool)

breakDate helps to break the date into two parts.

DynamicTimelineTile(

    breakDate : true,

);

indicatorColor (Color)

indicatorColor is a color property of the line between starerChild / starerDates and content. You can give your color to indicatorLine

DynamicTimelineTile(

    indicatorColor : Colors.grey.shade300,
    
);

indicatorWidth (double Width)

indicatorWidth helps you to increase the width of indicator line

DynamicTimelineTile(

// Defines the weight of indicator line

    indicatorWidth : 4,
    
);

indicatorRadius (Radius)

indicatorRadius helps you to increase the radius size of indicator line top attached circle

DynamicTimelineTile(

    indicatorRadius : 4,
    
);

crossSpacing (double width)

crossSpacing helps to create a horizontal space between the beforeLine, indicatorLine and afterLine child.

DynamicTimelineTile(

    crossSpacing: 20,,
    
);

mainSpacing (double height)

mainSpacing helps to create a vertical space between the two contents.

DynamicTimelineTile(

    mainSpacing: 20,,
    
);

dateStyle (TextStyle)

dateStyle helps to build a custom textstyle for starerDates texts.

DynamicTimelineTile(

    dateStyle: TextStyle (
    color: black,
    fontWeight: FontWeight.bold,
    letterSpacing: -0.4,
    fontSize: 22.sp,
    ),
    
);

starerDates (List of String)

starerDates is a list of strings which contains the dates to be shown beforeLine. You can use starerChild to create your custom design or icon to show before the indicatorLine.

DynamicTimelineTile(

    starerDates: [
    "2 jan",
    "12 jan",
    "17 jan",
    "27 Jan",
    ]

);

Either starerDates or starerChild can be used at a time. Both list are build at a samePlace so, both widgets cannot be used at a same time.

starerChild (List of Widget)

starerChild is a list of widgets where you can create your custom widgets or ui in afterLine / content place.

DynamicTimelineTile(

    starerDates: [
                    CustomIconChild(icon: Icons.cash),
                    CustomIconChild(icon: Icons.swapVertical),
                    CustomIconChild(icon: Icons.monitorAccount),
                    CustomIconChild(icon: Icons.earth),
                ]

);

events (List of EventCard)

events is a list of EventCard which build the contentCard.

DynamicTimelineTile(

    events: [    
    EventCard(),
    EventCard(),
    EventCard(),
    EventCard(),

            ]

);

Only event card can be used inside the eventsList...

EventCard (Widget)

EventCard is nothing, just a widget which is used to build the content card.

DynamicTimelineTile(

    EventCard(
    
    cardColor : Colors.grey.shade300,  // cardColor
    width : Mediaquery.of(context).size.width, // width of card
    verticalCardPadding : 12 // Vertical padding define a content padding from top and bottom.
    horizontalCardPadding : 12 // horizontal padding define a content padding from left and right.
    cardDecoration : BoxDecoration() // Allows you to decorate the eventcard mannually.
    cardRadius : BorderRadius.circular() // Allows you to create a radius to eventcard.
    child : child // Receive child widget for the content of EventCard

    );

);

NOTE : cardColor can only be used without the cardDecoration, otherwise using cardDecoration will create a new Ui.

Feedback

If you have any feedback, please reach out to us at [e-mail]