Flutter - Displaying two ListViews on one screen

Question

I\'m trying to add a horizontal listView.builder on top of another vertical listView.builder. Both listViews should have text

Answer 1

This sample code shows two listview vertical direction in single page,both lisview data are from APIs and i design a listitem widget or template separately (ListItemPosts).

body: ListView(
              children: [
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    SizedBox(height: 10.0),
                    new Container(
                      margin: EdgeInsets.only(left: 10.0,right: 10.0),
                      height: 40.0, width: double.infinity,
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(25.0),
                          color: Colors.green.withOpacity(0.25)
                      ),
                    child:Padding(
                      padding: const EdgeInsets.only(left: 15.0,right: 15.0,top: 8.0),


                      child: Text(
                        'Invoiced Products',
                        style: TextStyle(
                            fontFamily: 'Quicksand',
                            fontSize: 20.0,
                            color: Colors.green,
                            fontWeight: FontWeight.bold),
                        textAlign: TextAlign.center,
                      ),
                    ), 
                    ),

                    SizedBox(height: 5.0),
                    FutureBuilder>(
                      future: fetchstring(http.Client()),
                      builder: (context, snapshot) {
                        if (snapshot.hasError) print(snapshot.error);
                        return snapshot.hasData ? ListItemPosts(
                            items: snapshot.data)
                            : Center(child: CircularProgressIndicator());
                      },
                    ),
                    SizedBox(height: 10.0)
                  ],
                ),
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    SizedBox(height: 10.0),
                    new Container(
                      margin: EdgeInsets.only(left:10.0,right: 10.0),
                      height: 40.0, width: double.infinity,
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(25.0),
                          color: Colors.red.withOpacity(0.25)
                      ),
                      child:Padding(
                        padding: const EdgeInsets.only(left: 15.0,right: 15.0,top: 8.0),
                        child: Text(
                          'Pending Products',
                          style: TextStyle(
                              fontFamily: 'Quicksand',
                              fontSize: 20.0,
                              color: Colors.red,
                              fontWeight: FontWeight.bold),
                          textAlign: TextAlign.center,
                        ),
                      ),
                    ),

                    SizedBox(height: 5.0),
                    FutureBuilder>(
                      future: fetchstring(http.Client()),
                      builder: (context, snapshot) {
                        if (snapshot.hasError) print(snapshot.error);
                        return snapshot.hasData ? ListItemPosts(
                            items: snapshot.data)
                            : Center(child: CircularProgressIndicator());
                      },
                    ),
                    SizedBox(height: 10.0)
                  ],
                )
              ],
            )

ListitemPost (widget)

class ListItemPosts extends StatelessWidget {
  final List items;
  ListItemPosts({Key key, this.items}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Container(

        child: new ListView.builder(
            itemCount:  items[0].sodetails.length,
            primary: false,
            shrinkWrap: true,

            itemBuilder: (BuildContext context, int position) {
              return new  Column(
                children: [
                  Divider(height: 5.0),
                  listItem(your Data can pass),
                ],
              );


            })

    );

  }

}

Widget listItem(Get the data ) {
  return Container(
    height: 125.0,
    width: double.infinity,

    margin: EdgeInsets.only(left: 10.0,right: 10.0),
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(12.0),
      color: Colors.white,
    ),
    child:
    Row(
      children: [
        /*Container(
          decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(12.0),
              image:
              DecorationImage(image: AssetImage(imagedata))),
          height: 100.0,
          width: 80.0,
        ),*/

        SizedBox(width: 0.0),
        Container(
          width: MediaQuery.of(context).size.width -30.0,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Flexible(child:
                  Text(
                    imagename,
                    textAlign: TextAlign.left,
                    softWrap: false,
                    style: TextStyle(fontFamily: 'Quicksand',fontSize: 14.0,color: Colors.black),
                  )),
                  SizedBox(height: 5.0),
                  Flexible(child:
                  Text(
                    trim.stringtrim(imagedes),
                    overflow: TextOverflow.ellipsis,
                    maxLines: 2,
                    style: TextStyle(fontFamily: 'Quicksand',fontSize: 12.0,color: Colors.black45),
                  ),
                  ),
                  SizedBox(height: 5.0),
                  Text(
                    'Price: '+Price.toString(),
                    style: TextStyle(fontFamily: 'Quicksand'),
                  ),
                  SizedBox(height: 5.0),
                  Text(
                    'Qty: '+Quatity.toString(),
                    style: TextStyle(fontFamily: 'Quicksand'),
                  ),
                  SizedBox(height: 5.0),
                  Container(
                    height: 2.0,
                    width: 100.0,
                    color: Colors.amber,
                  ),

                ],
              ),

            ],
          ),
        ),

      ],
    ),
  );
}