Flutter Listview and Flutter Horizontal Listview

Flutter ListView

ListView in flutter is the most commonly used widget in any application or web, it is used to display unlimited children in the format of a list. Like other technology, flutter also came with a powerful widget that is ListView which is so simple to construct in a flutter. For understanding more about its internal functionality you can visit  https://api.flutter.dev/flutter/widgets/ListView-class.html

Now Let’s see how we can create ListView in flutter.  There are some kinds of lists which we can develop in a flutter.

ListTile

A single fixed height row that contains text and also icons. You will understand this in the Basic List Example.

Simple Basic List

If you’re having only a few items, using the standard ListView constructor is the perfect solution for this. We need to create a ListTile widget for its item.

Example

See below the code from which you will understand how you can create a simple basic list.

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

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


class MyApp extends StatelessWidget {
 final appTitle = 'ListView Demo';

 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     title: appTitle,
     home: MyHomePage(title: appTitle),
   );
 }
}

class MyHomePage extends StatelessWidget {
 final String title;

 MyHomePage({Key key, this.title}) : super(key: key);

 @override
 Widget build(BuildContext context) {
   return Scaffold(
       appBar: AppBar(title: Text(title),),
       body: ListView(
         children: <Widget>[
           ListTile(
             leading: Icon(Icons.home),
             title: Text('Home'),
           ),

           ListTile(
             leading: Icon(Icons.account_circle),
             title: Text('Profile'),
           ),
           ListTile(
             leading: Icon(Icons.settings_rounded),
             title: Text('Setting'),
           ),ListTile(
             leading: Icon(Icons.contact_phone),
             title: Text('Contact Us'),
           ),
         ],
       ));
 }
}

Output

We are done with our basic list now let’s run this code and see output like the image below.

Flutter Long Listview

Long List

The standard ListView constructor works well for small lists, meaning if we are having a few items, going with the ListView constructor is good, as we did in the previous article.

Now let’s talk about a large number of items, if we are creating a list for a large number of items so in that case, we need ListView.builder constructor. ListView constructor creates all the items at once where the ListView.builder()  constructor creates items at the time of scrolling.

Let’s start creating a Long List. There are some steps that need to be followed.

• Data Source : First we need to create data source like what you need to show in the list, it might be messages, numbers. Most of the time data comes from APIs, backend, database etc, so this list will be used for all of them. In this Example we are learning for static list, but in Advance Flutter learning we will check how we can show list from APIs.
  
  Suppose you’re having  1000 strings , so I am using List generator here for creating these 1000 strings. See below code for this.

items: List<String>.generate(1000, (i) => "Item $i")

• Show Your ListItems in widget : for displaying these strings in List we need to render each string as a widget like below.

ListView.builder(
 itemCount: items.length,
 itemBuilder: (context, index) {
   return ListTile(
     title: Text('${items[index]}'),
   );
 },
)

• Example : Now let’s see complete example for this list.

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

void main() {
 runApp(MyApp(
   items: List<String>.generate(1000, (i) => "Item $i"),
 ));
}

class MyApp extends StatelessWidget {
 final List<String> items;

 MyApp({Key key, @required this.items}) : super(key: key);

 @override
 Widget build(BuildContext context) {
   final title = 'Long List Demo';

   return MaterialApp(
     title: title,
     home: Scaffold(
       appBar: AppBar(
         title: Text(title),
       ),
       body: ListView.builder(
         itemCount: items.length,
         itemBuilder: (context, index) {
           return ListTile(
             title: Text('${items[index]}'),
           );
         },
       ),
     ),
   );
 }
}

Output

Below is the output for this long list, you can also try this list 

Flutter Horizontal Listview

We all know about the Horizontal list, and flutter made it in a very easy way, using standard ListView constructor and just passing scrollDirection as horizontal will make your list horizontally.
Let’s understand it by the below example.

Example:  In this example, I’ve written a simple horizontal list so that you can understand the exact working of this list, later on, we will do this using APIs. See below code

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   final title = 'Horizontal List Demo';

   return MaterialApp(
     title: title,
     home: Scaffold(
       appBar: AppBar(
         title: Text(title),
       ),
       body: Container(
         margin: EdgeInsets.symmetric(vertical: 20.0),
         height: 200.0,
         child: ListView(
           scrollDirection: Axis.horizontal,
           children: <Widget>[
             Container(
               margin: EdgeInsets.all(5.0),
               width: 160.0,
               color: Colors.red,
               child: Center(child:Text('BOX 1',style: TextStyle(color: Colors.white,fontSize: 15),)),
             ),
             Container(
               margin: EdgeInsets.all(5.0),
               width: 160.0,
               color: Colors.blue,
               child: Center(child:Text('BOX 2',style: TextStyle(color: Colors.white,fontSize: 15),)),
             ),
             Container(
               margin: EdgeInsets.all(5.0),
               width: 160.0,
               color: Colors.green,
               child: Center(child:Text('BOX 3',style: TextStyle(color: Colors.white,fontSize: 15),)),
             ),
             Container(
               margin: EdgeInsets.all(5.0),
               width: 160.0,
               color: Colors.yellow,
               child: Center(child:Text('BOX 4',style: TextStyle(color: Colors.white,fontSize: 15),)),
             ),
             Container(
               margin: EdgeInsets.all(5.0),
               width: 160.0,
               color: Colors.orange,
               child: Center(child:Text('BOX 5',style: TextStyle(color: Colors.white,fontSize: 15),)),
             ),
           ],
         ),
       ),
     ),
   );
 }
}

Output

Below is the response of our code, check the output image, if you need this you can use it accordingly.

Visit  https://flutter4u.com/  for getting many advanced-level projects, which may help you for your ongoing project.

Visit here for more listview examples.