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());
}
Please let me know your queries through comments.
Thanks,
Srikanth
