Flutter, ListView.builder onTap strange behavior

Question

On press key 1, ListView adds 1 tile, on press key 2 ListView removes one tile, though after clicking with mouse outside of ListView or Text() widget, keyboard keys stop responding without any error being shown in terminal.

I thought, that maybe FocusNode was disposed after clicking outside of ListView, though, after testing, this seems not to be the case

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

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

  String testOnTap = '';
  int nOfList = 1;

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

class _OnTapWidgetIssueState extends State<OnTapWidgetIssue> {
  final FocusNode _focusNode = FocusNode();
  @override
  void dispose() {
    _focusNode.dispose();
    print('_focusNode.dispose()');
    super.dispose();
  }

  void _handleKeyEvent(RawKeyEvent event) {
    if (event is RawKeyDownEvent &&
        event.data.logicalKey == LogicalKeyboardKey.digit1) {
      widget.nOfList += 1;
      setState(() {});
    }

    if (event is RawKeyDownEvent &&
        event.data.logicalKey == LogicalKeyboardKey.digit2) {
      if (widget.nOfList > 1) {
        widget.nOfList--;
        setState(() {});
      } else {}
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: MenuDrawer(),
      appBar: AppBar(title: Text('OnTap-widget.Issue')),
      body: RawKeyboardListener(
        autofocus: true,
        focusNode: _focusNode, // <-- more magic
        onKey: _handleKeyEvent,
        child: Column(children: [
          Text(widget.testOnTap, style: TextStyle(fontSize: 52.0)),
          Text('''
          press 1 to add ListTile
          press 2 to remove ListTile
          '''),
          Expanded(
            child: Row(
              children: [
                Expanded(
                  flex: 2,
                  child: SizedBox(),
                ),
                Expanded(
                  flex: 1,
                  // child: SizedBox(),
                  // // ),
                  child: ListView.builder(
                    itemCount: widget.nOfList,
                    // itemCount: widget.testOnTap.length,
                    itemBuilder: (_, i) {
                      return ListTile(
                        title: Text('$i'),
                        onTap: () {
                          widget.testOnTap = widget.testOnTap + i.toString();
                          setState(() {});
                        },
                        // Handle your onTap here.
                      );
                    },
                  ),
                ),
                Expanded(
                  flex: 2,
                  child: SizedBox(),
                ),
              ],
            ),
          ),
        ]),
      ),
    );
  }
}

Also Im getting error when clicking to go to new page in the app

Error: A FocusNode was used after being disposed.
Once you have called dispose() on a FocusNode, it can no longer be used.
    at Object.throw_ [as throw] (http://localhost:49535/dart_sdk.js:5061:11)
    at http://localhost:49535/packages/flutter/src/foundation/change_notifier.dart.lib.js:66:21
    at focus_manager.FocusNode.new.[_debugAssertNotDisposed] (http://localhost:49535/packages/flutter/src/foundation/change_notifier.dart.lib.js:69:25)
    at focus_manager.FocusNode.new.notifyListeners (http://localhost:49535/packages/flutter/src/foundation/change_notifier.dart.lib.js:131:41)
    at focus_manager.FocusNode.new.[_notify] (http://localhost:49535/packages/flutter/src/widgets/widget_inspector.dart.lib.js:42893:12)
    at focus_manager.FocusManager.new.[_applyFocusChange] (http://localhost:49535/packages/flutter/src/widgets/widget_inspector.dart.lib.js:43665:26)
    at Object._microtaskLoop (http://localhost:49535/dart_sdk.js:38778:13)
    at _startMicrotaskLoop (http://localhost:49535/dart_sdk.js:38784:13)
    at http://localhost:49535/dart_sdk.js:34519:9

How ever, I don't get this error when selecting exercise page in drawer menu, only when going to this new page from home page. Exercise and Home pages are kinda similar, but still different in some aspects.

Thank

Answer 1

Technically, you are not adding the onTap to the ListView.builder, you're adding it to every single ListTile added by the builder. :)

Declare your two state variables:

String testOnTap = '';
int nOfList = 1;

inside the _OnTapWidgetIssueState class, not the OnTapWidgetIssue class. The convention is to name them _testOnTap and _nOfList respectively since they are private to the class.

And update the two variables INSIDE the setState call, not outside it.