Flutter listview example

Hello guys, We have discussed basic list implementation of flutter in one of our previous. Here we will implement an example of how to create a dynamic listview in flutter application. Unlike the basic list implementation we will use a listview builder in this example. So that you will get an idea of how to input items to listview dynamically in flutter.

Contents

1. Learn code for implementing listview.
2. Set up the data
3. Implement the listview in class

Learn code for implementing listview

First step is to learn what set of code is used to build a listview in flutter. Following is the which has to be add to build a listview in flutter. You can specify the item count will decide the number of items in the listview and you can return a card in itemBuilder. Full code will be provided in the third step.

body: new ListView.builder(
itemCount: inputs.length,
itemBuilder: (BuildContext context, int index){
return new Card(
child: new Container(
padding: new EdgeInsets.all(20.0),
child: new Column(
children: <Widget>[
Align(
alignment: Alignment.centerLeft,
child: Container(
child: Text(
"${inputs[index]}",
),
),
),
],
),
),
);
}
),

Set up the data

In this step we will set up the data which has to be added in the listivew. Here i am planing to display just a text in listview. So we will create a string list. And we will add data to list in initstate function.

List<String> inputs = new List<String>();
@override
void initState() {
// TODO: implement initState
setState(() {
for(int i=0;i<20;i++){
inputs.add("Name ${i}");
}
});
}

Implement the listview in the class (Complete code)

In this step we will put the pieces together to get a listview.Following is the complete code of the main.dart file which is used for implementing this example. After implementation you will get the output displayed above.

import 'package:flutter/material.dart';
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Listview',
theme: ThemeData(
primarySwatch: Colors.green,
),
home: MyHomePage(title: 'Flutter Listview'),
);
}
}

class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;

@override
FlutterListview createState() => FlutterListview();
}

class FlutterListview extends State<MyHomePage> {

List<String> inputs = new List<String>();
@override
void initState() {
// TODO: implement initState
setState(() {
for(int i=0;i<20;i++){
inputs.add("Name ${i}");
}
});
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return new Scaffold(
appBar: new AppBar(
title: new Text('Listview'),
),
body: new ListView.builder(
itemCount: inputs.length,
itemBuilder: (BuildContext context, int index){
return new Card(
child: new Container(
padding: new EdgeInsets.all(20.0),
child: new Column(
children: <Widget>[
Align(
alignment: Alignment.centerLeft,
child: Container(
child: Text(
"${inputs[index]}",
),
),
),
],
),
),
);
}
),
);
}
}