Flutter （仿微信通讯录）按字母分组列表

再开发过程中我们经常会用到按字母顺序将名称惊醒分组，并且在列表最右侧有指示器，效果图如下。这个效果也是我参照一位大佬的博客才实现的，不过忘记了大佬博客的链接，还是很感谢这位大神的。下面是我自己整理的代码和效果。

今天我们就来讲解一下这个效果的实现，还是老规矩，直接上代码讲解，这里我是通过三个类来实现的，分别主页ChildrenList、右侧指示器IndexBar还有一个数据模型类Friends。

---

首先讲一下Friends数据模型类

class Friends {
  final String imageUrl;
  final String name;
  final String indexLetter; //首字母大写

  Friends({this.imageUrl, this.name, this.indexLetter});
}

List<Friends> datas = [
  Friends(
      imageUrl: 'https://randomuser.me/api/portraits/women/27.jpg',
      name: