mardi 26 octobre 2021

Problem with ListView that located over Google map in Flutter web

I'm trying to implement page with Google map and i put ListView over this map. When i scroll this vertical ListView, map is actually scrolls too. Is there any way to prevent this behaviour and scroll map only when cursor located out of listview boundaries? Thanks[![Scroll conflict behind listview and google map][1]][1]

    /// Layout that describes part with ListView
Positioned.fill(
      child: Align(
        alignment: Alignment.bottomRight,
        child: sessions.maybeWhen(
          orElse: () => const SizedBox.shrink(),
          data: (items) {
            return ConstrainedBox(
              constraints: BoxConstraints(
                maxHeight: items.length <= 3
                    ? items.length * 130
                    : mediaQuery.size.width < 720 ? 150 : mediaQuery.size.height * 0.7,
              ),
              child: ScrollablePositionedList.separated(
                itemScrollController: controller,
                scrollDirection: mediaQuery.size.width < 720
                    ? Axis.horizontal
                    : Axis.vertical,
                padding: EdgeInsets.all(mediaQuery.size.width < 720 ? 5 : 20.0),
                itemCount: items.length,
                separatorBuilder: (_, __) => mediaQuery.size.width < 720
                    ? const SizedBox(width: 6.0)
                    : const SizedBox(height: 6.0),
                itemBuilder: (_, i) {
                  return AdaptiveLayout(
                    smallLayout: Align(
                      alignment: Alignment.bottomCenter,
                      child: SizedBox(
                        width: mediaQuery.size.width - 32,
                        height: 100.0,
                        child: SessionCard(
                          session: items[i],
                          selected: selected == items[i],
                          onPressed: () {
                            if (selected == items[i]) {
                              onSelected?.call(null, null);
                            } else {
                              onSelected?.call(items[i], i);
                            }
                          },
                        ),
                      ),
                    ),
                    largeLayout: FractionallySizedBox(
                      widthFactor: 0.4,
                      alignment: Alignment.bottomRight,
                      child: SessionCard(
                        session: items[i],
                        selected: selected == items[i],
                        onPressed: () {
                          if (selected == items[i]) {
                            onSelected?.call(null, null);
                          } else {
                            onSelected?.call(items[i], i);
                          }
                        },
                      ),
                    ),
                  );
                },
              ),
            );
          },
        ),
      ),
    );

///Part with Stack that contains map and ListView
AdaptiveLayout(
      smallLayout: Scaffold(
        body: Stack(
          children: [
            MapWidget(
              onMapCreated: onMapCreated,
              onMarkerSelected: onSessionSelected,
            ),
            // const SearchBar(),
            MapToolbar(
              controller: mapController.value,
              handlePermission: () async {
                final provider = ref.read(positionProvider.notifier);
                if (await (provider.handlePermission(context))) {
                  provider.getCurrentLocation();
                }
              },
            ),
            ValueListenableBuilder<dynamic>(
              valueListenable: selectedSession, /// Contains ListView
              builder: (_, value, __) {
                return SessionCards(
                  onSelected: onSessionSelected,
                  selected: value,
                  controller: scrollController.value,
                );
              },
            ),
            ValueListenableBuilder<bool>(
              valueListenable: showLoading,
              builder: (_, value, __) {
                return LoadingOverlay(
                  showing: value,
                );
              },
            ),
          ],
        ),
      ),



Aucun commentaire:

Enregistrer un commentaire