如何使用 Flutter 上的 iOS 键盘上按钮更改 TextField 焦点

Question

textfield focus change image

Hi Everyone I'm trying to change focus on textfiealds by clicking the buttons that appear in the picture.

I tried FocusScope.of(context).nextFocus(); this method. When I run this method, the keyboard closes and the focus on the currently active textfield is lost also the next textfield is not active.

Can anyone help me.

My Flutter version is: 3.0.5

flutter doctor outputs:

[✓] Flutter (Channel stable, 3.0.5, on macOS 12.4 21F79
    darwin-arm, locale en-US)
    • Flutter version 3.0.5 at
      /Users/seniorturkmen/fvm/versions/stable
    • Upstream repository
      https://github.com/flutter/flutter.git
    • Framework revision f1875d570e (5 weeks ago),
      2022-07-13 11:24:16 -0700
    • Engine revision e85ea0e79c
    • Dart version 2.17.6
    • DevTools version 2.12.2

[!] Android toolchain - develop for Android devices
    (Android SDK version 33.0.0)
    • Android SDK at
      /Users/seniorturkmen/Library/Android/sdk
    • Platform android-33, build-tools 33.0.0
    • Java binary at: /Applications/Android
      Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build
      11.0.12+0-b1504.28-7817840)
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept
      the SDK licenses.
      See
      https://flutter.dev/docs/get-started/install/maco
      s#android-setup for more details.

[✓] Xcode - develop for iOS and macOS (Xcode 13.4.1)
    • Xcode at
      /Applications/Xcode.app/Contents/Developer
    • CocoaPods version 1.11.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google
      Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2021.2)
    • Android Studio at /Applications/Android
      Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨
      https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build
      11.0.12+0-b1504.28-7817840)

[✓] VS Code (version 1.70.1)
    • VS Code at /Applications/Visual Studio
      Code.app/Contents
    • Flutter extension version 3.46.0

[✓] Connected device (3 available)
    • iPhone 12 (mobile) •
      AC295A39-16D5-4B2C-8A9F-567492AD9E01 • ios
      • com.apple.CoreSimulator.SimRuntime.iOS-15-5
      (simulator)
    • macOS (desktop)    • macos
      • darwin-arm64   • macOS 12.4 21F79 darwin-arm
    • Chrome (web)       • chrome
      • web-javascript • Google Chrome 104.0.5112.79

[✓] HTTP Host Availability
    • All required HTTP hosts are available

! Doctor found issues in 1 category.

Edit

Keyboard Actions Widget code's below

void showOverlay(
    BuildContext context,
  ) {
    if (overlayEntry != null) return;
    OverlayState? overlayState = Overlay.of(context);
    overlayEntry = OverlayEntry(
      builder: (context) {
        return Positioned(
          bottom: MediaQuery.of(context).viewInsets.bottom,
          right: 0.0,
          left: 0.0,
          child: KeyboardInputWidget(
            previous: FocusScope.of(context).previousFocus,
            next: FocusScope.of(context).nextFocus,
          ),
        );
      },
    );

    overlayState?.insert(overlayEntry!);
  }

Answer 1

you must check the context i think your FocusScope using the `overlay's context

void showOverlay(
    BuildContext context,
  ) {
    if (overlayEntry != null) return;
    OverlayState? overlayState = Overlay.of(context);
    overlayEntry = OverlayEntry(
      builder: (ctx) {
        return Positioned(
          bottom: MediaQuery.of(context).viewInsets.bottom,
          right: 0.0,
          left: 0.0,
          child: KeyboardInputWidget(
            previous: FocusScope.of(context).previousFocus,
            next: FocusScope.of(context).nextFocus,
          ),
        );
      },
    );

    overlayState?.insert(overlayEntry!);
  }

Answer 2

Add TextInputAction parameter in TextField .

 TextFormField(
    textInputAction: TextInputAction.next,