flutter实现一个sideBar

“ios 联系人列表”的图片搜索结果

用flutter中实现这么一个sidebar，期初我想了5中方式，但是最后，发现只有一种可以实现，那么是哪5种方式呢？

1. 使用ListView，这种不可以，为什么？
   1. 因为你在上面滑动手指的时候，这些索引会更随你手指滑动，明显操作体验就不对了。
   2. 比较难以知道你现在触碰的到是哪个字母。
2. 使用CupertinoPicker来放置这些索引，这种也不可以？
   1. 期初想到的是，picker滑动的时候，噼里啪啦的声音还真的和ios的那个体验有点类似，选中哪一个也是很准确的体现出来。
   2. 然而，仔细一想体验似乎也不大对，他选中的似乎不是你手指按住的位置，放弃
3. 使用Slider
   1. 怎么说，slider实际上浮动在一个控件的上面，比如column，然后slider的高度和这个column相同。
   2. 然而，竖向的slider怎么实现，这是一个难点，有人已经提过这个issue了，https://github.com/flutter/flutter/issues/10500，但是官方并不打算支持，然而，万能的Stack Overflow上有这么一个解决方式，
   3. 虽然说可以实现滑动的时候知道滑动到哪里，更具计算知道索引到哪个字母
   4. 手指点上去，也能瞬间移动到哪个位置，但是体验并不流畅，用起来挺复杂的，放弃。
4. 使用GestureDetactor回调来实现，当然这种方式我最开始尝试，觉得也是不可行的，我是这么想的。
   1. column中的每个元素同样的加上一个GestureDetactor。
   2. 点到哪个字母索引是很容易知道的，然而，如果是拖动的话，几乎是不可能知道，应该挺难的，目前处在哪个字母索引了，因此也就无法满足需求。
5. 还是使用GestureDetactor，但是不仅仅是利用他的回调，这里利用的是有点类似于android额onTouchInterCeptor的方式。
   1. 给父布局添加GestureDetactor，然后RenderBox getBox = context.findRenderObject()，恩，拿到这个RenderBox。
   2. 有了这货，就可以算出手指在这个父控件中的相对位置了
   3. 也就说可以定位出目前手指在哪个字母索引上。

示例

ok，最后实现的效果就是这样的了，目前已经将这个组件上传到了pub中了，地址是这里。