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

The flutter tutorial  is a website that bring you the latest and amazing resources of code. All the languages codes are included in this website. The languages like flutter, android, java,kotlin etc.with the help of this languages any user can develop the beautiful application

For more information about Flutter. visit www.fluttertutorial.in