Multiple Listview in Flutter

Hi Guy’s Welcome to Proto Coders Point. In this Flutter Tutorial will learn How to display Multiple ListViews in Flutter in a single screen where the user can interact with both the list at once.

Video Tutorial

Source Code

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final fruits = List.generate(100, (index) => "Fruit $index");
  final veg = List.generate(100, (index) => "Veg $index");

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            width: MediaQuery.of(context).size.width,
            padding: EdgeInsets.symmetric(vertical: 10, horizontal: 20),
            child: Text(
              "Fruits",
              style: TextStyle(fontSize: 18),
            ),
            color: Colors.blueAccent,
          ),
          Expanded(
            child: ListView.builder(
                itemCount: fruits.length,
                itemBuilder: (context, index) {
                  return Container(
                    child: ListTile(
                      title: Text(fruits[index]),
                    ),
                  );
                }),
          ),
          Container(
            width: MediaQuery.of(context).size.width,
            padding: EdgeInsets.symmetric(vertical: 10, horizontal: 20),
            child: Text(
              "Veg",
              style: TextStyle(fontSize: 18, color: Colors.white),
            ),
            color: Colors.black,
          ),
          Expanded(
            child: ListView.builder(
                itemCount: veg.length,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text(veg[index]),
                  );
                }),
          )
        ],
      ),
    );
  }
}

Code Explanation

I have generated a list of data that I want to display in listview.

final fruits = List.generate(100, (index) => "Fruit $index");
final veg = List.generate(100, (index) => "Veg $index");

In above snippet code, I have created 2 dummy list of data by using List.generator and I want to display both the list of data into once screen itself, so that user can easily interact with both of then on single screen.

Then, To display multiple widgets we make use of Column widget to arrange it’s children vertically. In Column widget we place 2 section: one to display fruits and another to display list of vegetables for this we make use of ListView.builder.

Each ListView.builder is configured with an itemCount property to determine the number of items in the list.

The itemBuilder property defines a callback function that returns a widget for each item in the list.

In the provided code, ListTile widgets are used as list items, displaying text based on the content of fruits and veg lists.