CODEWITHSUNDEEP
firebaseflutterdartgoogle-cloud-firestore
Mt Khalifa
Mt Khalifa

Reputation: 498

Horizontal ListView inside SliverAppBar

I am trying to add a Horizontal ListView.builder Inside a SliverAppBar, but every list item appears on top of each other like a traditional list (VERTICLE), when try to change the Scroll direction the whole list disappear.

this is the Items inside SAB

body: SingleChildScrollView(
            child: Column(
              children: [
                CATS(),
               
                Center(
                  child: Text('خانه های کرایی جدید'),
                SizedBox(height: 5),
                LatestForRent(),//TO BE SCROLLED HORIZONTAL
                SizedBox(height: 5),
                Center(
                  child: Text('خانه های فروشی جدید'),
                SizedBox(height: 5),
                LatestForSale(), //TO BE SCROLLED HORIZONTAL
                SizedBox(height: 5),
                Center(
                  child: Text('خانه های گروی جدید'),
                SizedBox(height: 5),
                LatestGerawi(),//TO BE SCROLLED HORIZONTAL

this is the List

StreamBuilder(
      stream: FirebaseFirestore.instance
          .collection('Sell')
          .orderBy('TS', descending: true)
          .snapshots(),
      builder: (context, snapshot) {
        if (snapshot.data == null)
          return Center(
            child: CircularProgressIndicator(
              backgroundColor: Colors.red,
              valueColor: new AlwaysStoppedAnimation<Color>(Colors.cyan[400]),
            ),
          );
        return ListView.builder(
          // scrollDirection: Axis.horizontal,
          shrinkWrap: true,
          itemCount: 2,
          itemBuilder: (context, index) => Padding(
            padding: const EdgeInsets.all(5.0),
            child: Container(
              height: 200,
              width: 300,

Upvotes: 0

Views: 637

Answers (1)

HasilT
HasilT

Reputation: 2609

Give an height to your ListView.

StreamBuilder(
  stream: FirebaseFirestore.instance
      .collection('Sell')
      .orderBy('TS', descending: true)
      .snapshots(),
  builder: (context, snapshot) {
    if (snapshot.data == null)
      return Center(
        child: CircularProgressIndicator(
          backgroundColor: Colors.red,
          valueColor: new AlwaysStoppedAnimation<Color>(Colors.cyan[400]),
        ),
      );
    return Container(
      height: 200,
      child:ListView.builder(
         scrollDirection: Axis.horizontal,
         shrinkWrap: true,
         itemCount: 2,
         itemBuilder: (context, index) => Padding(
          padding: const EdgeInsets.all(5.0),
          child: Container(
            height: 200,
            width: 300,
      )));

Upvotes: 1

Related Questions