List View In Flutter

List View In Flutter :

Why to ListView in flutter your application?
Types of ListView in flutter?

  • In your application ListView used to list (dynamic) of data scrollable horizontal (ROW – Axis.horizontal) or veritacal (COLUMN – Axis.vertical).
  • Common used to scrolling the widget.
  • Data is display need to design to depends.

Type of ListView :
1) ListView
2) ListView.builder
3) ListView.separated
4) ListView.custom

Let’s go one by one
1) ListView

  • Few of data present that time use. For example your drawer menu
  • It is just use to scrollable list of children.
  • check this post : https://fluttertutorial.in/?p=120
ListView(
   children: [
     ListTile(
       leading: Icon(Icons.map),
       title: Text('Map'),
     ),
     ListTile(
       leading: Icon(Icons.phone),
       title: Text('Phone'),
     ),
   ],
 );

2) ListView.builder()

  • Large (infinite) no of items (childrens) to display. Constructor
    1) itemCount : Number of items avilable of list.
    2) itemBuilder : Convert every (each) item into a widget. ListView.builder(
    shrinkWrap:
    physics:
    scrollDirection: Axis.vertical //Axis.horizontal
    itemCount: //Length of items
    itemBuilder: (context, i) {
    return Container();
    },
    )

3) ListView.separated

  • List of data separated each items.

Screenshot :

List View In Flutter

Example :

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
   @override
   State createState() {
     return _ListViewSeparated();
   }
 }
@override
   Widget build(BuildContext context) {
     return MaterialApp(
         theme: ThemeData(primarySwatch: Colors.orange),
         home: Scaffold(
             appBar: AppBar(title: Text('Flutter ListView')),
             body: ListView.separated(
               padding: const EdgeInsets.all(8.0),
               itemCount: entries.length,
               itemBuilder: (BuildContext context, int index) {
                 return Container(
                   height: 50,
                   child: Center(child: Text('${entries[index]}')),
                 );
               },
               separatorBuilder: (BuildContext context, int index) =>
                   const Divider(),
             )));
   }
 }

4) ListView.custom()
There are 2 types of SliverChildDelegates are
1) SliverChildListDelegate
2) SliverChildBuilderDelegate

ScrollPhysics

  • Scroll your data place.
    1) NeverScrollablePhysics : Data is not scroll
    2) BouncingScrollPhysics : Bounch of data
    3) ClampingScrollPhysics : It is used to android.
    4) FixedExtentScrollPhysics