Flutter Listview Tutorial For Beginners

by

 

Flutter Listview Tutorial:

Flutter listview tutorial is used to populate the data from any source like database, arraylist and many more.We can design a row based on the input data and can make it populate on to the screen.

Listview is the easiest and best option to display dynamic data because we cannot provide multiple textfields based on the dynamic data.

Also there are different types of listview used to populate like recycler view, expandable listview used in apps they have their own specialty like cache clear and space management.

The most important feature of the listview is it’s a scrollable widget making use of the available screen space because sometimes we need to have another components other than listview so it can also uses a less space.

Mostly the apps we use like food delivery apps swiggy, zomato there we can see a list of food items and more apps like play store, Gmail, facebook and many more.

A listview can contain text-fields, icon, images, check boxes and more so let’s start this tutorial on flutter listview tutorial.

 

Flutter Listview Video Tutorial :

Go through the below tutorial for more detailed explanation on flutter listview.

 

main.dart :

Initialize with void main() and provide the MyApp() class

void main() {
  runApp(MyApp());
}

 

Declare a list of items i.e., courses  to be displayed in listview

List<String> course = [
  "c",
  "c++",
  "java",
  "kotlin",
  "objective c",
  "swift",
  "php"
];

 

Return MaterialApp() and also specify the Scaffold in home also appBar 

MaterialApp(
  home: Scaffold(
    appBar: AppBar(
      title: Text("Courses"),
    ),
    body: Container(
        color: Colors.white10,
        padding: EdgeInsets.all(16.0),
        child: HomePage(course)
    ),
  ),
);

 

Add a variable List of type String you can add a List<type> where type is Integer, String, Double and more depending upon the requirements.

final List<String> course;

 

Pass the parameters i.e., course listview to HomePage class

HomePage(this.course);

 

Add a ListView.builder and provide item count, item builder and we will return a listview row.

ListView.builder(
  itemCount: course.length,
  itemBuilder: (context, pos) {
    return 
        )
    );
  },
);

 

We are designing a row to the listview by providing padding, child inside which we specify the Card with color, inside the Card view child there we provide text with style customization’s.

Padding(
    padding: EdgeInsets.only(bottom: 16.0),
    child: Card(
      color: Colors.white,
      child: Padding(
        padding: EdgeInsets.symmetric(vertical: 24.0, horizontal: 16.0),
        child: Text(course[pos], style: TextStyle(
          fontSize: 18.0,
          height: 1.6,
        ),),
      ),

 

FullCode :

We are providing the full code for flutter listview tutorial integration

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

List<String> course = [
  "c",
  "c++",
  "java",
  "kotlin",
  "objective c",
  "swift",
  "php"
];


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Courses"),
        ),
        body: Container(
            color: Colors.white10,
            padding: EdgeInsets.all(16.0),
            child: HomePage(course)
        ),
      ),
    );
  }
}


class HomePage extends StatelessWidget {
  final List<String> course;

  HomePage(this.course);

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: course.length,
      itemBuilder: (context, pos) {
        return Padding(
            padding: EdgeInsets.only(bottom: 16.0),
            child: Card(
              color: Colors.white,
              child: Padding(
                padding: EdgeInsets.symmetric(vertical: 24.0, horizontal: 16.0),
                child: Text(course[pos], style: TextStyle(
                  fontSize: 18.0,
                  height: 1.6,
                ),),
              ),
            )
        );
      },
    );
  }
}

Output :

This screen depicts the usage of flutter listview tutorial

flutter listview tutorial

Leave a Comment