title: FocusScope messed up by Navigator
body: <p>I'm writing a simple reminder app that is essentially a <code>ListView</code> of <code>TextField</code>s that, when blurred or submitted, update the database. I use a bunch of <code>GestureDetector</code>s and <code>FocusNode</code>s to blur the <code>TextField</code> when a user taps on the checkbox or outside the <code>TextField</code>.</p>
  
  <p>It works very well when this is the only route. However, when I push the same exact page on top of the existing one, the focus behavior becomes completely buggy and the app unusable.</p>
  
  <p>Here's a video to demonstrate: <a href="https://www.youtube.com/watch?v=13E9LY8yD3A" rel="nofollow noreferrer">https://www.youtube.com/watch?v=13E9LY8yD3A</a></p>
  
  <p>My code is essentially this:</p>
  
  <pre><code>/// main.dart
  
  class MyApp extends StatelessWidget {
    static FocusScopeNode rootScope; // just for debug
  
    @override
    Widget build(BuildContext context) {
      rootScope = FocusScope.of(context);
      return MaterialApp(home: ReminderPage());
    }
  }
  </code></pre>
  
  <p>-</p>
  
  <pre><code>/// reminder_page.dart
  
  class ReminderPage extends StatelessWidget {
    final _blurNode = FocusNode();
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text('Remind'),
          actions: &lt;Widget&gt;[
            IconButton(
              icon: Icon(Icons.add),
              onPressed: () {
                // Push new identical page.
                Navigator.of(context).push(MaterialPageRoute(
                  builder: (context) =&gt; ReminderPage(),
                ));
              },
            ),
          ],
        ),
        body: StreamBuilder&lt;QuerySnapshot&gt;(
          stream: Firestore.instance.collection('reminders').snapshots(),
          builder: (context, snapshot) {
            return _buildBody(context, snapshot.data);
          },
        ),
      );
    }
  
    Widget _buildBody(BuildContext context, QuerySnapshot data) {
      List&lt;Reminder&gt; reminders =
          data.documents.map((s) =&gt; Reminder.fromSnapshot(s)).toList();
      return GestureDetector(
        onTap: () {
          _blur(context);
        },
        child: ListView(
          children: reminders.map((r) =&gt; ReminderCard(r)).toList(),
        ),
      );
    }
  
    void _blur(context) {
      FocusScope.of(context).requestFocus(_blurNode);
    }
  }
  </code></pre>
  
  <p>-</p>
  
  <pre><code>/// reminder_card.dart
  
  class ReminderCard extends StatelessWidget {
    final Reminder reminder;
    final TextEditingController _controller;
    final _focusNode = FocusNode();
    final _blurNode = FocusNode();
  
    ReminderCard(this.reminder)
        : _controller = TextEditingController(text: reminder.text) {
      _focusNode.addListener(() {
        if (!_focusNode.hasFocus) {
          reminder.updateText(_controller.text); // update database
        }
      });
    }
  
    @override
    Widget build(BuildContext context) {
      return GestureDetector(
        onTap: () {
          _blur(context);
        },
        child: Row(
          children: &lt;Widget&gt;[
            _buildCheckBox(context),
            _buildTextField(context),
          ],
        ),
      );
    }
  
    Widget _buildCheckBox(context) {
      return Checkbox(
        value: reminder.done,
        onChanged: (done) {
          print(MyApp.rootScope.toStringDeep()); // print Focus tree
          _blur(context);
          reminder.updateDone(done); // update database
        },
      );
    }
  
    Widget _buildTextField(context) {
      return TextField(
        onSubmitted: reminder.updateText, // update database
        focusNode: _focusNode,
      );
    }
  
    void _blur(context) {
      FocusScope.of(context).requestFocus(_blurNode);
    }
  }
  </code></pre>
  
  <p>I found <a href="https://stackoverflow.com/questions/52022207/flutter-trouble-preserving-focus-between-routes">this question</a> which sounds very similar, but I didn't understand how the custom transition solves anything and has anything to do with focus. And like the OP, I tried a lot of different things to mess with <code>FocusScope</code>, include call <code>detach()</code>, <code>reparentIfNeeded()</code>, or passing the <code>FocusScope</code> of the root all the way down so a new <code>FocusScope</code> is not created each time, but none of those gave anything close to working. And I also tried the custom transition, to no avail.</p>
  
  <p>The debug output shows this on the first route (when I check boxes):</p>
  
  <pre><code>I/flutter (28362): FocusScopeNode#68466
  I/flutter (28362):  └─child 1: FocusScopeNode#5b855
  I/flutter (28362):    └─child 1: FocusScopeNode#76ef6
  I/flutter (28362): FocusScopeNode#68466
  I/flutter (28362):  └─child 1: FocusScopeNode#5b855
  I/flutter (28362):    └─child 1: FocusScopeNode#76ef6
  I/flutter (28362):        focus: FocusNode#f07c7(FOCUSED)
  I/flutter (28362): FocusScopeNode#68466
  I/flutter (28362):  └─child 1: FocusScopeNode#5b855
  I/flutter (28362):    └─child 1: FocusScopeNode#76ef6
  I/flutter (28362):        focus: FocusNode#f138f(FOCUSED)
  I/flutter (28362): FocusScopeNode#68466
  I/flutter (28362):  └─child 1: FocusScopeNode#5b855
  I/flutter (28362):    └─child 1: FocusScopeNode#76ef6
  I/flutter (28362):        focus: FocusNode#e68b3(FOCUSED)
  </code></pre>
  
  <p>And this on the second route:</p>
  
  <pre><code>I/flutter (28362): FocusScopeNode#68466
  I/flutter (28362):  └─child 1: FocusScopeNode#5b855
  I/flutter (28362):    ├─child 1: FocusScopeNode#a1008
  I/flutter (28362):    └─child 2: FocusScopeNode#76ef6
  I/flutter (28362):        focus: FocusNode#a76e6
  I/flutter (28362): FocusScopeNode#68466
  I/flutter (28362):  └─child 1: FocusScopeNode#5b855
  I/flutter (28362):    ├─child 1: FocusScopeNode#a1008
  I/flutter (28362):    │   focus: FocusNode#02ebf(FOCUSED)
  I/flutter (28362):    │
  I/flutter (28362):    └─child 2: FocusScopeNode#76ef6
  I/flutter (28362):        focus: FocusNode#a76e6
  I/flutter (28362): FocusScopeNode#68466
  I/flutter (28362):  └─child 1: FocusScopeNode#5b855
  I/flutter (28362):    ├─child 1: FocusScopeNode#a1008
  I/flutter (28362):    │   focus: FocusNode#917da(FOCUSED)
  I/flutter (28362):    │
  I/flutter (28362):    └─child 2: FocusScopeNode#76ef6
  I/flutter (28362):        focus: FocusNode#a76e6
  </code></pre>
  
  <p>So it looks like the FocusScope of the first route becomes child 2 when we push the second route, which sounds correct to me.</p>
  
  <p>What am I doing wrong?</p>