Flutter - Custom Sticky Headers

Last updated Dec 04, 2019

Hello Guys, In this post we are going to create Sticky Header in flutter

What is Sticky Header?
If we have scrollable content and the Header of each item is stick at top of the container and child items will scroll the content.

Let's create Stick header

To Create sticky header list in flutter we need to use the sticky_headers plugin.
add this sticky_headers 0.1.8+1  plugin in your pubspec.yaml file under dependencies line
dev_dependencies:

flutter_test:
    sdk: flutter
  sticky_headers: "^0.1.8"

In this post i am going to show Names and phone numbers list with Alphabets order.
  
  Let's create Contact class

class Contact{
      Contact(this.name,this.phone){}
      String name;
      String phone;

   }

 

To show the Names i have created static Contact list.
this list we are going to assign to Listview.Builder widget.
 The final class for the StickyHeader is like below

import 'package:flutter/material.dart';
import 'package:sticky_headers/sticky_headers.dart';
import 'package:url_launcher/url_launcher.dart';

import 'contact.dart';
class MyStickHeader extends StatefulWidget{
  @override
  State createState() {
    // TODO: implement createState
    return MyStickyHeaderState();
  }

}
class MyStickyHeaderState extends State
{
  Map>hm;
  Listalphabets;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    hm=new Map();
    alphabets=new List();
    alphabets.add("A");
    alphabets.add("B");
    alphabets.add("C");
    alphabets.add("D");
    alphabets.add("E");
    alphabets.add("F");
    alphabets.add("G");
    alphabets.add("H");
    alphabets.add("I");
    alphabets.add("J");
    alphabets.add("K");
    alphabets.add("L");
    alphabets.add("M");
    alphabets.add("N");
    alphabets.add("O");
    alphabets.add("P");
    alphabets.add("Q");
    alphabets.add("R");
    alphabets.add("S");
    alphabets.add("T");
    alphabets.add("U");
    alphabets.add("V");
    alphabets.add("W");
    alphabets.add("X");
    alphabets.add("Y");
    alphabets.add("Z");
    for(var a=0;a       {
        Listnames=List();
        for(var k=1;k<=5;k++)
          {

            names.add(Contact("Name "+alphabets[a]+"$k","$k$k$k$k$k$k$k$k$k$k"));
          }

          hm[alphabets[a]]= names;
      }
  }
  @override
  Widget build(BuildContext context) {
// TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("Sticky Header"),
      ),
      backgroundColor: Colors.grey,
      body: ListView.builder(
          itemCount: hm.length,
          itemBuilder: (ctx,index){
        return StickyHeader(header: Container(
          width: double.infinity,

          decoration: new BoxDecoration(
              color: Colors.deepPurple,

          ),
          alignment: Alignment.centerLeft,
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text(alphabets[index],style: TextStyle(color: Colors.white,fontSize: 20),),
          ),), content: Container(
          child: Center(
            child: Column(
              children: getNames(index),
            ),
          ),
        ));
      }),
    );
  }


 List getNames(index)
  {
    ListlistNames=List();
    ListnamesString=hm[alphabets[index]];
    for(var k=0;k       {

        listNames.add(Card(
          child: InkWell(
            onTap: (){
              launch("tel:"+namesString[k].phone);
            },
            child: Container(
              alignment: Alignment.centerLeft,
              margin: EdgeInsets.all(8),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(namesString[k].name,style: TextStyle(fontSize: 16),),
                  SizedBox(height: 10,),
                  Row( children: [Text(namesString[k].phone),Spacer(),Icon(Icons.phone,color: Colors.green,)],),
                ],
              ),
            ),
          ),
        ));
      }
  return listNames;
  }
}

 

Here on click on each contact we are calling default phone application.
for this we need to add url_launcher: ^5.2.7 plugin and for calling we need to add below code

launch("tel:"+namesString[k].phone);

 

This will call the default Phone application

 

 

Article Contributed By :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

3844 Views