chulwoo-park / timelines Goto Github PK

Currently we can adjust alignment of indicator along the connecters using indicatorPosition but this accepts value in 0-1 range. A common use case is to have the indicator X px from the start/end.

You are welcome to PR here
https://github.com/Solido/awesome-flutter
Thx !

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 ?

Hello, I was wondering about how Timeline did handle very long lists?

How can I align the Timeline left or right?

I try to create a widget with timeline, to put on homepage.

Something like this,

but I always got an error

The following assertion was thrown during performLayout():
RenderFlex children have non-zero flex but incoming width constraints are unbounded.

When a row is in a parent that does not provide a finite width constraint, for example if it is in a horizontal scrollable, it will try to shrink-wrap its children along the horizontal axis. Setting a flex on a child (e.g. using Expanded) indicates that the child is to expand to fill the remaining space in the horizontal direction.
These two directives are mutually exclusive. If a parent is to shrink-wrap its child, the child cannot simultaneously expand to fit its parent.

Consider setting mainAxisSize to MainAxisSize.min and using FlexFit.loose fits for the flexible children (using Flexible rather than Expanded). This will allow the flexible children to size themselves to less than the infinite remaining space they would otherwise be forced to take, and then will cause the RenderFlex to shrink-wrap the children rather than expanding to fit the maximum constraints provided by the parent.

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

Hi,

Can i used it with hundred of data like a list that is recycled?

I want make something like this:

Is it possible?

Thanks.

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?

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:

Any Hint?

Hi, how we can deal with lazy loading?

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

Is there a way to change the colour of a node when it's pressed? I can't seem to see any onTap or onPress methods for a specific node.

I see that this package has not received updates in 2 years, is it still maintained?

There's a option called container but we cannot edit. I just found it marking TODO. Please complete it.

The current version 0.1.0 has 0.5 - 1 pixel line between Connector start and Connector end. Can I remove it?

Hi, how i can add a sliver to a tileBuilder?

I need add a progress indicator to lazy loading scroll view and a text of end of results.

Regards

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.

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

What is the difference between Timeline and FixedTimeline?
Both have .tileBuilder()

I want it to take all available space evenly, or how can I change length of the connector?

This is my code:

collapsed:

expanded:

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

Can I remove space of OppositeContentsBuilder in top timeline?
I don't use it, but it alsway take space in the top.

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!

Currently, my timeline like this image:

But i wanna like this image, add line in the end (in red square), so how to do this?

My code:

Expanded(
                          child: Timeline.tileBuilder(
                            theme: TimelineThemeData(
                              nodePosition: 0,
                              color: ThemeHelper.backgroundRealm(context),
                              connectorTheme: const ConnectorThemeData(
                                thickness: 3.0,
                              ),
                            ),
                            builder: TimelineTileBuilder.connected(
                              indicatorBuilder: (context, index) {
                                return DotIndicator(
                                  size: 18,
                                  color: ThemeHelper.primaryBlueColor(context),
                                  border: Border.all(
                                    color: ThemeHelper.borderProcessHistoryDot(
                                        context),
                                    width: 3,
                                  ),
                                );
                              },
                              connectorBuilder: (_, index, connectorType) {
                                return SolidLineConnector(
                                  indent: connectorType == ConnectorType.start
                                      ? 5.0
                                      : 5.0,
                                  endIndent: connectorType == ConnectorType.end
                                      ? 5.0
                                      : 5.0,
                                  color: ThemeHelper.black(context),
                                  thickness: 1,
                                );
                              },
                              indicatorPositionBuilder: (context, index) => 0,
                              contentsBuilder: (_, index) => WidgetA,
                              itemExtentBuilder: (_, index) {
                                return 110;
                              },
                              itemCount: processHistoryList.length,
                            ),
                          ),
                        )

Thank you so much!

I want to have this with SliverAppBar in CustomScrollView. Scrolling don't work for sliverAppBar

Hi. This is a great library by all means. It is just missing animation from one indicator to another. That would be cool if I could show it animated to the user.

I want to create this moc but I can't find how to change the dots to be with background color and using FixedTimeline.tileBuilder(

This is the moc

The dots have a border color and different background color.

This is the closest that I have reached

Values that I think are missing:

• Background color for outlined indicator (for border like effect).
• Option to control the number of lines in the dashedLine.
• A way to choose the currently selected position in the timeline and automatically all outlined indicators before that will have selected properties (like a purple background) and the rest will have different indicator properties (like a white background).

It`s possible to use with StreamBuilder from Firestone?

tks

Is it possible extend the timeline when don´t existis items?

Today it ends like this

Is there a possibility to do something like this?

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?

here's my code:

indicatorBuilder: (_, index) =>
              Container(
                    width: 24,
                    height: 24,
                    decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      color: AppColors.accentExtraLight,
                      border: Border.all(color: AppColors.accentGreenPrimary),
                    ),
                    child: Center(
                      child: Text(
                        "${index + 1}",
                      ),
                    ),
                  ),

I can add some padding, but I'm afraid it might break on other size devices and that's not a correct way of doing it.
I even tried force making this widget LTR always but no luck
on LTR mode looks fine.

Description

• Migrate to sound null safety
• Bump up package version

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.