title: Flutter ScrollController not working under StreamBuilder with ConnectionState condition
body: <p>I'm new with flutter &amp; just learned how to retrieve data from firestore &amp; did some UI. Right now I have 2 problems;</p>
  
  <p><strong>1- This is a Setting Page which has <code>CustomScrollView</code> contains <code>ScrollController</code> for the controller.</strong></p>
  
  <p><a href="https://i.stack.imgur.com/4Z4df.gif" rel="nofollow noreferrer">SettingsPage</a></p>
  
  <p>The controller working fine with this code</p>
  
  <pre><code>class _SettingsPageState extends State&lt;SettingsPage&gt; {
    ScrollController _scrollController;
  
    @override
    void initState() {
      super.initState();
  
      _scrollController = new ScrollController();
      _scrollController.addListener(() =&gt; setState(() {}));
    }
  
    @override
    void dispose() {
      _scrollController.dispose();
      super.dispose();
    }
  
    @override
    Widget build(BuildContext context) {
      return StreamBuilder(
        stream: Shared.firestore.collection('client').document(Shared.firebaseUser.uid).snapshots(),
        builder: (BuildContext context, AsyncSnapshot snapshot) {
          return Scaffold(
            backgroundColor: Colors.grey[50],
            body: Stack(
              children: &lt;Widget&gt;[
                CustomScrollView(
                  controller: _scrollController,
                  slivers: &lt;Widget&gt;[
                    SliverAppBar(
                      expandedHeight: 140.0,
                      pinned: true,
                    ),
                    SliverFillRemaining(
                      child: Row(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: &lt;Widget&gt;[
                          Expanded(
                            flex: 8,
                            child: Column(
                              children: &lt;Widget&gt;[
                                Container(
                                  decoration: BoxDecoration(
                                    color: Colors.white,
                                  ),
                                  child: Padding(
                                    padding: EdgeInsets.only(
                                      left: 18.0,
                                      top: 18.0,
                                    ),
                                    child: Row(
                                      children: &lt;Widget&gt;[
                                        Text(
                                          "Account",
                                          style: TextStyle(
                                            color: Colors.blue[700],
                                            fontSize: 15,
                                            fontWeight: FontWeight.w500,
                                          ),
                                        ),
                                      ],
                                    ),
                                  ),
                                ),
                                Container(
                                  decoration: BoxDecoration(
                                    color: Colors.white,
                                  ),
                                  child: ListTile(
                                    onTap: () {},
                                    contentPadding: EdgeInsets.only(left: 18.0),
                                    title: Text(
                                      "+${snapshot.data['countryCode']} ${snapshot.data['phoneNumber']}",
                                      style: TextStyle(fontSize: 16),
                                    ),
                                    subtitle: Row(
                                      children: &lt;Widget&gt;[
                                        Text(
                                          "Phone Number",
                                          style: TextStyle(
                                            fontSize: 12,
                                          ),
                                        ),
                                      ],
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ],
            ),
          );
        },
      );
    }
  }
  </code></pre>
  
  <p>but this error happened</p>
  
  <pre><code>I/flutter ( 8691): ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
  I/flutter ( 8691): The following NoSuchMethodError was thrown building StreamBuilder&lt;DocumentSnapshot&gt;(dirty, state:
  I/flutter ( 8691): _StreamBuilderBaseState&lt;DocumentSnapshot, AsyncSnapshot&lt;DocumentSnapshot&gt;&gt;#7db43):
  I/flutter ( 8691): The method '[]' was called on null.
  I/flutter ( 8691): Receiver: null
  I/flutter ( 8691): Tried calling: []("countryCode")
  I/flutter ( 8691):
  I/flutter ( 8691): When the exception was thrown, this was the stack:
  I/flutter ( 8691): #0      Object.noSuchMethod (dart:core/runtime/libobject_patch.dart:50:5)
  I/flutter ( 8691): #1      _SettingsPageState.build.&lt;anonymous closure&gt; (package:silkwallet/page/settings.dart:81:54)
  I/flutter ( 8691): #2      StreamBuilder.build (package:flutter/src/widgets/async.dart:423:74)
  I/flutter ( 8691): #3      _StreamBuilderBaseState.build (package:flutter/src/widgets/async.dart:125:48)
  I/flutter ( 8691): #4      StatefulElement.build (package:flutter/src/widgets/framework.dart:3809:27)
  I/flutter ( 8691): #5      ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3721:15)
  I/flutter ( 8691): #6      Element.rebuild (package:flutter/src/widgets/framework.dart:3547:5)
  I/flutter ( 8691): #7      ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:3701:5)
  I/flutter ( 8691): #8      StatefulElement._firstBuild (package:flutter/src/widgets/framework.dart:3848:11)
  I/flutter ( 8691): #9      ComponentElement.mount (package:flutter/src/widgets/framework.dart:3696:5)
  I/flutter ( 8691): #10     Element.inflateWidget (package:flutter/src/widgets/framework.dart:2950:14)
  I/flutter ( 8691): #11     Element.updateChild (package:flutter/src/widgets/framework.dart:2753:12)
  I/flutter ( 8691): #12     ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3732:16)
  I/flutter ( 8691): #13     Element.rebuild (package:flutter/src/widgets/framework.dart:3547:5)
  I/flutter ( 8691): #14     ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:3701:5)
  I/flutter ( 8691): #15     StatefulElement._firstBuild (package:flutter/src/widgets/framework.dart:3848:11)
  I/flutter ( 8691): #16     ComponentElement.mount (package:flutter/src/widgets/framework.dart:3696:5)
  I/flutter ( 8691): #17     Element.inflateWidget (package:flutter/src/widgets/framework.dart:2950:14)
  I/flutter ( 8691): #18     Element.updateChild (package:flutter/src/widgets/framework.dart:2753:12)
  I/flutter ( 8691): #19     SingleChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:4860:14)
  I/flutter ( 8691): #20     Element.inflateWidget (package:flutter/src/widgets/framework.dart:2950:14)
  I/flutter ( 8691): #21     Element.updateChild (package:flutter/src/widgets/framework.dart:2753:12)
  I/flutter ( 8691): #22     ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3732:16)
  I/flutter ( 8691): #23     Element.rebuild (package:flutter/src/widgets/framework.dart:3547:5)
  I/flutter ( 8691): #24     ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:3701:5)
  I/flutter ( 8691): #25     ComponentElement.mount (package:flutter/src/widgets/framework.dart:3696:5)
  I/flutter ( 8691): #26     Element.inflateWidget (package:flutter/src/widgets/framework.dart:2950:14)
  I/flutter ( 8691): #27     Element.updateChild (package:flutter/src/widgets/framework.dart:2753:12)
  .
  .
  .
  I/flutter ( 8691): #135    _WidgetsFlutterBinding&amp;BindingBase&amp;GestureBinding&amp;ServicesBinding&amp;SchedulerBinding&amp;PaintingBinding&amp;SemanticsBinding&amp;RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:219:5)
  I/flutter ( 8691): #136    _WidgetsFlutterBinding&amp;BindingBase&amp;GestureBinding&amp;ServicesBinding&amp;SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:990:15)
  I/flutter ( 8691): #137    _WidgetsFlutterBinding&amp;BindingBase&amp;GestureBinding&amp;ServicesBinding&amp;SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:930:9)
  I/flutter ( 8691): #138    _WidgetsFlutterBinding&amp;BindingBase&amp;GestureBinding&amp;ServicesBinding&amp;SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.dart:842:5)
  I/flutter ( 8691): #139    _invoke (dart:ui/hooks.dart:154:13)
  I/flutter ( 8691): #140    _drawFrame (dart:ui/hooks.dart:143:3)
  </code></pre>
  
  <p><strong>2- After some research for this error, I add <code>connectionState</code> condition inside <code>StreamBuilder</code> which solved above problem</strong></p>
  
  <p>this is the new code, i put the <code>Scaffold</code> inside active <code>connectionState</code></p>
  
  <pre><code>class _SettingsPageState extends State&lt;SettingsPage&gt; {
    ScrollController _scrollController;
  
    @override
    void initState() {
      super.initState();
  
      _scrollController = new ScrollController();
      _scrollController.addListener(() =&gt; setState(() {}));
    }
  
    @override
    void dispose() {
      _scrollController.dispose();
      super.dispose();
    }
  
    @override
    Widget build(BuildContext context) {
      return StreamBuilder(
        stream: Shared.firestore.collection('client').document(Shared.firebaseUser.uid).snapshots(),
        builder: (BuildContext context, AsyncSnapshot snapshot) {
          if (snapshot.connectionState == ConnectionState.active) {
            return Scaffold(
              backgroundColor: Colors.grey[50],
              body: Stack(
                .
                .
                .
              ),
            );
          } else if (snapshot.connectionState == ConnectionState.waiting) {
            return Container(child: Center(child: CircularProgressIndicator()));
          } else {
            return Container(
              child: Column(
                children: &lt;Widget&gt;[
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Icon(Icons.warning),
                  ),
                  Text('Error in loadind data')
                ],
              ),
            );
          }
        },
      );
    }
  }
  </code></pre>
  
  <p>and I realized that when I scrolled the connectionState will change to waiting and the ScrollController not working under this state as shown in the image below</p>
  
  <p><a href="https://i.stack.imgur.com/ZVixc.gif" rel="nofollow noreferrer">ScrollController: page keep flashing when try to scroll</a></p>
  
  <p>The reason I want to use the <code>ScrollController</code> because I want to add <code>FloatingActionButton</code> inside <code>Positioned</code> which will scroll along &amp; disappear when reach certain position, here's the image <a href="https://i.stack.imgur.com/7I79l.gif" rel="nofollow noreferrer">with FloatingActionButton</a></p>