Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to implement Alphabet scroll in flutter

Tags:

flutter

dart

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.

contacts list iamge

like image 334
Osama Gamal Avatar asked Oct 15 '18 12:10

Osama Gamal


1 Answers

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),
        ),
      );
    });
  }
}
like image 175
Harsha pulikollu Avatar answered Sep 16 '22 22:09

Harsha pulikollu