dart - How to shift focus to next custom textfield in Flutter?

Question

As per: How to shift focus to next textfield in flutter?, I used FocusScope.of(context).nextFocus() to shift focus. But this doesn't work when you use a reusable textfield class. It only works when you directly use TextField class inside Column.

import 'package:flutter/material.dart';

void main() {
  return runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final focus = FocusScope.of(context);
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        body: SafeArea(
          child: Column(
            children: <Widget>[
              CustomTextField(
                textInputAction: TextInputAction.next,
                onEditingComplete: () => focus.nextFocus(),
              ),
              const SizedBox(height: 10),
              CustomTextField(
                textInputAction: TextInputAction.done,
                onEditingComplete: () => focus.unfocus(),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class CustomTextField extends StatelessWidget {
  final TextInputAction textInputAction;
  final VoidCallback onEditingComplete;

  const CustomTextField({
    this.textInputAction = TextInputAction.done,
    this.onEditingComplete = _onEditingComplete,
  });

  static _onEditingComplete() {}

  @override
  Widget build(BuildContext context) {
    return TextField(
      textInputAction: textInputAction,
      onEditingComplete: onEditingComplete,
    );
  }
}

In this code, if I click next in keyboard it will not shift focus to next textfield. Please help me with this.

question from:https://stackoverflow.com/questions/65887593/how-to-shift-focus-to-next-custom-textfield-in-flutter

Answer 1

That's because the context doesn't have anything it could grab the focus from. Replace your code with this:

void main() => runApp(MaterialApp(home: MyApp()));

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final focus = FocusScope.of(context);
    return Scaffold(
      appBar: AppBar(),
      body: Column(
        children: <Widget>[
          CustomTextField(
            textInputAction: TextInputAction.next,
            onEditingComplete: () => focus.nextFocus(),
          ),
          SizedBox(height: 10),
          CustomTextField(
            textInputAction: TextInputAction.done,
            onEditingComplete: () => focus.unfocus(),
          ),
        ],
      ),
    );
  }
}