title: Non-linear scrollable in Flutter
body: <p>I am trying to create a scrollable timeline with &quot;event markers&quot; (text bubbles).</p>
  <p>The problem is that I also need to make the <strong>scrollable timeline lazy build</strong>. I have looked into the Scrollable class and Viewports but I cannot seem to figure out how to make these lazy build. I am also having a bad time while trying to display these with a custom position as it seems all Slivers provided does not fit for my usecase.</p>
  <pre class="lang-dart prettyprint-override"><code>import 'package:flutter/material.dart';
  import 'package:flutter/rendering.dart';
  
  class ScrollableTimeline extends StatefulWidget {
    const ScrollableTimeline({Key? key}) : super(key: key);
  
    @override
    _ScrollableTimelineState createState() =&gt; _ScrollableTimelineState();
  }
  
  class _ScrollableTimelineState extends State&lt;ScrollableTimeline&gt; {
    @override
    Widget build(BuildContext context) {
      return Scrollable( //I think this is what I should use?
        axisDirection: AxisDirection.left,
        viewportBuilder: (BuildContext context, ViewportOffset position) {
          return Viewport(
            axisDirection: AxisDirection.left,
            offset: position,
            slivers: [
              SliverToBoxAdapter(
                child: Container( // I'm trying to create a long line but this creates a square.
                  color: Colors.grey,
                  height: 5, //It's expanding up?
                  width: 1000,
                ),
              )
            ],
          );
        },
      );
    }
  }
  
  </code></pre>
  <p><a href="https://i.stack.imgur.com/Px8kn.png" rel="nofollow noreferrer">how it should look</a></p>
  <p>I just need some advice on where to start as there is not much documentation on this.</p>
  <p>Thanks.</p>