dynamic_timeline_tile_flutter

Description:

dynamic timeline tile flutter

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

copied to clipboard
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();

copied to clipboard
MultiDynamicTimelineTile #

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


MultiDynamicTimelineTile();

copied to clipboard
This is how to use events in MultiDynamicTimelineTile

MultiDynamicTimelineTile(

eventsList : [

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

]

);

copied to clipboard
DynamicTimeLineTileBuilder #

DynamicTimeLineTileBuilder();

copied to clipboard
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();

copied to clipboard
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."),
],
}; .......................

copied to clipboard
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()
],
);
},
),

copied to clipboard
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,

);

copied to clipboard
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,

);

copied to clipboard
indicatorWidth (double Width) #
indicatorWidth helps you to increase the width of indicator line
DynamicTimelineTile(

// Defines the weight of indicator line

indicatorWidth : 4,

);

copied to clipboard
indicatorRadius (Radius) #
indicatorRadius helps you to increase the radius size of indicator line top attached circle
DynamicTimelineTile(

indicatorRadius : 4,

);

copied to clipboard
crossSpacing (double width) #
crossSpacing helps to create a horizontal space between the beforeLine, indicatorLine and afterLine child.
DynamicTimelineTile(

crossSpacing: 20,,

);

copied to clipboard
mainSpacing (double height) #
mainSpacing helps to create a vertical space between the two contents.
DynamicTimelineTile(

mainSpacing: 20,,

);

copied to clipboard
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,
),

);

copied to clipboard
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",
]

);

copied to clipboard
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),
]

);

copied to clipboard
events (List of EventCard) #
events is a list of EventCard which build the contentCard.
DynamicTimelineTile(

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

]

);

copied to clipboard
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.

copied to clipboard
Feedback #
If you have any feedback, please reach out to us at [email protected]