ListView widget is used to create a scrollable list of widgets.
You
can display a collection of widgets vertically or horizontally and
automatically scroll when the content exceeds the available space.
There Are Some Common Attributes for ListView
itemCount | length |
itemBuilder | index |
ListTile | title, subtitle, trailing, leading |
ListView(
children: [
//Item 1
//Item 2
// Item 4
],
);
Here's a simple example of using a ListView in Flutter:
File open lib->main.dart file −
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('List Example'),
),
body: MyApp(),
),
)
);
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return
ListView(
children: [
ListTile(
title: Text("Alarm"),
subtitle: Text("Set Alarm"),
leading: Icon(Icons.access_alarm),
onTap: (){
},
),
ListTile(
title: Text("Address"),
subtitle: Text("Set Address"),
leading: Icon(Icons.account_balance),
onTap: (){
},
)
],
);
}
}
Here's a simple example of using a ListView.Builder in Flutter:
File open lib->main.dart file −
Open Device Manager, run the emulator, and then run the application. Next, check the working output and check the output you declared in your code.import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('List Example'),
),
body: MyApp(),
),
)
);
}
class MyApp extends StatelessWidget {
final titles=[
"Title 1",
"Title 2",
"Title 3",
"Title 4",
"Title 5",
"Title 6",
"Title 7",
"Title 8",
"Title 9",
"Title 10",
"Title 11",
"Title 12"];
final subTitle=[
"This is Sub Title 1",
"This is Sub Title 2",
"This is Sub Title 3",
"This is Sub Title 4",
"This is Sub Title 5",
"This is Sub Title 6",
"This is Sub Title 7",
"This is Sub Title 8",
"This is Sub Title 9",
"This is Sub Title 10",
"This is Sub Title 11",
"This is Sub Title 12",
];
@override
Widget build(BuildContext context) {
return
ListView.builder(
itemCount: titles.length,
itemBuilder: (BuildContext context, int index) {
return
Card(
child:
ListTile(
title: Text(titles[index]),
subtitle: Text(subTitle[index]),
trailing: Icon(Icons.arrow_forward),
leading: const CircleAvatar(
backgroundImage: NetworkImage("https://media.wired.com/photos/593261cab8eb31692072f129/master/pass/85120553.jpg"),
),
onTap: () {
},
),
);
},
);
}
}