ListView, ListTitle, ListView.builder
Sample Code Snippet
Following is a sample code snippet to show list of items as a list of widgets in a ListView dynamically.
List<E> items = <E>[...];
ListView.builder(
itemCount: items.length,
itemBuilder: (BuildContext context, int index) {
return <Widget>;
}
)
....................................................................................................................................................................................................................................
Example :#1
import 'package:flutter/material.dart';
void main()=>runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context){
return MaterialApp(
home: MyHome(),
);
}
}
class MyHome extends StatefulWidget{
@override
MyHomeState createState()=>MyHomeState();
}
class MyHomeState extends State<MyHome>{
@override
Widget build(BuildContext context){
return Scaffold(
appBar: AppBar(),
body:ListView(
children: <Widget>[
ListTile(
title: Text('Hello'),
),
ListTile(
title: Text('Hello'),
),
],
)
);
}
}
....................................................................................................................................................................................................................................
Example :#2[ListTitle.divideTiles]
import 'package:flutter/material.dart';
void main()=>runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context){
return MaterialApp(
home: MyHome(),
);
}
}
class MyHome extends StatefulWidget{
@override
MyHomeState createState()=>MyHomeState();
}
class MyHomeState extends State<MyHome>{
@override
Widget build(BuildContext context){
return Scaffold(
appBar: AppBar(),
body:ListView(
children: ListTile.divideTiles(
context: context,
tiles: [
ListTile(
title: Text('Hello'),
),
ListTile(
title: Text('World'),
),
ListTile(
title: Text('Hello World'),
),
]
).toList()
)
);
}
}
....................................................................................................................................................................................................................................
Example :#3
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHome(),
);
}
}
class MyHome extends StatefulWidget {
@override
MyHomeState createState() => MyHomeState();
}
class MyHomeState extends State<MyHome> {
final europeanCountries = [
'Albania',
'Andorra',
'Armenia',
'Austria',
'Azerbaijan',
'Belarus',
'Belgium',
'Bosnia and Herzegovina',
'Bulgaria',
'Croatia',
'Cyprus',
'Czech Republic',
'Denmark',
'Estonia',
'Finland',
'France',
'Georgia',
'Germany',
'Greece',
'Hungary',
'Iceland',
'Ireland',
'Italy',
'Kazakhstan',
'Kosovo',
'Latvia',
'Liechtenstein',
'Lithuania',
'Luxembourg',
'Macedonia',
'Malta',
'Moldova',
'Monaco',
'Montenegro',
'Netherlands',
'Norway',
'Poland',
'Portugal',
'Romania',
'Russia',
'San Marino',
'Serbia',
'Slovakia',
'Slovenia',
'Spain',
'Sweden',
'Switzerland',
'Turkey',
'Ukraine',
'United Kingdom',
'Vatican City'
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: ListView.separated(
itemCount: 100,
itemBuilder: (context, index) {
return Container(
padding: EdgeInsets.all(10),
//color: Colors.red,
child: ListTile(
title: Text(
europeanCountries[index],
style: TextStyle(color: Colors.white),
)
),
);
},
separatorBuilder: (context, index){
return Divider();
},
),
);
}
}
....................................................................................................................................................................................................................................
Example :#4
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHome(),
);
}
}
class MyHome extends StatefulWidget {
@override
MyHomeState createState() => MyHomeState();
}
class MyHomeState extends State<MyHome> {
final europeanCountries = [
'Albania',
'Andorra',
'Armenia',
'Austria',
'Azerbaijan',
'Belarus',
'Belgium',
'Bosnia and Herzegovina',
'Bulgaria',
'Croatia',
'Cyprus',
'Czech Republic',
'Denmark',
'Estonia',
'Finland',
'France',
'Georgia',
'Germany',
'Greece',
'Hungary',
'Iceland',
'Ireland',
'Italy',
'Kazakhstan',
'Kosovo',
'Latvia',
'Liechtenstein',
'Lithuania',
'Luxembourg',
'Macedonia',
'Malta',
'Moldova',
'Monaco',
'Montenegro',
'Netherlands',
'Norway',
'Poland',
'Portugal',
'Romania',
'Russia',
'San Marino',
'Serbia',
'Slovakia',
'Slovenia',
'Spain',
'Sweden',
'Switzerland',
'Turkey',
'Ukraine',
'United Kingdom',
'Vatican City'
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: ListView (
children: <Widget>[
ListTile(
leading: Icon(Icons.wb_sunny),
title: Text('Sun'),
trailing: Icon(Icons.keyboard_arrow_right),
),
ListTile(
leading: Icon(Icons.brightness_3),
title: Text('Moon'),
trailing: Icon(Icons.keyboard_arrow_right),
),
ListTile(
leading: Icon(Icons.star),
title: Text('Star'),
trailing: Icon(Icons.keyboard_arrow_right),
),
],
),
);
}
}
....................................................................................................................................................................................................................................
Example :#5
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHome(),
);
}
}
class MyHome extends StatefulWidget {
@override
MyHomeState createState() => MyHomeState();
}
class MyHomeState extends State<MyHome> {
final titles = ['bike', 'boat', 'bus', 'car',
'railway', 'run', 'subway', 'transit', 'walk'];
final icons = [Icons.directions_bike, Icons.directions_boat,
Icons.directions_bus, Icons.directions_car, Icons.directions_railway,
Icons.directions_run, Icons.directions_subway, Icons.directions_transit,
Icons.directions_walk];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: ListView.builder (
itemCount: titles.length,
itemBuilder: (context, index){
return Card(
child: ListTile(
leading: Icon(icons[index]),
title: Text(titles[index]),
),
);
},
)
);
}
}
....................................................................................................................................................................................................................................
Example :#6
import 'package:flutter/material.dart';
void main()=>runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context){
return MaterialApp(
home: Home(),
);
}
}
class Home extends StatefulWidget{
@override
HomeState createState()=>HomeState();
}
class HomeState extends State<Home>{
@override
Widget build(BuildContext context){
return Scaffold(
body:ListView.builder(
itemBuilder: (context, index){
return Card(
child: InkWell(
onTap: (){
print('Hello World');
},
child: Padding(
padding: EdgeInsets.all(10.0),
child: Row(
children: <Widget>[
Column(),
Column(),
],
),
),
),
);
}
) ,
);
}
}
....................................................................................................................................................................................................................................
Example :#7
import 'package:flutter/material.dart';
void main()=>runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context){
return MaterialApp(
home: Home(),
);
}
}
class Home extends StatefulWidget{
@override
HomeState createState()=>HomeState();
}
class HomeState extends State<Home>{
List<String> titles = ['Sun', 'Moon', 'Star'];
@override
Widget build(BuildContext context){
return Scaffold(
body:ListView.builder(
itemCount: titles.length,
itemBuilder: (context, index){
final item = titles[index];
return Card(
child: ListTile(
title: Text(item),
onTap: (){
setState(() {
titles.insert(index, 'Hello World');
});
},
onLongPress: (){
setState(() {
titles.removeAt(index);
});
},
),
);
},
) ,
);
}
}
....................................................................................................................................................................................................................................
Example :#8
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Home(),
);
}
}
class Home extends StatefulWidget {
@override
HomeState createState() => HomeState();
}
class HomeState extends State<Home> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('List View'),
),
body: _listbody(),
);
}
ListView _listbody() {
return ListView.builder(
itemCount: 10,
itemBuilder: (context, index) {
return ListTile(
leading: Icon(Icons.thumb_up),
title: Text('List one ${index}'),
subtitle: Text('Subtitle'),
trailing: IconButton(
onPressed: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) => DetailPage(index)));
},
icon: Icon(Icons.arrow_forward),
),
onTap: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) => DetailPage(index)));
},
);
});
}
}
class DetailPage extends StatelessWidget {
final int index;
DetailPage(this.index);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('DetailsPage'),
),
body: Center(
child: Text('Details page${index}'),
),
);
}
}
....................................................................................................................................................................................................................................
Example :#9
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(
home: MyApp(
title: 'List View',
)));
class MyApp extends StatefulWidget {
MyApp({Key key, this.title}) : super(key: key);
final String title;
@override
MyAppState createState() => MyAppState();
}
class MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
List<String> list = [];
for (int i = 0; i < 10; i++) {
list.add('Hello Worlddddd $i');
}
List<Widget> mylist = list.map((e) => Text(e)).toList();
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: ListView(
children: mylist
),
);
}
}
....................................................................................................................................................................................................................................
Example :#10
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(
home: MyApp(
title: 'List View',
)));
class MyApp extends StatefulWidget {
MyApp({Key key, this.title}) : super(key: key);
final String title;
@override
MyAppState createState() => MyAppState();
}
class MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
List<String> list = [];
for (int i = 0; i < 20; i++) {
list.add('Hello World$i');
}
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: ListView.builder(
scrollDirection: Axis.vertical,
itemCount: list.length,
itemBuilder: (context, int index) {
return Container(
color: index % 2 == 0 ? Colors.grey : Colors.white,
child: ListTile(
leading: Icon(Icons.wb_sunny),
trailing: Icon(Icons.arrow_forward),
title: Text('Test ${list[index]}'),
),
);
},
),
);
}
}
....................................................................................................................................................................................................................................
Example :#11 [Listview]
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(home: Home());
}
}
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Hello'),
),
body:ListView(
children: [
Column(
children: [
Container(
width: 200,
height: 400,
color: Colors.amberAccent,
),
SizedBox(width: 10),
Container(
width: 200,
height: 300,
color: Colors.red,
),
],
),
],
),
);
}
}
Happy Coding :)
....................................................................................................................................................................................................................................
Example :#12 [ SingleChildScrollView ]
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(home: Home());
}
}
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Hello'),
),
body:SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: 250,
height: 250,
color: Colors.red,
),
SizedBox(height: 10.0),
Container(
width: 250,
height: 250,
color: Colors.yellow,
),
SizedBox(height: 10.0),
Container(
width: 250,
height: 250,
color: Colors.green,
),
],
),
)
);
}
}
Happy Coding
....................................................................................................................................................................................................................................
Example :#13 [ SingleChildScrollView ]
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(home: Home());
}
}
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Hello'),
),
body:SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: 250,
height: 250,
color: Colors.red,
),
SizedBox(height: 10.0),
Container(
width: 250,
height: 250,
color: Colors.yellow,
),
SizedBox(height: 10.0),
Container(
width: 250,
height: 250,
color: Colors.green,
),
],
),
)
);
}
}
Happy Coding :)
....................................................................................................................................................................................................................................
Example :#14 [ SingleChildScrollView ]
....................................................................................................................................................................................................................................
Example :#15 [ SingleChildScrollView ]
