Advertisements
List widget
Simplest List Widget
Following is a simple widget where a scrollable list of details is added. Note this is a stateless widget and hence the value doesn't change after creation.
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Hello Rainbow Rectangle'),
),
body: HelloList(),
),
),
);
}
class HelloList extends StatelessWidget {
var list = ["Hello", "Test", "Must", "Rest", "Nest"];
@override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: 5,
itemBuilder: (context, index) {
return Container(
padding: EdgeInsets.fromLTRB(20, 20, 20, 20),
child: Text(list[index % list.length] + " " + index.toString()),
);
});
}
}
List with Row layout
When we want to show list of multiple data items, we could use something like a row layout. Check out the following example.
class HelloList extends StatelessWidget {
var list = ["Hello", "Test", "Must", "Rest", "Nest"];
@override
Widget build(BuildContext context) {
return Center(
child: ListView.builder(
itemCount: 10,
itemBuilder: (context, index) {
return Padding(
child: Row(mainAxisAlignment: MainAxisAlignment.start,
children: [
Container(child: Icon(Icons.add_box),padding: EdgeInsets.fromLTRB(0, 0, 10, 0),),
Text(list[index % list.length] + " " + index.toString()),
],
),
padding: EdgeInsets.fromLTRB(20, 20, 20, 20));
}),
);
}
}