Flutter: Null check operator used on a null value Only when running in release mode, not debug

Question

When I run this demo code (TabBarView) in debug mode, everything works fine. But when I run the demo into release mode "Flutter run --release", i get Null check operator used on a null value. The app doesn't work until i start tapping on all tab bars and return to the first one. I tried 'flutter pub cache repair', but it didn't work. (I use the latest flutter)

import 'package:flutter/material.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Tab Bar',
      home: MyTabBar(),
    );
  }
}

class MyTabBar extends StatefulWidget {
  const MyTabBar({Key? key}) : super(key: key);

  @override
  State<MyTabBar> createState() => _MyTabBarState();
}

class _MyTabBarState extends State<MyTabBar> with TickerProviderStateMixin {
  late TabController _controller;

  @override
  void initState() {
    _controller = TabController(length: 3, vsync: this);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Tab Bar'),
        bottom: TabBar(
          controller: _controller,
          tabs: const [
            Tab(text: 'Me', icon: Icon(Icons.menu_book_outlined)),
            Tab(text: 'What', icon: Icon(Icons.hourglass_bottom_rounded)),
            Tab(text: 'To', icon: Icon(Icons.room)),
          ],
        ),
      ),
      body: TabBarView(
        controller: _controller,
        children: const [
          Center(
            child: Text('Hello'),
          ),
          Center(
            child: Text('me'),
          ),
          Center(
            child: Text('again'),
          ),
        ],
      ),
    );
  }
}

Here is what i get on the console.

I/flutter ( 7521): Null check operator used on a null value I/flutter ( 7521): #0 _PagePosition.applyViewportDimension (package:flutter/src/widgets/page_view.dart:455) I/flutter ( 7521): #1 RenderViewport.performLayout (package:flutter/src/rendering/viewport.dart:1456) I/flutter ( 7521): #2 RenderObject.layout (package:flutter/src/rendering/object.dart:1915) I/flutter ( 7521): #3 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116) I/flutter ( 7521): #4 RenderObject.layout (package:flutter/src/rendering/object.dart:1915) I/flutter ( 7521): #5 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116) I/flutter ( 7521): #6 RenderObject.layout (package:flutter/src/rendering/object.dart:1915) I/flutter ( 7521): #7 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116) I/flutter ( 7521): #8 RenderObject.layout (package:flutter/src/rendering/object.dart:1915) I/flutter ( 7521): #9 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116) I/flutter ( 7521): #10 RenderObject.layout (package:flutter/src/rendering/object.dart:1915) I/flutter ( 7521): #11 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116) I/flutter ( 7521): #12 RenderObject.layout (package:flutter/src/rendering/object.dart:1915) I/flutter ( 7521): #13 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116) I/flutter ( 7521): #14 RenderObject.layout (package:flutter/src/rendering/object.dart:1915) I/flutter ( 7521): #15 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116) I/flutter ( 7521): #16 RenderObject.layout (package:flutter/src/rendering/object.dart:1915) I/flutter ( 7521): #17 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116) I/flutter ( 7521): #18 RenderCustomPaint.performLayout (package:flutter/src/rendering/custom_paint.dart:545) I/flutter ( 7521): #19 RenderObject.layout (package:flutter/src/rendering/object.dart:1915) I/flutter ( 7521): #20 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116) I/flutter ( 7521): #21 RenderObject.layout (package:flutter/src/rendering/object.dart:1915) I/flutter ( 7521): #22 MultiChildLayoutDelegate.layoutChild (package:flutter/src/rendering/custom_layout.dart:171) I/flutter ( 7521): #23 _ScaffoldLayout.performLayout (package:flutter/src/material/scaffold.dart:1003) I/flutter ( 7521): #24 MultiChildLayoutDelegate._callPerformLayout (package:flutter/src/rendering/custom_layout.dart:240) I/flutter ( 7521): #25 RenderCustomMultiChildLayoutBox.performLayout (package:flutter/src/rendering/custom_layout.dart:403) I/flutter ( 7521): #26 RenderObject.layout (package:flutter/src/rendering/object.dart:1915) I/flutter ( 7521): #27 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116) I/flutter ( 7521): #28 RenderObject.layout (package:flutter/src/rendering/object.dart:1915) I/flutter ( 7521): #29 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116) I/flutter ( 7521): #30 _RenderCustomClip.performLayout (package:flutter/src/rendering/proxy_box.dart:1376) I/flutter ( 7521): #31 RenderObject.layout (package:flutter/src/rendering/object.dart:1915) I/flutter ( 7521): #32 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116) I/flutter ( 7521): #33 RenderObject.layout (package:flutter/src/rendering/object.dart:1915) I/flutter ( 7521): #34 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116) I/flutter ( 7521): #35 RenderObject.layout (package:flutter/src/rendering/object.dart:1915) I/flutter ( 7521): #36 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116) I/flutter ( 7521): #37 RenderObject.layout (package:flutter/src/rendering/object.dart:1915) I/flutter ( 7521): #38 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116) I/flutter ( 7521): #39 RenderObject.layout (package:flutter/src/rendering/object.dart:1915) I/flutter ( 7521): #40 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116) I/flutter ( 7521): #41 RenderObject.layout (package:flutter/src/rendering/object.dart:1915) I/flutter ( 7521): #42 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116) I/flutter ( 7521): #43 RenderObject.layout (package:flutter/src/rendering/object.dart:1915) I/flutter ( 7521): #44 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116) I/flutter ( 7521): #45 RenderObject.layout (package:flutter/src/rendering/object.dart:1915) I/flutter ( 7521): #46 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116) I/flutter ( 7521): #47 RenderObject.layout (package:flutter/src/rendering/object.dart:1915) I/flutter ( 7521): #48 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116) I/flutter ( 7521): #49 RenderObject.layout (package:flutter/src/rendering/object.dart:1915) I/flutter ( 7521): #50 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116) I/flutter ( 7521): #51 RenderObject.layout (package:flutter/src/rendering/object.dart:1915) I/flutter ( 7521): #52 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116) I/flutter ( 7521): #53 RenderObject.layout (package:flutter/src/rendering/object.dart:1915) I/flutter ( 7521): #54 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116) I/flutter ( 7521): #55 RenderObject.layout (package:flutter/src/rendering/object.dart:1915) I/flutter ( 7521): #56 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116) I/flutter ( 7521): #57 RenderObject.layout (package:flutter/src/rendering/object.dart:1915) I/flutter ( 7521): #58 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116) I/flutter ( 7521): #59 RenderObject.layout (package:flutter/src/rendering/object.dart:1915) I/flutter ( 7521): #60 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116) I/flutter ( 7521): #61 RenderObject.layout (package:flutter/src/rendering/object.dart:1915) I/flutter ( 7521): #62 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116) I/flutter ( 7521): #63 RenderObject.layout (package:flutter/src/rendering/object.dart:1915) I/flutter ( 7521): #64 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116) I/flutter ( 7521): #65 RenderOffstage.performLayout (package:flutter/src/rendering/proxy_box.dart:3462) I/flutter ( 7521): #66 RenderObject.layout (package:flutter/src/rendering/object.dart:1915) I/flutter ( 7521): #67 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116) I/flutter ( 7521): #68 RenderObject.layout (package:flutter/src/rendering/object.dart:1915) I/flutter ( 7521): #69 _RenderTheatre.performLayout (package:flutter/src/widgets/overlay.dart:749) I/flutter ( 7521): #70 RenderObject.layout (package:flutter/src/rendering/object.dart:1915) I/flutter ( 7521): #71 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116) I/flutter ( 7521): #72 RenderObject.layout (package:flutter/src/rendering/object.dart:1915) I/flutter ( 7521): #73 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116) I/flutter ( 7521): #74 RenderObject.layout (package:flutter/src/rendering/object.dart:1915) I/flutter ( 7521): #75 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116) I/flutter ( 7521): #76 RenderObject.layout (package:flutter/src/rendering/object.dart:1915) I/flutter ( 7521): #77 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116) I/flutter ( 7521): #78 RenderObject.layout (package:flutter/src/rendering/object.dart:1915) I/flutter ( 7521): #79 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116) I/flutter ( 7521): #80 RenderObject.layout (package:flutter/src/rendering/object.dart:1915) I/flutter ( 7521): #81 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116) I/flutter ( 7521): #82 RenderObject.layout (package:flutter/src/rendering/object.dart:1915) I/flutter ( 7521): #83 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:116) I/flutter ( 7521): #84 RenderObject.layout (package:flutter/src/rendering/object.dart:1915) I/flutter ( 7521): #85 RenderView.performLayout (package:flutter/src/rendering/view.dart:165) I/flutter ( 7521): #86 RenderObject._layoutWithoutResize (package:flutter/src/rendering/object.dart:1757) I/flutter ( 7521): #87 PipelineOwner.flushLayout (package:flutter/src/rendering/object.dart:887) I/flutter ( 7521): #88 RendererBinding.drawFrame (package:flutter/src/rendering/binding.dart:504) I/flutter ( 7521): #89 WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:892) I/flutter ( 7521): #90 RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:370) I/flutter ( 7521): #91 SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1146) I/flutter ( 7521): #92 SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:1083) I/flutter ( 7521): #93 SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.dart:997) I/flutter ( 7521): #97 _invoke (dart:ui/hooks.dart:151) I/flutter ( 7521): #98 PlatformDispatcher._drawFrame (dart:ui/platform_dispatcher.dart:308) I/flutter ( 7521): #99 _drawFrame (dart:ui/hooks.dart:115) I/flutter ( 7521): (elided 3 frames from dart:async)

Answer 1

At the time I am writing this, the problem is not fixed in the flutter stable version (flutter version 3.0.5) therefore I've made hack'ish fix for this issue by modifying the flutter code on my machine.

The issue is a NullPointer'ish crash inside flutter code mainly in the following line:

page = _cachedPage!;

from $FLUTTER-HOME\packages\flutter\lib\src\widgets\page_view.dart[455]

_cachedPage variable can in fact be NULL and when is forcedly unwrap it will crash causing a white screen.

My fix was to change the above line with:

page = _cachedPage ?? 0.0;

Therefore if _cachedPage is NULL it will use a default 0.0 value and not crash.

So far the fix seems to completely eliminate the issue.

Answer 2

As Per this thread, there is an issue with flutter itself. https://github.com/flutter/flutter/issues/101007, Adding delay before runApp it works fine.

await Future.delayed(const Duration(milliseconds: 500)); //add this line
  runApp(MyApp());

Answer 3

It looks like a Flutter error: https://github.com/flutter/flutter/issues/101007

The Flutter team is now able to reproduce, so a fix might be in sight. There's a temporary workaround suggested to delay the app start a little bit but this is clearly not the solution, just a temporary hack.

Answer 4

You can use this code: In your code you can use sized box to control height. It will show other errors could be because you are not disposing the controller.

class NavigationScreen extends StatefulWidget {
  static String id = 'NavigationScreen';

  const NavigationScreen({Key? key}) : super(key: key);

  @override
  _NavigationScreenState createState() => _NavigationScreenState();
}

class _NavigationScreenState extends State<NavigationScreen> {
  int _selectedIndex = 0;
  final PageStorageBucket bucket = PageStorageBucket();
  List<Widget> _widgetOptions = [
    HomeScreen(
      key: PageStorageKey('Home'),
    ),
    CartScreen(key: PageStorageKey('Cart')),
    Profile(key: PageStorageKey('Profile'))
  ];

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

  void _onItemTap(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  Widget _bottomNavigationBar(int selectedIndex) => BottomNavigationBar(
        showSelectedLabels: false,
        showUnselectedLabels: false,
        backgroundColor: ThemeText.bottomNavBarColor,
        // fixedColor: Color(0xff707070),
        selectedItemColor: ThemeText.primaryColor,
        unselectedItemColor: ThemeText.bottomNavBarIconUnSelectedColor,
        items: [
          BottomNavigationBarItem(
              label: 'Home',
              icon: Icon(
                Icons.home_outlined,
              )),
          BottomNavigationBarItem(
              label: 'Cart', icon: Icon(Icons.shopping_cart_outlined)),
          BottomNavigationBarItem(
              label: 'Profile', icon: Icon(Icons.person_outlined)),
        ],
        currentIndex: _selectedIndex,
        onTap: _onItemTap,
      );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        // appBar: AppBar(
        //   title: Text('Home'),
        // ),
        // backgroundColor: Color(0xff707070),
        body: PageStorage(
          child: _widgetOptions[_selectedIndex],
          bucket: bucket,
        ),
        bottomNavigationBar: _bottomNavigationBar(_selectedIndex));
  }

}