ScrollController 附加到多个滚动视图。 flutter

Question

I try to rebuild instagram stories by using GetX. I always receive this issue. Can anyone help me solve this problem?

ScrollController attached to multiple scroll views. 'package:flutter/src/widgets/scroll_controller.dart': Failed assertion: line 109 pos 12: '_positions.length == 1'

I try to rebuild instagram stories by using GetX. I always receive this issue. Can anyone help me solve this problem?

ScrollController attached to multiple scroll views. 'package:flutter/src/widgets/scroll_controller.dart': Failed assertion: line 109 pos 12: '_positions.length == 1'

import 'package:flamingo/Business_Logic/GetXControllers/Pages_Controllers/Stories_Controller.dart';
import 'package:flamingo/Data/DataProviders/StoriesList.dart';
import 'package:flamingo/Data/Models/All_Models.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

class Stories extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetBuilder<StoriesController>(
      init: StoriesController(),
      builder: (storiesCtrl) {
        return Scaffold(
          backgroundColor: Colors.black,
          body: GestureDetector(
            onTapDown: (details) => storiesCtrl.onTapDown(
                details, story[storiesCtrl.currentIndex.value]),
            child: Stack(
              children: <Widget>[
                PageView.builder(
                  controller: storiesCtrl.pageC,
                  physics: NeverScrollableScrollPhysics(),
                  itemBuilder: (context, i) {
                    final StoryModel s = story[i];
                    switch (s.media) {
                      case MediaType.image:
                        return Image.network(
                          s.image,
                          fit: BoxFit.cover,
                        );
                    }
                    return const SizedBox.shrink();
                  },
                ),
                Positioned(
                  top: 15.0,
                  left: 10.0,
                  right: 10.0,
                  child: Row(
                    children: story
                        .asMap()
                        .map((i, e) {
                          return MapEntry(
                              i,
                              Flexible(
                                child: Padding(
                                  padding: const EdgeInsets.symmetric(
                                      horizontal: 1.5),
                                  child: LayoutBuilder(
                                      builder: (context, constraints) {
                                    return Stack(
                                      children: <Widget>[
                                        _buildContainer(
                                          double.infinity,
                                          i < storiesCtrl.currentIndex.value
                                              ? Colors.white
                                              : Colors.white.withOpacity(0.5),
                                        ),
                                        i == storiesCtrl.currentIndex.value
                                            ? AnimatedBuilder(
                                                animation: storiesCtrl.animC,
                                                builder: (context, child) {
                                                  return _buildContainer(
                                                    constraints.maxWidth *
                                                        storiesCtrl.animC.value,
                                                    Colors.white,
                                                  );
                                                },
                                              )
                                            : const SizedBox.shrink(),
                                      ],
                                    );
                                  }),
                                ),
                              ));
                        })
                        .values
                        .toList(),
                  ),
                ),
              ],
            ),
          ),
        );
      },
    );
  }

  Container _buildContainer(double width, Color color) {
    return Container(
      height: 5.0,
      width: width,
      decoration: BoxDecoration(
        color: color,
        border: Border.all(
          color: Colors.black26,
          width: 0.8,
        ),
        borderRadius: BorderRadius.circular(3.0),
      ),
    );
  }
}


import 'package:flamingo/Data/Models/StoryModel.dart';
import 'package:flamingo/Utils/AllUtils.dart';
import 'package:flutter/animation.dart';
import 'package:flutter/material.dart';
import 'package:flamingo/Data/DataProviders/StoriesList.dart';
import 'package:get/get.dart';

class StoriesController extends GetxController
    with SingleGetTickerProviderMixin {
  List<StoryModel> stories;
  AnimationController animC;
  var pageC;
  var currentIndex = 0.obs;

  @override
  void onInit() {
    stories = story;
    super.onInit();
    pageC = PageController();
    animC = AnimationController(vsync: this);
    final StoryModel firstStory = stories.first;
    loadStory(story: firstStory, animateToPage: false);

    animC.addStatusListener((status) {
      if (status == AnimationStatus.completed) {
        animC.stop();
        animC.reset();

        if (currentIndex.value + 1 < stories.length) {
          currentIndex.value += 1;
          loadStory(story: stories[currentIndex.value]);
          update();
        } else {
          currentIndex.value = 0;
          loadStory(story: stories[currentIndex.value]);
          update();
        }
      }
    });
  }

  void onTapDown(TapDownDetails details, StoryModel s) {
    final double dx = details.globalPosition.dx;
    if (dx < GlobalSize.screenWidth / 3) {
      if (currentIndex.value - 1 >= 0) {
        currentIndex.value -= 1;
        loadStory(story: story[currentIndex.value]);
        update();
      }
    } else if (dx > 2 * GlobalSize.screenWidth / 3) {
      if (currentIndex.value + 1 < story.length) {
        currentIndex.value += 1;
        loadStory(story: story[currentIndex.value]);
      } else {
        currentIndex.value = 0;
        loadStory(story: story[currentIndex.value]);
      }
    }
  }

  void loadStory({StoryModel story, bool animateToPage = true}) {
    animC.stop();
    animC.reset();

    switch (story.media) {
      case MediaType.image:
        animC.duration = story.duration;
        animC.forward();
        break;
    }
    if (animateToPage) {
      pageC.animateToPage(
        currentIndex.value,
        duration: const Duration(microseconds: 1),
        curve: Curves.easeInOut,
      );
    }
  }

  @override
  void onClose() {
    pageC.value.dispose();
    animC.dispose();
    super.onClose();
  }
}

Answer 1

Okay so I had this same issue but for me it was not actually related to the code where I used my controller. Typically this issue shows up if you access the same controller from multiple pages. However, it also occurs if you have multiple instances of the same page on the router stack. In my case I was using Get.to() elsewhere in my application to navigate back to my home page which created another instance of my home page on the stack, hence the multiple controllers error.

So to solve it, I changed Get.to() to Get.offAll() . If you are using named routes, switch Get.toNamed() to Get.offAllNamed() .

If you get errors after doing this that say your controllers are no longer found, in your bindings, set permanent: true when using Get.put() to instantiate your controller: Get.put(Home(), permanent: true);

Looking at your code, it does not look like the error is coming from using the same controller twice and may instead occur when you route back to this page from somewhere in your application. Took me forever to figure out but essentially Flutter makes another instance of the "shared" controller when you add the same page onto the stack so you have to remove the original page from the stack when navigating.

If anyone gets this error from navigating and is not using GetX for state management, use Navigation.pushNamedAndRemoveUntil() to navigate back to the page with the controller.