I want only the TextField to move the focus

Viewed 76

Flutter Web:

I want only the TextField to move the focus.

down key: aaa > bbb > ccc > ddd

up key: ddd > ccc > bbb > aaa

The result for this sample goes from a to c . I want to override the focus of the two icons in front of the textfield.

  1. How to move focus to TextField only?
  2. onKey: focusNode
    • Can you tell which TextField is focused?

I want only the TextField to move the focus.

    class TextBlockSample extends StatefulWidget {
      const TextBlockSample({Key? key}) : super(key: key);
    
      @override
      State<TextBlockSample> createState() => _TextBlockSampleState();
    }
    
    class _TextBlockSampleState extends State<TextBlockSample> {
      late List<TextEditingController> _textControllers;
      late List<FocusNode> _textFocusNodes;
      List<String> users = ['aaa', 'bbb', 'ccc', 'ddd', 'eee'];
      int _currentFieldindex = 0;    
      @override
      void initState() {
        _textControllers =
            List.generate(5, (index) => TextEditingController(text: users[index]));
        _textFocusNodes = List.generate(5, (index) => FocusNode());
        super.initState();
      }    
      @override
      void dispose() {
        _textControllers.map((e) => e.dispose()).toList();
        _textFocusNodes.map((e) => e.dispose()).toList();
        super.dispose();
      }    
      @override
      Widget build(BuildContext context) {
        return Focus(
          onKey: (FocusNode focusNode, RawKeyEvent event) {
            focusNode.unfocus();
            int _focusIndex =
                _textFocusNodes.indexWhere((element) => element.hasFocus);    
            if (event.logicalKey == LogicalKeyboardKey.arrowDown) {
              focusNode.requestFocus(_textFocusNodes[_focusIndex + 1]);   
             return KeyEventResult.handled;
            }
            if (event.logicalKey == LogicalKeyboardKey.arrowUp) {
              focusNode.requestFocus(_textFocusNodes[_focusIndex - 1]);
            }    
            return KeyEventResult.ignored;
          },
          child: FocusScope(
            child: Container(
              child: Column(
                children:
                    users.mapIndexed((index, user) => inputText(index)).toList(),
              ),
            ),
          ),
        );
      }    
      Widget inputText(int index) {
        return Container(
          height: 60,
          width: 500,
          child: Row(
            children: [
              IconButton(
                icon: const Icon(Icons.star),
                onPressed: () {},
              ),
              IconButton(
                icon: const Icon(Icons.label_important_outline),
                onPressed: () {},
              ),
              Container(
                width: 300,
                height: 50,
                child: TextFormField(
                  controller: _textControllers[index],
                  focusNode: _textFocusNodes[index],
                  textInputAction: TextInputAction.next,
                  onChanged: (v) {
                    print('changed:$v');
                  },
                  onTap: () {
                    _currentFieldindex = index;
                  },
                ),
              )
            ],
          ),
        );
      }
    }

0 Answers
Related