Switching from tab1 to tab3 in flutter gives an error - Minimum flutter App

Question

I currently have a TabBarView.The TabBarView has 3 tabs. The second tab has a page that also has two tabs in it. Now the problem is if I switch directly from tab0 to tab2. I get the following error:

flutter: ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
flutter: The following assertion was thrown while finalizing the widget tree:
flutter: 'package:flutter/src/widgets/scroll_position.dart': Failed assertion: line 627 pos 12: 'pixels !=
flutter: null': is not true.
flutter:
flutter: Either the assertion indicates an error in the framework itself, or we should provide substantially
flutter: more information in this error message to help you determine and fix the underlying cause.
flutter: In either case, please report this assertion by filing a bug on GitHub:
flutter:   https://github.com/flutter/flutter/issues/new
flutter:
flutter: When the exception was thrown, this was the stack:
flutter: #2      ScrollPosition.dispose (package:flutter/src/widgets/scroll_position.dart)
flutter: #3      ScrollPositionWithSingleContext.dispose (package:flutter/src/widgets/scroll_position_with_single_context.dart:260:11)
flutter: #4      ScrollableState.dispose (package:flutter/src/widgets/scrollable.dart:324:14)
flutter: #5      StatefulElement.unmount (package:flutter/src/widgets/framework.dart:3821:12)
flutter: #6      _InactiveElements._unmount (package:flutter/src/widgets/framework.dart:1697:13)
flutter: #7      _InactiveElements._unmount.<anonymous closure> (package:flutter/src/widgets/framework.dart:1695:7)
flutter: #8      ComponentElement.visitChildren (package:flutter/src/widgets/framework.dart:3676:14)
flutter: #9      _InactiveElements._unmount (package:flutter/src/widgets/framework.dart:1693:13)

This is the app itself

Page : main.dart
import 'package:flutter/material.dart';
import "TabsPage.dart";

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {

  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>  with SingleTickerProviderStateMixin {

  TabController _tabController;
  var tabBarView;
  var bottomNavigationBar;

  void initializeTabs()
  {
    _tabController = new TabController(vsync: this, length: 3);
  }

  Widget getBottomNavigationBar() {
    bottomNavigationBar = new Material(
            child: new TabBar(controller: _tabController, tabs: <Tab>[
              new Tab(text: "PageA" ),
              new Tab(text: "PageB"),
              new Tab(text: "PageC"),
            ]));
    return bottomNavigationBar;
  }

  @override
  void initState() {
    super.initState();
    initializeTabs();
  }

  @override
  Widget build(BuildContext context) {


    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Tabs demo"),
        automaticallyImplyLeading: false,
        ),
      bottomNavigationBar: getBottomNavigationBar(), //Add the bottom Navigation Bar
      body:  new TabBarView(controller: _tabController, children: <Widget>[
        new Text("PageA"),
        new MyTest(),
        new Text("PageC"),
      ]), //The container that will display the pages
      );
  }
}

and this is the second page

import 'package:flutter/material.dart';

class MyTest extends StatefulWidget {
    MyTest();

    @override
    MyTestState createState() => new MyTestState();
}

    class MyTestState extends State<MyTest> with SingleTickerProviderStateMixin ,RouteAware {
        bool isAlive;
        TabController _tabController;
        var tabBarView;

        MyTestState();

        @override
        void initState() {
            super.initState();
            _tabController = new TabController(vsync: this, length: 2,initialIndex: 1);

        }

        @override
        void dispose() {
            _tabController.dispose();
            super.dispose();
        }

        @override
        Widget build(BuildContext context) {
            var scaffold = Scaffold(
                appBar: new AppBar(
                    automaticallyImplyLeading: false,
                    bottom: new PreferredSize(
                        preferredSize: new Size(200.0, 15.0),
                        child: new Container(
                            width: 200.0,
                            child: new TabBar(
                                controller: _tabController,
                                tabs: [
                                    new Container(
                                        child: new Tab(text: 'TabA'),
                                        ),
                                    new Container(
                                        child: new Tab(text: 'TabB'),
                                        ),
                                ],
                                ),
                            ),
                        ),

                    ),
                body: new TabBarView(controller: _tabController, children: <Widget>[

                    new Text("Hello World in TabA"),
                    new Text("Hello World in TabB"),
                ]), //The container that will display the pages
                );

            return scaffold;
        }
}

This problem does not occur if I replace TabBarView from the body of the second page

Answer 1

I reported this bug a long time ago

https://github.com/flutter/flutter/issues/11267

https://github.com/flutter/flutter/issues/11350

I realize that you cannot have nested Scaffolds. If you nest Scaffolds, the behavior becomes undefined and not supported by the flutter team.

Refactor your application so the Scaffold doesn't nest anymore

Answer 2

This happens because the User interface does not complete its rendering before it is switched to the new tab.Embedding tabs within tabs is a bad design idea