Focus the text field as soon as it becomes visible when the page opens

Question

Is it possible to make the input field immediately active when entering the page, automatically focusing on the TextField and immediately opening the keyboard? I added the autofocus: true method to the TextField but it doesn't help, you still need to click on the input field when the page opens.

widget

Widget build(BuildContext context) {
    return Row(
      children: [
        IconButton(
          padding: EdgeInsets.zero,
          constraints: const BoxConstraints(),
          onPressed: () {
            _onBackPressed(context);
          },
          icon: SvgPicture.asset(
            constants.Assets.arrowLeft,
          ),
        ),
        const SizedBox(
          width: 14,
        ),
        Expanded(
          child: Container(
            alignment: Alignment.center,
            padding: const EdgeInsets.only(right: 14),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(24),
              color: constants.Colors.greyDark,
            ),
            child: TextField(
              autofocus: true,
              onChanged: onChanged,
              style: constants.Styles.textFieldTextStyleWhite,
              cursorColor: Colors.white,
              decoration: InputDecoration(
                contentPadding: const EdgeInsets.only(
                  top: 10,
                ),
                border: InputBorder.none,
                prefixIcon: Container(
                  width: 10,
                  height: 10,
                  alignment: Alignment.center,
                  child: SvgPicture.asset(
                    constants.Assets.search,
                  ),
                ),
              ),
            ),
          ),
        ),
      ],
    );
  }

Answer 1

to make your textfield autofocus when the page is open you need to initial FocusNode and call requestFocus() here example:

class _SomePageState extends State<SomePage> {
  late FocusNode _focusNode;
  late TextEditingController _controller;
  
 @override
  void initState() {
    super.initState();
    _focusNode = FocusNode();
    _controller = TextEditingController();
    _focusNode.requestFocus();
  }

  @override
  void dispose() {
    _controller.dispose();
    _focusNode.dispose();
    super.dispose();
  }
  
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: TextField(
            controller:_controller,
            focusNode:_focusNode
          ),
        ),
      ),
    );
  }
}

hope this answer your question

Answer 2

this code can focus, they are almost same to yours.Probably (I am not sure but) your widget trees prevent to focus somewhere.. ---> https://docs.flutter.dev/cookbook/forms/focus check this

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Material App',
      home: Material(
        child: TestPage(),
      ),
    );
  }
}

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

  @override
  State<TestPage> createState() => TestPageState();
}

class TestPageState extends State<TestPage> {
  late final FocusNode focusNode;
  @override
  void initState() {
    focusNode = FocusNode();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: TextField(
          autofocus: true,
          onChanged: (String ada) {},
          cursorColor: Colors.white,
          decoration: InputDecoration(
            contentPadding: const EdgeInsets.only(
              top: 10,
            ),
            border: InputBorder.none,
            prefixIcon: Container(
              width: 10,
              height: 10,
              alignment: Alignment.center,
            ),
          ),
        ),
      ),
    );
  }
}