Introduction
If you have performed any Android or iOS improvement before, you are going to love how effortless it is to make ListViews in Flutter. In this article we will use easy examples to seem to be at all of the frequent use instances for making them.
First we will look at the major sorts of ListViews that are available. After that I’ll show you how to modify the UI of items.
I’m assuming that you have the Flutter set up and that you have a fundamental knowledge of how to make an app. If not, test out the following links: Create a new flutter project
Setup
Start a new Flutter project. I’m giving it a name like flutter_listview.
Open main.dart and replace the code with the following:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'List view',
theme: ThemeData(
primarySwatch: Colors.teal,
),
home: Scaffold(
appBar: AppBar(title: Text('List view')),
body: ListViewLayout(),
),
);
}
}
class ListViewLayout extends StatelessWidget {
@override
Widget build(BuildContext context) {
return loadListView(context);
}
}
//REPLACE THIS WITH BELOW MENTIONED CODE FOR STATIC LISTVIEW
Widget loadListView(BuildContext context) {
return ListView();
}
Now, we can make a listview in two ways. static listview and dynamic listview depending on need.
Static ListView:
If you have a quick listing of gadgets that do not change, then you can use the default ListView constructor to make it. This is beneficial for making something like a settings menu page.
Widget loadListView(BuildContext context) {
return ListView(
children: [
ListTile(
title: Text('One'),
),
ListTile(
title: Text('Two'),
),
ListTile(
title: Text('Three'),
),
ListTile(
title: Text('Four'),
),
ListTile(
title: Text('Five'),
),
],
);
}
Here, ListTile is used to add items to our list. ListTile has a set of parameters which is used to customize it.
Plus : You can add a divider between list items by using ListTile.divideTiles. see example here.
Widget loadListView(BuildContext context) {
return ListView(
children: ListTile.divideTiles(
context: context,
tiles: [
ListTile(
title: Text('One'),
),
ListTile(
title: Text('Two'),
),
ListTile(
title: Text('Three'),
),
ListTile(
title: Text('Four'),
),
ListTile(
title: Text('Five'),
),
],
).toList(),
);
}
Dynamic ListView:
When you have a list of data which needs to populate in listview then we can use ListView.builder. This builder loads data only when they need to get displayed on screen, means additional items will be loaded while scroll only.
var list = ['One', 'Two', 'Three', 'Four', 'Five', 'Six',
'Seven', 'Eight', 'Nine', 'Ten', 'Eleven', 'Twelve',
'Thirteen', 'Fourteen', 'Fifteen', 'Seventeen', 'Eighteen', 'Nineteen', 'Twenty'
];
return ListView.builder(
//BELOW LINE IS NECESSARY TO TELL MAX SIZE OF LIST, OTHERWISE YOU WILL GET EXCEPTION
itemCount: list.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(list[index]),
);
},
);
Look at code again, i have tell list about it’s max items using itemCount: list.length. Whereas itemBuilder will dynamically create ListTile and index param will get particular indexed data from list and set it to ListTile.
Conclusion: This article is published to help with create static and dynamic List view.
Thank you for reading this article. if you need any help then you can contact us on info@tagnism.com