10. Flutter Tutorial for Beginners – ListView Widget

0
444

Step 1. Create a List

final List entries = ['A', 'B', 'C'];

Step 2. Then use the following code for ListView

ListView.builder(
    padding: const EdgeInsets.all(8),
    itemCount: entries.length,
    itemBuilder: (BuildContext context, int index) {
      return ListTile(
        title: Text(entries[index]),
      );
    }
)

In this example we use ListView.builder. And inside ListView, we are using ListTile widget to display each of item from the list.

Full Example:

import 'package:flutter/material.dart'; 

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State {

  final List entries = ['A', 'B', 'C'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Page'),
      ),
      body: ListView.builder(
          padding: const EdgeInsets.all(8),
          itemCount: entries.length,
          itemBuilder: (BuildContext context, int index) {
            return ListTile(
              title: Text(entries[index]),
            );
          }
      ),
    );
  }

}

LEAVE A REPLY

Please enter your comment!
Please enter your name here