Search code examples
flutter

How can i align timelines from top left align

I used timelines package .It aligned in center by default. I want to align timelines from top left in Container but that doesnt work. Here is a code i have tried.

Here is Preview

Container(
    alignment: Alignment.topLeft,
    child: FixedTimeline.tileBuilder(
      builder: TimelineTileBuilder.fromStyle(
        contentsAlign: ContentsAlign.basic,
        connectorStyle: ConnectorStyle.solidLine,
        indicatorStyle: IndicatorStyle.outlined,
        contentsBuilder: (context, index) => Padding(
          padding: const EdgeInsets.all(24.0),
          child: Text('Timeline Event $index'),
        ),
        itemCount: 3,
      ),
    ),
  ),
Solution

  • There is a option for what you want in Timelines package.

    Please give a 'nodePosition' option to 'theme' parameter in tileBuilder.

    The 'nodePosition' can have value from 0 to 1.0 double type.
    Because default value is a 0.5, timeline will be located at center.

    theme: TimelineTheme.of(context).copyWith(
            nodePosition: 0,
          ),

    enter image description here

    Container(
      alignment: Alignment.topLeft,
      child: FixedTimeline.tileBuilder(
        theme: TimelineTheme.of(context).copyWith(
          nodePosition: 0,
        ),
        builder: TimelineTileBuilder.fromStyle(
          contentsAlign: ContentsAlign.basic,
          connectorStyle: ConnectorStyle.solidLine,
          indicatorStyle: IndicatorStyle.outlined,
          contentsBuilder: (context, index) => Padding(
            padding: const EdgeInsets.all(24.0),
            child: Text('Timeline Event $index'),
          ),
          itemCount: 3,
        ),
      ),
    );