Filter by Widgets


ListView Widget - ListView Layouts Implementation - ListView, ListView.builder, ListView.custom,ListView.seperated

This Article is posted by seven.srikanth at 06-10-2018 15:02:28


In this example, I've implemented Flutter ListView Widget into a TabBar. Each tab will have different ListView layout implementations.
As per Flutter documentation, ListView is the most commonly used scrolling widget. It displays its children one after another in the scroll direction. In the cross axis, the children are required to fill the ListView.
Various ListView layouts are ListView, ListView.builder, ListView.custom,ListView.seperated.
The default constructor takes an explicit List of children. This constructor is appropriate for list views with a small number of children because constructing the List requires doing work for every child that could possibly be displayed in the list view instead of just those children that are actually visible.
The ListView.builder constructor takes an IndexedWidgetBuilder, which builds the children on demand. This constructor is appropriate for list views with a large (or infinite) number of children because the builder is called only for those children that are actually visible.
The ListView.separated constructor takes two IndexedWidgetBuilders: itemBuilder builds child items on demand, and separatorBuilder similarly builds separator children which appear in between the child items. This constructor is appropriate for list views with a fixed number of children.
The ListView.custom constructor takes a SliverChildDelegate, which provides the ability to customize additional aspects of the child model. For example, a SliverChildDelegate can control the algorithm used to estimate the size of children that are not actually visible.
Here is the final output of this program.
##FlutterCentralAds##
Here is the final code from main.dart. All you need to do is, copy paste this code into your newly created flutter project and run.
##FlutterCentralAds##
import 'package:flutter/material.dart';
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: DefaultTabController(
length: 5,
child: Scaffold(
appBar: AppBar(
title: Text('ListView Demo'),
bottom: TabBar(
tabs: [
Tab(
text: 'ListView',
),
Tab(
text: 'ListView.builder',
),
Tab(
text: 'ListView.custom',
),
Tab(
text: 'ListView.seperated',
),
],
isScrollable: true,
)),
body: TabBarView(children: [
ListView(
scrollDirection: Axis.vertical,
controller: ScrollController(),
children: List.generate(100, (index) {
return Container(
padding: EdgeInsets.all(20.0),
child: Center(
child: ListTile(
leading: const Icon(Icons.account_circle,
size: 40.0, color: Colors.white30),
title: Text('MainItem $index'),
subtitle: Text('SubText $index'),
),
),
color: Colors.blue[400],
margin: EdgeInsets.all(1.0),
);
}),
),
ListView.builder(
itemCount: 50,
scrollDirection: Axis.vertical,
controller: ScrollController(),
itemBuilder: (BuildContext context, int index) {
//if (index < 50)
return Container(
padding: EdgeInsets.all(20.0),
child: Center(
child: ListTile(
leading: const Icon(Icons.account_circle,
size: 40.0, color: Colors.white30),
title: Text('MainItem $index'),
subtitle: Text('SubText $index'),
),
),
color: Colors.blue[400],
margin: EdgeInsets.all(1.0),
);
},
),
ListView.custom(
childrenDelegate:
SliverChildListDelegate(List.generate(100, (index) {
return Container(
padding: EdgeInsets.all(20.0),
child: Center(
child: ListTile(
leading: const Icon(Icons.account_circle,
size: 40.0, color: Colors.white30),
title: Text('MainItem $index'),
subtitle: Text('SubText $index'),
),
),
color: Colors.blue[400],
margin: EdgeInsets.all(1.0),
);
})),
),
ListView.separated(
itemCount: 50,
separatorBuilder: (BuildContext context, int index) =>
Container(
padding: EdgeInsets.all(20.0),
child: Center(
child: ListTile(
leading: const Icon(Icons.account_circle,
size: 40.0, color: Colors.grey),
title: Text('SeperatorItem $index'),
subtitle: Text('SeperatorSubText $index'),
),
),
color: Colors.amber[100],
margin: EdgeInsets.all(1.0),
),
itemBuilder: (BuildContext context, int index) {
//if (index < 50)
return Container(
padding: EdgeInsets.all(20.0),
child: Center(
child: ListTile(
leading: const Icon(Icons.account_circle,
size: 40.0, color: Colors.white30),
title: Text('MainItem $index'),
subtitle: Text('SubText $index'),
),
),
color: Colors.blue[400],
margin: EdgeInsets.all(1.0),
);
},
),
]))),
);
}
}
void main() {
runApp(MyApp());
}
##FlutterCentralAds##
Please let me know your queries through comments. 
Thanks,
Srikanth
0 Comments
Login to comment.
Recent Comments

Be the first to Comment. You can ask a Query or Share your toughts or Just say thanks.




Recent articles

Error: The name 'RangeSlider' is defined in the libraries 'package:flutter/src/material/range_slider.dart' and 'package:flutter_range_slider/src/flutter_range_slider.dart'.

Check out this article on Error: The name 'RangeSlider' is defined in the libraries 'package:flutter/src/material/range_slider.dart' and 'package:flutter_range_slider/src/flutter_range_slider.dart'.

Read full post

How to create a persistent bottom sheet in Flutter?

Check out this article on How to create a persistent bottom sheet in Flutter?

Read full post

How to draw a Decorative Horizontal line in Flutter?

Check out this article on How to draw a Decorative Horizontal line in Flutter?

Read full post

How to fetch an Image from Internet in Flutter

Check out this article on How to fetch an Image from Internet in Flutter

Read full post

ListView with Images from the Internet

Check out this article on ListView with Images from the Internet

Read full post

How to show Tooltip in Flutter?

Check out this article on How to show Tooltip in Flutter?

Read full post

How to create BottomNavigationBar in flutter?

Check out this article on How to create BottomNavigationBar in flutter?

Read full post

How to add actions to Appbar?

Check out this article on How to add actions to Appbar?

Read full post

How to open dart devtools in VS code?

Check out this article on How to open dart devtools in VS code?

Read full post

Accessibility features in flutter

Check out this article on Accessibility features in flutter

Read full post

© 2018 - Fluttercentral | Email to me - Seven.srikanth@gmail.com

Except as otherwise noted, this work is licensed under a Creative Commons Attribution 4.0 International License , and code samples are licensed under the BSD License.