Felipe César
Felipe César

Reputation: 1444

The getter 'length' was called on null when building a TabBar

I'm getting the following error when first loading the TabBar from my Flutter application:

flutter: ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
flutter: The following NoSuchMethodError was thrown building TabBar(dependencies: [_InheritedTheme,
flutter: _LocalizationsScope-[GlobalKey#c29e1], _TabControllerScope], state: _TabBarState#dd10a):
flutter: The getter 'length' was called on null.
flutter: Receiver: null
flutter: Tried calling: length
flutter:
flutter: When the exception was thrown, this was the stack:
flutter: #0      Object.noSuchMethod (dart:core/runtime/libobject_patch.dart:50:5)
flutter: #1      _IndicatorPainter._tabOffsetsEqual 
package:flutter/…/material/tabs.dart:414
flutter: #2      _IndicatorPainter.shouldRepaint 
package:flutter/…/material/tabs.dart:427
flutter: #3      RenderCustomPaint._didUpdatePainter 
package:flutter/…/rendering/custom_paint.dart:433
flutter: #4      RenderCustomPaint.painter= 
package:flutter/…/rendering/custom_paint.dart:398
flutter: #5      CustomPaint.updateRenderObject 
package:flutter/…/widgets/basic.dart:481
flutter: #6      RenderObjectElement.update 
package:flutter/…/widgets/framework.dart:4510
flutter: #7      SingleChildRenderObjectElement.update 
package:flutter/…/widgets/framework.dart:4881
(...)

It appears to the user and only last few seconds and then everything comes back to the normal and the tab controller works properly. I tried to create my own TabController and I still gets the same error

My code:

class HomeScreen extends StatelessWidget {
  HomeScreen();

  @override
  Widget build(BuildContext context) {

    return SafeArea(
      child: DefaultTabController(
        length: 5,
        initialIndex: 0,
        child: Scaffold(
          backgroundColor: Color(0xFF25272b),
          appBar: TabBar(
            tabs: [
              Tab(icon: Icon(Icons.home)),
              Tab(icon: Icon(Icons.settings)),
              Tab(icon: Icon(Icons.media)),
              Tab(icon: Icon(Icons.account_box)),
              Tab(icon: Icon(Icons.notifications)),
            ],
          ),
          body: TabBarView(
            physics: NeverScrollableScrollPhysics(),
            children: [
              Content1(),
              Content2(),
              Content3(),
              Content4(),
              Content5(),
            ],
          ),
        ),
      ),
    );
  }
}

I tried to comment the content of the TabBar and TabBarView. So I don't think it's a bug that comes from some custom widget I created.

Any ideas on how to solve this?

EDIT: I'm using Redux. I don't know if this may be affecting the problem. Here my main.dart:

class MainAppState extends State<MainApp> {
  Persistor<AppState> persistor;
  Store<AppState> store;

  void initState() {
    super.initState();

    persistor = Persistor<AppState>(
      storage: FlutterStorage(),
      serializer: JsonSerializer<AppState>(AppState.fromJson),
    );

    store = Store<AppState>(
      appReducer,
      initialState: AppState(),
      middleware  : createStoreMiddleware(
        widget.navigatorKey,
      )
      ..add(persistor.createMiddleware()),
    );

    persistor.load()
      .whenComplete(() => store.dispatch(InitAuth()) );
  }

  @override
  Widget build(BuildContext context) {

    return StoreProvider(
      store: store,
      child: MaterialApp(
        locale: Locale('en'),
        debugShowCheckedModeBanner: false,
        title: 'app',  
        theme: AppTheme.theme,
        navigatorKey: widget.navigatorKey,
        initialRoute: store.state.user == null
          ? LoginScreen.route
          : HomeScreen.route,
        routes: <String, WidgetBuilder> {
          HomeScreen.route  : (context) {
            return StoreBuilder<AppState>(
              builder: (context, store) {
                return HomeScreen();
              },
            );
          },

Upvotes: 0

Views: 2689

Answers (2)

Felipe C&#233;sar
Felipe C&#233;sar

Reputation: 1444

Well... I discovered the problem. It's related to how Flutter reuse widgets with no custom keys.

I made a poor route change between the HomeScreen and LoginScreen:

I had this function to update the Page:

navigatorKey.currentState.pushNamedAndRemoveUntil(action.name, ModalRoute.withName('/'));

I changed to:

navigatorKey.currentState.pushNamedAndRemoveUntil(action.name, (_) => false);

So, probably the app was saving some trash data from HomeScreen until it regenerates a new widget with the ideal state.

Upvotes: 2

Cedar
Cedar

Reputation: 499

Have you checked the Contents, your code works perfectly without the Content Part in TabBarView

    body: TabBarView(
        physics: NeverScrollableScrollPhysics(),
        children: [
          Content1(), <--------------
          Content2(), <--------------
          Content3(), <--------------
          Content4(), <--------------
          Content5(), <--------------
        ],
      ),
    ),

replaced with

       body: TabBarView(
        physics: NeverScrollableScrollPhysics(),
        children: [
         Text("1"),
         Text("2"),
         Text("3"),
         Text("4"),
         Text("5"),
        ],
      ),
    ),

works with no errors.

Upvotes: 0

Related Questions