This PR closes #31 .

I followed the steps mentioned on this page.

Some points to mention :

• Widget-returning functions which returned null now return const SizedBox(), which is an empty Widget
• as tere is not many tests for this plugin, we could use some more manual testing

Hi,

I would like to align the nodes to the left in order to have a fixed size for the content and the remaining space for the opposite content. There is a property nodeAlign in TimelineTile that used to compute the effective node position :

  double _getEffectiveNodePosition(BuildContext context) {
    if (nodeAlign == TimelineNodeAlign.start) return 0.0;
    if (nodeAlign == TimelineNodeAlign.end) return 1.0;
    var nodePosition = this.nodePosition;
    nodePosition ??= (node is TimelineTileNode)
        ? (node as TimelineTileNode).getEffectivePosition(context)
        : TimelineTheme.of(context).nodePosition;
    return nodePosition;
  }

This property can't be used in TimelineTileBuilder so please what is the simplest way to define the nodeAlign ?

Thanks for the promising plugin. Is there any way to control vertical positioning of the indicators? For example, if I use larger titles, can I force the indicators down in order to line them up with the content titles better ? Here's the problem I'm facing:

and my item builder:

            contentsBuilder: (context, index) => Padding(
            padding: const EdgeInsets.only(
              left: 30,
              bottom: 30,
              right: 30,
            ),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  'Timeline Event $index',
                  textScaleFactor: 3,
                ),
                SizedBox(height: 10),
                Text('Nam libero tempore, cum soluta nobis...') // truncated for brevity here
              ],
            ),
          ),

But it's not clear to me how I can shift the indicators down, either all together, or individually, in order to line up with the titles better...? Thanks.

Hi, according to the changelog there should be a version available 0.1.0-null which includes null-safety changes, but when I try to set this version in my pubspec.yaml then I get an error that this version is not available

pubspec.yaml:

timelines: 0.1.0-null

error:

Because project depends on timelines 0.1.0-null which doesn't match any versions, version solving failed.

version from pub.dev:

The Showcase screen in the code example only shows png files with the results, but how are they implemented?

How can I control each connector and each Node? I want the connectors be in in different lengths and have different Icon on each Node.

I want to create a custom timeline. A TimelineTile that will show contents, with a node that has a custom indicator. The node has an endConnector parameter that I think the connector widget should have a child parameter in case you want to connect to another TimeLineTile.

           TimelineTile(
             contents: const Padding(
               padding: EdgeInsets.all(8.0),
               child: Text(
                 "WORK EXPERIENCE",
                 style: TextStyle(
                     color: Colors.white, fontWeight: FontWeight.bold),
               ),
             ),
             node: TimelineNode(
               endConnector: const SolidLineConnector(
                 color: Colors.white,
               ),
               indicator: Container(
                 width: 50,
                 height: 50,
                 decoration: BoxDecoration(
                     borderRadius: BorderRadius.circular(25),
                     color: HexColor('#eab676')),
                 child: const Icon(
                   Icons.work,
                   color: Colors.white,
                 ),
               ),
             ),
           ),
         )),

I have a list of indicators, where all aren't exactly the same size. There appears to be some distortion in the line connector as shown below:

Any ideas how to resolve?

Was unable to find any clue in the documentation on how to use different contentsAlign for different items.

Im trying to use reverse align for some items in the timeline.

Example: For a timeline of football/soccer match, events come from both teams. Is it possible to use 'reverse' for the "away" team events only?

Please let me know if it is possible. Thank you

Thanks for contribute this plugin.

i faced Stacked InnerTimeline issue.

i want to display 3 line in InnerTimeline (inside contentsBuilder) so it only work 2 line.

here is my code:

contentsBuilder: (_, index) {
            if (isEdgeIndex(index)) {
              return null;
            }
            return Container(
              padding: EdgeInsets.only(left: 8.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisSize: MainAxisSize.min,
                children: [
                  Flexible(
                    child: Text(
                      childs[index -1].note ?? "",
                      style: TextStyle(
                        color: Color(0xFF4964D8),
                        fontSize: 16.0,
                        fontWeight: FontWeight.w500,
                        fontFamily: 'AvenirRoman',
                      ),
                    )
                  ),
                  // Flexible(child: _buildTags(childs[index - 1].tags)),
                  Flexible(
                    child: Text(
                      myParseDatetime1(childs[index - 1].createdAt),
                      style: TextStyle(
                        color: Color(0xFFA8A8A8),
                        fontSize: 14.0,
                        fontWeight: FontWeight.w500,
                        fontFamily: 'AvenirRoman',
                      ),
                    )
                  ),
                  Text('123')
                ],
              ),
            );

          },

here is 2 line. it's work

This PR replaces the full Github URLs used for accessing different sections in the Readme with anchor links. It avoids reloading the page and thus makes it easier and faster to navigate.

For instance, [Installation](https://github.com/chulwoo-park/timelines/tree/main#installation) is replaced with [Installation(#installation).

Hey, I'm trying to implement pagination with timelines. Currently, I'm wrapping timelines in a listview. But that leads to the complete timeline being rebuilt on each change. Is there any way to use a ListView.builder() like extending of the timeline?

The best solution would be to only draw the items currently visible on the screen and extend the timeline on the fly.

Hello and thanks for making this package. I am wondering if you have any plans of implementing the ability to have parallel timelines similar to what you might see in a git history graph;

This may be a feature I would want for a personal project of mine and if I do end up needing it, I would be more than happy to contribute the code to this awesome package!

Hi :) First of all, thanks you for such great package. After all these days of seraching, it seems to me I found the right place to ask.

So I would like to create the timeline (or something like archive) for my videostream. The issue is quite non-trivial and hard, because videostream dosen't have the end. I could say, it is infinite videostream if we would scroll it back. Also the timeline should be under the videostream and I would like to have acess to it by double tap. So my question is could I customize it like I described above? And could I make the post-request to put two timestapms? Can these package work with API-request?

How can I align the top of the indicator with the top of the content, when the content is longer than a single line?

Basically making sure the two red lines are aligned in the following example:

Is there any option to accomplish this already?

Thanks