Home > Enterprise >  How to create horizontal Listview in listview builder flutter
How to create horizontal Listview in listview builder flutter

Time:10-28

I am using an API to build a movies application, I had a problem with making theListView to be from left to right instead of up and dowm.I am trying to create a horizontal list view but it displayed not as expected. You can see how it looks in the Image bellow. It works with me usually but it my first time to do that inside a listview builder. How to fix that?

Note: I want the full screen to be vertical and this part only horizontal.

 @override
  Widget build(BuildContext context) {
    return  Scaffold(
      body: Container(
        child: 
      FutureBuilder(
        future: getData(),
        builder: (BuildContext context,AsyncSnapshot snapshot){
          if(snapshot.data == null){
            return Container(
              child: Center(
                child:CircularProgressIndicator() ,),);
          }
         

          else{
            return ListView.builder(
              
              itemCount: snapshot.data.length, 
               itemBuilder: (BuildContext context,int i){

                 if(snapshot.data==null){
                   return Center(
                     child: CircularProgressIndicator(),
                   );
                 }
                 else{
                 return Container(
                     height: 250,
                     child: Card(
                       child: ListView(
                         scrollDirection: Axis.horizontal,
                         children: [
                           Image(image: NetworkImage(snapshot.data[i].poster))
                         ],
                       ),
                     ),
                   );
               }}
               );
               
          }
         
        }
      ,),
      
        ),
       );
     }
  }

Image

here

CodePudding user response:

You can use scrollDirection: Axis.horizontal, inside the Listview.Builder to make it scroll horizontally and add a width for the container that's being returned.

CodePudding user response:

Try below code hope its helpful to you . declare your ListView.builder() like below refer Listview image

  • Related