Creating Side Header List

Creating Side Header List in Flutter App:

In Flutter for any Android or IOS App some times it is necessary to display the list in side header. Now in this tutorial we are going to learn creating side header list in flutter App.

Adding Dependebcy package to pubspec.yaml file:

To create side header list to Flutter app we have to add the dependency package in pubspec.yaml file.

use the below code to add the dependency package.

dependencies:
side_header_list_view:
After adding this dependency package run the get package method to import all the dependencies. if you don’t run
get packages method it will show error.
Importing the package into the Dart file:
Use the below code to import the package into the dart file:
import 'package:side_header_list_view/side_header_list_view.dart';
After importing above package into your main.dart file run the get package method to import all the dependency packages into the main dart file.
Note: After adding dependecy package into pubspec.yaml file  import the package into main dart file otherwise it will shows error or exception.
Creating side header list in flutter App:
Create a class that extends Stateless widget having title iFlutter Header List as shown in below sample code:

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'iFlutter HeaderList ',
theme: new ThemeData(),
home: new Home(),
);
}
}

Create Another class that extends Stateless widget for Displaying the list of names in side header list:

use the SideHeaderListView  class to display the list of names  with its length in side header as shown in below code. 

class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(title: const Text("iFlutter HeaderList ")),
body: new SideHeaderListView(
itemCount: names.length,
padding: new EdgeInsets.all(16.0),
itemExtend: 48.0,
headerBuilder: (BuildContext context, int index) {
return new SizedBox(width: 32.0,child: new Text(names[index].substring(0, 1), style: Theme.of(context).textTheme.headline,));
},
itemBuilder: (BuildContext context, int index) {
return new Text(names[index], style: Theme.of(context).textTheme.headline,);
},
hasSameHeader: (int a, int b) {
return names[a].substring(0, 1) == names[b].substring(0, 1);
},
),
);
}
}

Adding the List of  names to display in side header.

Create const outside the class as a global constant to access all the list of names we added  using below code

const names = const [
'Apple',
'Arina',
'Carlight',
'Casebox',
'Chrome',
'Christiana',
'Clotilde',
'Delhi',
'Darling',
'Deena',
'Dalphin',
'Echo',
'Elsewhere',
'Ernesto',
'Fidel',
'Game',
'Greace',
'Health care',
'Hermila',
'Hugo',
'iFlutter',
'iDailyNeeds',
'Merry',
'Minna',
'Mitsue',
'Napoleon',
'Paris',
'Physics',
'Salina',
'Science',
'Sony',
'Taisha',
'Zebra',
];

Below is the complete example code for  Creating Side Header List in Flutter App:

import 'package:flutter/material.dart';
import 'package:side_header_list_view/side_header_list_view.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'iFlutter HeaderList ',
theme: new ThemeData(),
home: new Home(),
);
}
}

class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(title: const Text("iFlutter HeaderList ")),
body: new SideHeaderListView(
itemCount: names.length,
padding: new EdgeInsets.all(16.0),
itemExtend: 48.0,
headerBuilder: (BuildContext context, int index) {
return new SizedBox(width: 32.0,child: new Text(names[index].substring(0, 1), style: Theme.of(context).textTheme.headline,));
},
itemBuilder: (BuildContext context, int index) {
return new Text(names[index], style: Theme.of(context).textTheme.headline,);
},
hasSameHeader: (int a, int b) {
return names[a].substring(0, 1) == names[b].substring(0, 1);
},
),
);
}
}

const names = const [
'Apple',
'Arina',
'Carlight',
'Casebox',
'Chrome',
'Christiana',
'Clotilde',
'Delhi',
'Darling',
'Deena',
'Dalphin',
'Echo',
'Elsewhere',
'Ernesto',
'Fidel',
'Game',
'Greace',
'Health care',
'Hermila',
'Hugo',
'iFlutter',
'iDailyNeeds',
'Merry',
'Minna',
'Mitsue',
'Napoleon',
'Paris',
'Physics',
'Salina',
'Science',
'Sony',
'Taisha',
'Zebra',
];

Congratulations You Have Learned Creating SideHeaderList In Flutter App:

If It Is HelpFull Share It With Your Friends….!!!

If You Have Any Query Make A Comment….!!!

Leave a Reply

Categories

Myles [CPS] IN
Shein WW