ListView

The ListView widget in Flutter is a scrollable list of widgets. It is one of the most commonly used scrolling widgets in Flutter applications. Here’s a brief overview of how to use ListView and its various constructors.

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  
  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        backgroundColor: Colors.white,
        body: ListView(
          children : [
          Container(height: 350, color: Colors.deepPurple,),
          Container(height: 350, color: Colors.deepPurple[400],),
          Container(height: 350, color: Colors.deepPurple[200],),
        ],)
      ),
    );
  }
  
}

Screencast 2024-07-18 12_35_17.gif

ListView.builder

For a large or infinite list, use ListView.builder, which lazily builds its children on demand. It takes an itemBuilder function and an itemCount.


class MyApp extends StatelessWidget {
  MyApp({super.key});
  
  final List names = ["Mitch", "Jose", "Vince"];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: ListView.builder(
          itemCount: names.length,
          itemBuilder: (context, index) => ListTile(
            title: Text(names[index]),
        ))
      ),
    );
  }
  
}

Pasted image 20240718124704.png