List Builder In Flutter

Hello guys,

Today we are going to learn how to implement ListView.builder() in flutter. As we know that in android developement when we have list of items and required to list out in screen we are using adapter for that purpose, similar manner in flutter we can use ListView.builder(), using which we can use list out list of item in custom designed block.

So let’s get started…

First create the new flutter project and then in main.dart file code as below for main screen as below.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget
{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Home(),
    );
  }
}

In above code,  debugShowCheckedModeBanner: false is used to remove water mark at top of the screen. Here Home is class which extends the features of StatefulWidget. The meaning of StatefulWidget is we can change the property of widgets.

Now create Home class as below.

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {

  List<String> langnames = ["Flutter", "JS", "Android", "PHP", "Java", "Swift", "Laravel", "Kotlin", "C", "C++"];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
     appBar: AppBar(
       title: Text('List Builder'),
     ),
      body: _MainScreen(),
    );
  }

  Widget _MainScreen() {
    return Container(
      child: ListView.builder(
          itemBuilder: (_,int index) => ListItem(this.langnames[index]),
          itemCount: this.langnames.length,

      )
    );
  }
}

In above code, langnames is list of String that contains the name of different type of languages. override build method is create the screen using Scaffold and create appbar and initiate the screen body with _MainScreen() method.

In _MainScreen() method returns Widget of Container which has ListView.builder() which has itemBuilder which calls ListItem class that has design and code block for every item in the list. itemCount take size of the list by using length method of the list.

Now create ListItem Class as below.

class ListItem extends StatelessWidget{

  final String langname;
  ListItem(this.langname);

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Container(
        padding: EdgeInsets.all(10.0),
        child: Row(
          children: <Widget>[
            CircleAvatar(
              child: Text('A'),
            ),
            Padding(
              padding: EdgeInsets.only(right: 10.0),
            ),
            Text(langname,
                style: TextStyle(
                  fontSize: 20.0
                ),)
          ],
        ),
      )
    );
  }

}

In this class, we create Card similar to the CardView in android and inside Card we create one Row and inside that we take one CircleAvatar that look like image at starting of the row, then some padding to clean look of the design and one text block. We create Constructor which initialize langname as current list item.

Now you can run the app, It’s look perfect.

You can also find video tutorial of this as below. Hope you learn something new by this article.

Happy Flutter…