简体   繁体   中英

How to have an multiple horizontal listView in vertical listView for each group of days in flutter?

I successed to save and read data on firestore. Currently I display an horizontal listview of all my FireStore collection.

But first it display all date and second it display only one line

I search to detach this one line, in multiple groups order by days

here is my current display

Horizontal Listview => day1:data - day1:data - day2:data - day2:data ...

here is what I search

    Horizontal Listview number1 => day1:data day1:data
    Horizontal Listview number2 => day2:data day2:data
    ...

     StreamBuilder<List<Todo2>>(
                stream: FirebaseFirestore.instance
                    .collection('$current_id')
                    .orderBy(TodoField.createdTime, descending: true)
                    .snapshots()
                    .transform(Utils.transformer(Todo2.fromJson)),
                builder: (context, snapshot) {
                  switch (snapshot.connectionState) {
                    case ConnectionState.waiting:
                      return Center(child: CircularProgressIndicator());
                    default:
                      if (snapshot.hasError) {
                        return buildText('Something Went Wrong Try later');
                      } else {
                        final todos2 = snapshot.data;
                        final provider = Provider.of<TodosProvider>(context);
                        provider.setTodos2(todos2);
    
                        return    SizedBox(
                          height: MediaQuery.of(context).size.height / 2,
                          child:
                          TodoListWidget2(),
                        );
                      }
                  }
                },
              ),
      class TodoListWidget2 extends StatelessWidget {
         @override
         Widget build(BuildContext context) {
         final provider = Provider.of<TodosProvider>(context);
         final todos2 = provider.todos2;

        return todos2.isEmpty
           ? Center(
             child: Text(
              'Pas de suite',
           style: TextStyle(fontSize: 20),
         ),
        )
        : ListView.separated(
      padding: EdgeInsets.all(16),

      physics: BouncingScrollPhysics(),
      scrollDirection:  Axis.horizontal,
      separatorBuilder: (context, index) => Container(width: 8,height:8),
      itemCount: todos2.length,
      itemBuilder: (context, index) {
        final todo2 = todos2[index];

        return TodoWidget2(todo2: todo2);
      },
    );
  }
}

Your Horizontal View Inside listView look like在此处输入图片说明

Scaffold(
            body: Container(
              child: Center(
                child:
               ///Vertical Listview
                
                ListView.builder(
                    scrollDirection: Axis.vertical,
                    itemCount: 12,
                    itemBuilder: (cont, index_1) {
                      return Container(
                          height: 100,
                          width: 400,
                          margin: EdgeInsets.all(5),
                          color: Colors.blueGrey,
                          child: Row(
                            children: [
                              Text('Day $index_1 :', style: TextStyle(fontSize: 30)),
                              Container(
                                  width: 200,
                                  height: 20,
                                  color: Colors.black26,
                                  child: 
                                ///Horizontal ListView
                                ListView.builder(
                                      scrollDirection: Axis.horizontal,
                                      itemCount: 5,
                                      itemBuilder: (cont, index) {
                                        return Text('    $index   ');
                                      })),
                            ],
                          ));
                    }),
              ),
            ),
          ),

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM