how to show listview.builder horizontally ? flutter

Question

i am trying to get data from server everything is working good but the data is ho vertically scroll view .:

child: FutureBuilder(
future: getCartData(),
builder: (context, AsyncSnapshot snapshot) {
if (!snapshot.hasData) {
// still waiting for data to come
return Center(
child: CircularProgressIndicator(),
);
} else if (snapshot.hasData &&
snapshot.data.isEmpty) {
return Center(child: Text("No Products"));
;
} else {
  int index=4;
  if (snapshot.hasError) print(snapshot.error);
  return snapshot.hasData
      ?ListView.builder(
      itemCount: snapshot.data!.length,
      itemBuilder: (BuildContext context, index){
        List list = snapshot.data;
        String urlname =
            "https://myurl/media/";
        String imagename = list[index]['itemimage']
            .toString()
            .replaceAll("/media/", "");
        print("$urlname$imagename");
        String Imagename = "$urlname$imagename";
        return SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          child: Row(
            children: <Widget>[
              Container(
                  padding: EdgeInsets.symmetric(vertical: 16.0),
                  width: MediaQuery.of(context).size.width / 2,
                  child: Column(
                    children: <Widget>[
                      SizedBox(
                        height: 150,
                        width: 200,
                        child: Stack(children: <Widget>[
                          Positioned(
                            left: 25,
                            child: SizedBox(
                              height: 150,
                              width: 150,
                              child: Transform.scale(
                                scale: 1.2,
                                child: Image.asset('assets/bottom_yellow.png'),
                              ),
                            ),
                          ),
                          Positioned(
                            left: 50,
                            top: 5,
                            child: SizedBox(
                                height: 80,
                                width: 80,
                                child: Image.network(
                                  '$Imagename',
                                  fit: BoxFit.contain,
                                )),
                          ),
                          Positioned(
                            right: 30,
                            bottom: 25,
                            child: Align(
                              child: IconButton(
                                icon: Image.asset('assets/red_clear.png'),
                                onPressed: (){},
                              ),
                            ),
                          )
                        ]),
                      ),
                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Text(
                          "${list[index]['title']}",
                          textAlign: TextAlign.center,
                          style: TextStyle(
                            color: darkGrey,
                          ),
                        ),
                      ),
                      Text(
                        '${list[index]['price']}',
                        textAlign: TextAlign.center,
                        style: TextStyle(
                            color: darkGrey, fontWeight: FontWeight.bold, fontSize: 18.0),
                      ),
                    ],
                  )),
              index == 8
                  ? SizedBox()
                  : Container(
                  width: 2,
                  height: 200,
                  color: Color.fromRGBO(100, 100, 100, 0.1))
            ],
          ),
        );
      }
  ): Center(child: Text("no data"));
}
},
)),

everythinng working good only problem is that i want horzontal scroll view but with above code i got vertical scroll which is not what i want.

so i added this line in singlechildscrollview:

scrollDirection: Axis.horizontal,

can someone tell me what i am doing wrog?

in listview there is also scroll direction you can determin on the inside of the listview not in the singlechildscrollview — Arbiter Chil
– Arbiter Chil, Commented Jan 23, 2022 at 6:10

Arbiter Chil · Accepted Answer · 2022-01-23 06:30:35Z

2

in listview there is also scroll direction you can determin on the inside of the listview not in the singlechildscrollview

 ListView.builder(
      scrollDirection: Axis.horizontal,
      //physics: const NeverScrollableScrollPhysics()
     ),

edited Jan 23, 2022 at 6:30

answered Jan 23, 2022 at 6:20

Arbiter Chil

1,3101 gold badge8 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Masum Billah Sanjid · Accepted Answer · 2022-01-23 06:25:00Z

0

Add scrollDirection as Axis.horizontal reference

 ListView.builder(
      scrollDirection: Axis.horizontal,
    ),

answered Jan 23, 2022 at 6:25

Masum Billah Sanjid

1,2091 gold badge11 silver badges21 bronze badges

Collectives™ on Stack Overflow

how to show listview.builder horizontally ? flutter

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related