Flutter: Moving TextFormField focus with soft keyboard

In Flutter, the user can shift the focus between multiple TextFormFields inside a Form by using the soft keyboard (not by tapping the TextFormFields). This article shows you 2 ways to do so.

FocusScope.of(context).nextFocus()

This method is simple to implement. Advertisements

Example Preview

This sample app contains a form with some TextFormFields. When a user focuses on a TextFormField, the soft keyboard will show up and provide a Next button that can be used to move the focus to the next field.

Here’s how it works:

The complete code

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Remove the DEBUG banner
      debugShowCheckedModeBanner: false,
      title: 'KindaCode.com',
      theme: ThemeData(
        primarySwatch: Colors.amber,
      ),
      home: const HomePage(),
    );
  }
}

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

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

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('KindaCode.com')),
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.all(25),
          child: Form(
            child: Column(children: [
              TextFormField(
                textInputAction: TextInputAction.next,
                decoration: const InputDecoration(labelText: 'Email'),
                onEditingComplete: () => FocusScope.of(context).nextFocus(),
              ),
              const SizedBox(height: 25),
              TextFormField(
                  textInputAction: TextInputAction.next,
                  decoration: const InputDecoration(labelText: 'Name'),
                  onEditingComplete: () => FocusScope.of(context).nextFocus()),
              const SizedBox(height: 25),
              TextFormField(
                  textInputAction: TextInputAction.next,
                  decoration: const InputDecoration(labelText: 'Address'),
                  onEditingComplete: () => FocusScope.of(context).nextFocus()),
              const SizedBox(height: 25),
              TextFormField(
                  textInputAction: TextInputAction.done,
                  decoration: const InputDecoration(labelText: 'Job'),
                  // This is the last text field so there is no need to move the focus
                  onEditingComplete: () => FocusScope.of(context).unfocus())
            ]),
          ),
        ),
      ),
    );
  }
}

FocusScope.of(context).requestFocus()

This method is more complicated than the first one but it’s more customizable. You can drive the focus to any TextFormField you want to, not just the next one.

Example Preview

The Code

AdvertisementsThe complete code in main.dart with explanations:

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      // Hide the debug banner
      debugShowCheckedModeBanner: false,
      title: 'Kindacode.com',
      home: HomePage(),
    );
  }
}

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

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

class _HomePageState extends State<HomePage> {
  final _formKey = GlobalKey<FormState>();
  late FocusNode _nameFocusNode;
  late FocusNode _addressFocusNode;
  late FocusNode _jobFocusNode;

  // Create the focus nodes
  @override
  void initState() {
    _nameFocusNode = FocusNode();
    _addressFocusNode = FocusNode();
    _jobFocusNode = FocusNode();
    super.initState();
  }

  // Clean the focus nodes
  @override
  void dispose() {
    _nameFocusNode.dispose();
    _addressFocusNode.dispose();
    _jobFocusNode.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          centerTitle: true,
          title: const Text(
            'Kindacode.com',
          ),
        ),
        body: SingleChildScrollView(
          child: Padding(
            padding: const EdgeInsets.all(25),
            child: Form(
              key: _formKey,
              child: Column(children: [
                TextFormField(
                  textInputAction: TextInputAction.next,
                  decoration: const InputDecoration(labelText: 'Email'),
                  onFieldSubmitted: (_) =>
                      FocusScope.of(context).requestFocus(_nameFocusNode),
                ),
                const SizedBox(height: 25),
                TextFormField(
                    textInputAction: TextInputAction.next,
                    decoration: const InputDecoration(labelText: 'Name'),
                    focusNode: _nameFocusNode,
                    onFieldSubmitted: (_) =>
                        FocusScope.of(context).requestFocus(_addressFocusNode)),
                const SizedBox(height: 25),
                TextFormField(
                    textInputAction: TextInputAction.next,
                    decoration: const InputDecoration(labelText: 'Address'),
                    focusNode: _addressFocusNode,
                    onFieldSubmitted: (_) =>
                        FocusScope.of(context).requestFocus(_jobFocusNode)),
                const SizedBox(height: 25),
                TextFormField(
                  textInputAction: TextInputAction.done,
                  focusNode: _jobFocusNode,
                  decoration: const InputDecoration(labelText: 'Job'),
                  // This is the last text field so there is no need to move the focus
                )
              ]),
            ),
          ),
        ));
  }
}

Conclusion

We’ve explored more than one technique to allow the user to shift the TextFormfield focus using the soft keyboard. If you’d like to learn more new and amazing things about Flutter, take a look at the following articles:

• Customize Borders of TextField/TextFormField in Flutter
• Flutter: Creating an Auto-Resize TextField
• Flutter: Make a TextField Read-Only or Disabled
• Flutter TextField: Styling labelText, hintText, and errorText
• Flutter & Hive Database: CRUD Example
• Flutter and Firestore Database: CRUD example

You can also check out our Flutter category page or Dart category page for the latest tutorials and examples.Advertisements