flutter - 同时滚动两个列表视图

Question

I want to implement the function of two lists scrolling at the same time. I put two non-scrollable lists in the list, but an error occurs.

I got offset from one list, and the other came up with the idea of moving to that offset, but I couldn't find a way.

I'd like you to tell me what to do or suggest a new way. This problem is important to me. Please tell me how.

                  Row(
                    children: [
                      Expanded(
                        child: SizedBox(
                          height: 200,
                          child: ListView(
                            // scrollDirection: Axis.horizontal,
                            children: [
                              Container(
                                height: 36,
                                child: ListView.builder(
                                  physics: NeverScrollableScrollPhysics(),
                                  itemCount:
                                      _selectedTimeStartBtn ? 24 : 49,
                                  scrollDirection: Axis.horizontal,
                                  itemBuilder: (context, index) {
                                    return Container(
                                      alignment: Alignment.center,
                                      padding: const EdgeInsets.symmetric(
                                          horizontal: 17, vertical: 7),
                                      decoration: new BoxDecoration(
                                        color: Color(0xfffff2f1),
                                        border: Border.all(
                                          color: Color(0xffffdddb),
                                        ),
                                        borderRadius:
                                            BorderRadius.circular(5),
                                      ),
                                      child: Text(
                                        (index ~/ 24 == 2)
                                            ? '24:00'
                                            : (index % 24 < 10)
                                                ? '0${index % 24}:00'
                                                : '${index % 24}:00',
                                        textAlign: TextAlign.center,
                                        style: TextStyle(
                                          fontFamily: 'NotoSansKR',
                                          color: Color(0xfff03127),
                                          fontSize: 16,
                                          fontWeight: FontWeight.w400,
                                          fontStyle: FontStyle.normal,
                                        ),
                                      ),
                                    );
                                  },
                                ),
                              ),
                              Container(
                                height: 36,
                                child: ListView.builder(
                                  shrinkWrap: true,
                                  physics: NeverScrollableScrollPhysics(),
                                  itemCount:
                                      _selectedTimeStartBtn ? 24 : 49,
                                  scrollDirection: Axis.horizontal,
                                  itemBuilder: (context, index) {
                                    return Container(
                                      margin: index == 0
                                          ? EdgeInsets.only(left: 50)
                                          : null,
                                      alignment: Alignment.center,
                                      padding: const EdgeInsets.symmetric(
                                          horizontal: 17, vertical: 7),
                                      decoration: new BoxDecoration(
                                        color: Colors.grey,
                                        border: Border.all(
                                          color: Colors.grey,
                                        ),
                                        borderRadius:
                                            BorderRadius.circular(5),
                                      ),
                                      child: Text('DATA'),
                                    );
                                  },
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
                    ],
                  ),

Answer 1

Try this:

1. Wrap your Row in a SingleChildScrollView.
2. Use scrollDirection: Axis.horizontal in the SingleChildScrollView.