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)); }), ); } }