How to Display two ListViews on a One Screen In a Flutter?

We all know the ListView Widget is one of the important Flutter widget that can be used any Flutter app project. The Flutter introduce the ListView Widget with a purpose to reduce the overload on different layouts performing the similar tasks in application.
. In this article, we will go through how to display two ListViews on One Screen in a flutter?

How to Display two ListViews on a One Screen In a Flutter?

The following code snippet shows two listview vertical directions on a single page, both ListView Data are from APIs.

return Scaffold(
        appBar: AppBar(
          title: const Text("Two List View One Screen"),
        ),
        body: Row(
          children: [
            Flexible(
              child: Container(
                color: Colors.blueGrey,
                child: ListView.builder(
                  itemCount: 30,
                  itemBuilder: (_, i) => ListTile(title: Text("List1: $i")),
                ),
              ),
            ),
            Flexible(
              child: Container(
                color: Colors.lightGreen,
                child: ListView.builder(
                  itemCount: 30,
                  itemBuilder: (_, i) => ListTile(title: Text("List2: $i")),
                ),
              ),
            ),
          ],
        ));

The following code snippet shows two listview horizontal directions on a single page:

return Scaffold(
        appBar: AppBar(
          title: const Text("Two List View One Screen"),
        ),
        body: Column(
          children: [
            Flexible(
              child: Container(
                color: Colors.blueGrey,
                child: ListView.builder(
                  itemCount: 30,
                  itemBuilder: (_, i) => ListTile(title: Text("List1: $i")),
                ),
              ),
            ),
            Flexible(
              child: Container(
                color: Colors.lightGreen,
                child: ListView.builder(
                  itemCount: 30,
                  itemBuilder: (_, i) => ListTile(title: Text("List2: $i")),
                ),
              ),
            ),
          ],
        ));

Conclusion:

Thanks for Reading !!!

Kindly drop your suggestion/feedback to serve you much better.

One of the leading Flutter development company Flutter Agency is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

Article source: https://flutteragency.com/how-to-display-two-listviews-on-a-one-screen-in-a-flutter/