Flutter - Custom Sticky Headers
Last updated Dec 04, 2019Hello 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: |
In this post i am going to show Names and phone numbers list with Alphabets order.
Let's create Contact class
class Contact{ } |
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 'contact.dart'; } names.add(Contact("Name "+alphabets[a]+"$k","$k$k$k$k$k$k$k$k$k$k")); hm[alphabets[a]]= names; decoration: new BoxDecoration( ),
listNames.add(Card( |
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 :
|
|
|
|
4081 Views |