how to implement Alphabet scroll in flutter

2020-08-18 15:48发布

问题:

Is there's any plugin or way to implement this kind of scrolling in flutter?

To be specifi, the letters column on the right on the right, such as highlighting the current alphabet letter, or if a letter is tapped, the scrollview goes directly to that letter header.

For sorting alphabetically, we can do that with List.sort(), for sticky header, we got some nice plugins as well.

回答1:

Checkout this plugin sticky head https://pub.dartlang.org/packages/sticky_headers

class Example extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new ListView.builder(itemBuilder: (context, index) {
      return new StickyHeader(
        header: new Container(
          height: 50.0,
          color: Colors.blueGrey[700],
          padding: new EdgeInsets.symmetric(horizontal: 16.0),
          alignment: Alignment.centerLeft,
          child: new Text('Header #$index',
            style: const TextStyle(color: Colors.white),
          ),
        ),
        content: new Container(
          child: new Image.network(imageForIndex(index), fit: BoxFit.cover,
            width: double.infinity, height: 200.0),
        ),
      );
    });
  }
}


标签: dart flutter