Focus on the input in TextField widget

Question

I faced with the problem that there is no scrolling or focusing on the last letter entered in TextField when the keyboard is open. I use multiline TextField widget. Also I added parameter resizeToAvoidBottomInset: false so that there is no errors with opening the keyboard.

class StartPage extends StatelessWidget {
  const StartPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      appBar: AppBar(title: const Text('TextField Test')),
      body: Column(
        children: [
          const SizedBox(height: 100), // it should be here
          Container(
            height: 450,
            width: MediaQuery.of(context).size.width,
            padding: const EdgeInsetsDirectional.all(30),
            decoration: BoxDecoration(color: Colors.black12, borderRadius: BorderRadius.circular(20)),
            child: const TextField(
              maxLines: null,
              expands: true,
              style: TextStyle(fontSize: 30),
              decoration: InputDecoration(
                hintText: 'Enter some text here',
                hintStyle: TextStyle(fontSize: 30),
                border: InputBorder.none,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

How can I make it possible to scroll or focus the text? So far, this can be done if you fill in the entire visible TextField. But you can't see it under the keyboard. Shifting or moving the TextField is also undesirable. I wiil be glad any help.

Answer 1

Try below code hope its help to you. no need to use resizeToAvoidBottomInset property in Scaffold

Scaffold(
  appBar: AppBar(title: const Text('TextField Test')),
  body: SingleChildScrollView(
    child: Column(
      children: [
        const SizedBox(height: 100), // it should be here
        Container(
          height: 450,
          width: MediaQuery.of(context).size.width,
          padding: const EdgeInsetsDirectional.all(30),
          decoration: BoxDecoration(color: Colors.black12, borderRadius: BorderRadius.circular(20)),
          child: const TextField(
            maxLines: null,
            expands: true,
            style: TextStyle(fontSize: 30),
            decoration: InputDecoration(
              hintText: 'Enter some text here',
              hintStyle: TextStyle(fontSize: 30),
              border: InputBorder.none,
            ),
          ),
        ),
      ],
    ),
  ),
)

Result->