CODEWITHSUNDEEP
firebaseflutterdart
TJMitch95
TJMitch95

Reputation: 491

Flutter / Firebase - How to create a vertical List View which contains horizontal list views

I am trying to create a vertical list view which contains horizontal list views using firebase as the datasource. I have created the horizontal scroll view which contains my occasions but now need to house that inside a vertical scroll view for different events.

Here is the code for my homepage

  class HomePageTest extends StatefulWidget {
  @override
  _HomePageTestState createState() => _HomePageTestState();
}

class _HomePageTestState extends State<HomePageTest> {

  final AuthService _auth = AuthService();

  @override
  Widget build(BuildContext context) {
    return StreamProvider<List<GreetingCard>>.value(
      value: DatabaseService().cards,
      child: Scaffold(
        appBar: PreferredSize(
          preferredSize: const Size.fromHeight(80),
          child: MainAppBar(
            text: 'Pick an occasion...',
          ),
        ),
        body:
            CardList(),

      ));
}
  }

Card list:

class CardList extends StatefulWidget {
  @override
  _CardListState createState() => _CardListState();
}

class _CardListState extends State<CardList> {
  @override
  Widget build(BuildContext context) {

    final greetingsCards = Provider.of<List<GreetingCard>>(context);

    return Container(
      height: 200.0,
      child: ListView.builder(
          itemCount: greetingsCards.length,
          itemBuilder: (context, index){
          return Column(
            children: [
              Text(greetingsCards[index].event),
              Card(
                  child: CardTile(greetingCard: greetingsCards[index],)),
            ],
          );
        }, scrollDirection: Axis.horizontal),
    );
  }
}

and finally card tile:

class CardTile extends StatelessWidget {

  final GreetingCard greetingCard;

  const CardTile({Key key, this.greetingCard}) : super(key: key);


  @override
  Widget build(BuildContext context) {
    return
      Container(
        height: 150.0,
        width: 80.0,
        child: Card(
          child: ListTile(
            onTap: () => print(greetingCard.ocassion.toString()),
            title: Center(child: Text(greetingCard.ocassion)),
          ),
        ),
      );
  }
}

I'm thinking I should create another list view builder similar to the cards list but i'm curious to understand if there is a better way to do this.

Current output:

enter image description here

Desired output:

enter image description here

Upvotes: 0

Views: 454

Answers (1)

Madhavam Shahi
Madhavam Shahi

Reputation: 1192

This is all you need!

Inside your vertical listView, you can have another listView having scroll direction set to horizontal,

scrollDirection: Axis.horizontal,

You can create a seperate method, so that you don't have to rewrite horizontal listView for every horizontal listView.

Upvotes: 2

Related Questions