DEV Community

loading...
Cover image for Listview inside listview flutter

Listview inside listview flutter

rrtutors profile image rrtutors Originally published at rrtutors.com ・2 min read

This post is about to Learn how to Listview inside Listview. This listview inside listview is called nested listview. In this flutter listview tutorial we are adding Listview inside another Listview, also we are going to implement scroll listview in horizontal and vertical directions.

In this Flutter listview programmin tutorial we will implementing is

  1. Listview Inside Listview
  2. Listview with Horizontal Scrolling
  3. Listview with Vertical Scrolling

We already know Listview is one of the most usable widget types that can be used anywhere. In order to reduce the overload of having various layouts performing the same task(In Android, there are a lot of layouts that perform the same task of arranging the elements inside it either vertically or horizontally), the ListView widget has been introduced

We are already explained different listview examples in Previous Post

Now here showing the how to load listview inside listview.

Listview inside listview

Listview with Horizontal Scrolling

To male Scroll Listview Horizontally we need to add

scrollDirection: Axis.horizontal
Enter fullscreen mode Exit fullscreen mode

Horizontal scroll

ListView.builder(

    scrollDirection: Axis.horizontal,
    itemCount: 10,
    itemBuilder: (context,index){

      return Padding(
        padding: const EdgeInsets.all(2.0),
        child: Card(
          child: Column(
            children: [
              Image.network("https://purepng.com/public/uploads/large/purepng.com-mariomariofictional-charactervideo-gamefranchisenintendodesigner-1701528634653vywuz.png",width: 100,height: 100,),
              Container(
              width: 100,
                color: Colors.grey[200],
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Center(child: Text("Mario $index ")),
                  ))
            ],
          ),
        ),
      );
    })

Enter fullscreen mode Exit fullscreen mode

To read Complete listview inside listview example here

Listview inside listview flutter

Discussion (0)

pic
Editor guide