PersistedOffset: is in an unexpected state

Question

I am trying to nevigate form the one page to another and for that I am using arrow_back icons to go back to the past page and I use Navigator.pop(context) but is is giving the error PersistedOffset: is in an unexpected state. Flutter Channel : Dev and Device: Web Chrome. Thank you!

class IndividualDetails extends StatefulWidget {
  const IndividualDetails({super.key, required this.chatModel});
  final ChatModel chatModel;
  @override
  State<IndividualDetails> createState() => _IndividualDetailsState();
}
class _IndividualDetailsState extends State<IndividualDetails> {
  @override
Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leadingWidth: 70,
        leading: InkWell(
          onTap: () {
             Navigator.of(context).pop();
          },
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: const [
              Icon(
                Icons.arrow_back,
                size: 24,
              ),
              CircleAvatar(
                radius: 20,
                backgroundColor: Colors.blueGrey,
              child: SvgPicture.asset(
                widget.chatModel.isGroup ? 'assets/groups.svg' : 'assets/person.svg',
                color: Colors.white,
                height: 32,
                width: 32,
              ),
              ),
            ],
          ),
        ),
      ),
    );
  }
 }

This is the card and when I click to this card it will nevate to IndividualDetails() page. and I want to return to this card when I click the back button.

class CustomCard extends StatelessWidget {
  const CustomCard({super.key, required this.chatModel});
  final ChatModel chatModel;

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () => Navigator.of(context).push(MaterialPageRoute(
          builder: (context) => IndividualDetails(
                chatModel: chatModel,
              ))),
      child: Column(
        children: [
          ListTile(
            leading: CircleAvatar(
              radius: 30,
              backgroundColor: Colors.blueGrey,
              child: SvgPicture.asset(
                chatModel.isGroup ? 'assets/groups.svg' : 'assets/person.svg',
                color: Colors.white,
                height: 32,
                width: 32,
              ),
            ),
            trailing: Text(chatModel.time),
            title: Text(
              chatModel.name,
              style: const TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
            ),
            subtitle: Row(
              children: [
                const Icon(
                  Icons.done_all,
                  color: Colors.blue,
                  size: 20,
                ),
                const SizedBox(
                  width: 2.0,
                ),
                Text(chatModel.currentMessage),
              ],
            ),
          ),
          const Padding(
            padding: EdgeInsets.only(left: 80.0, right: 20.0),
            child: Divider(
              thickness: 1.5,
            ),
          ),
        ],
      ),
    );
  }
}

Answer 1

I was getting this error while using the flutter_svg package on the web. Specifically, the error was being thrown when trying to pop back to a route in my navigator that displayed an SVG in the AppBar. Pretty obscure.

My solution was to just use the Image widget instead. I've had a handful of issues using flutter_svg on web so avoid it if you can.

Answer 2

I am getting the same problem when using Navigator.pop(context). This only happen with the Device: Web Chrome.

This behavior don't happen in Android or iPhone devices.

My temporal solution for this: Navigator.pushNamed(context, parent.routeName) this will force the navigator to the designated view. Or Navigator.pushNamedAndRemoveUntil(context, parent.routeName, (r) => false) same as before, but will clean the navigation stack. Depending of the situation choice one or another.

Good Luck.

---

Ok now a better solution:

I tested this in Android, iPhone and Chrome Web, and works properly every time.

1.- A custom class to manage Stacks using the native flutter List collection:

class Stacks<T> {
  final _stacks = <T>[];

  void push(T value) =>  _stacks.add(value);

  T? pop() => (isEmpty) ? null : _stacks.removeLast();

  T? get last => (isEmpty) ? null : _stacks.last;

  void clear() => _stacks.clear();

  int get length => _stacks.length;

  bool get isEmpty => _stacks.isEmpty;

  bool get isNotEmpty => _stacks.isNotEmpty;

  @override
  String toString() => _stacks.toString();
}

2. The ViewManager class will handle now the Navigator in a simple way and properly in every platform:

class ViewManager {
  final Stacks<String> _viewStack = Stacks<String>();
  bool _isInitialized = false;

  ViewManager() {
    init();
  }

  void init() {
    if (!_isInitialized) {
      _viewStack.push("/"); **//Here your initialRoute from main.dart**
      _isInitialized = true;
    }
  }

  void push(BuildContext context, String value) {
    _viewStack.push(value);
    Navigator.pushNamedAndRemoveUntil(context, value, (r) => false);
  }

  void pop(BuildContext context) {
    _viewStack.pop();
    String? value = _viewStack.last;
    Navigator.pushNamedAndRemoveUntil(context, value as String, (r) => false);
  }

  void popAndStay(BuildContext context) {
    _viewStack.pop();
  }

  void clearAndPush(BuildContext context, String value) {
    _viewStack.clear();
    _viewStack.push(value);
    Navigator.pushNamedAndRemoveUntil(context, value, (r) => false);
  }
}

3. Add this variable as a static variable or provider:

ViewManager viewManager = ViewManager();

4. Now just use this to navigate between all the views with no problems:

**//Run this in main.dart**
viewManager.init();

**//Move to this View**
viewManager.push(context, View.routeName);

**//Clear Stack and Move to this View**
viewManager.clearAndPush(context, View.routeName);

**//Return to parent View**
viewManager.pop(context);

Good Luck again.