How to Focus Out of a TextField in a Form with a Color Picker

Question

I am implementing a Form where the user is able to write the title and the description of a course. In addition, the user should be able to choose a color for this particular course.

My goal is to unfocus from the currently edited Textfield when I am tapping somewhere else or clicking on the keyboard's back button.

I have found a similar post How can I dismiss the on screen keyboard? where they use FocusScope.of(context).unfocus(); within a GestureDetector Widget.

Unfortunately, this is not working in my case.

P.S. I am on Flutter 1.17.2

   child: GestureDetector(
            behavior: HitTestBehavior.translucent,
            onTap: () {
              FocusScope.of(context).unfocus();
            },
            child: Form(
              key: _formKey,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  _CourseTitelField(isEditing: isEditing),
                  _CourseDescriptionField(isEditing: isEditing),
                  _CourseColorSelection(
                      mainColor: _mainColor, tempMainColor: _tempMainColor),
                ],
              ),
            ),
          ),

Answer 1

You have many options, I will mention 2 I like

1. SystemChannels from import 'package:flutter/services.dart';

SystemChannels.textInput.invokeMethod('TextInput.hide');

2. FocusScope

FocusScope.of(context).requestFocus(FocusNode());

Answer 2

On your function that calls the color picker, use the code below before calling the color picker. This will unfocus the keyboard. So you will have something like this:

void chooseColor(){
 FocusManager.instance.primaryFocus!.unfocus(); //unfocus keyboard

 //add code to call color picker
 ...
}