Flutter TextFormField / TextForm Reloads Current Screen On Focus

An annoying behaviour occurred when I was building my first form inside a Flutter application for iOS / Android. On the simulator as soon as I focus any text field, the keyboard would momentarily pop up and then the page would reload. How do you fix this annoying issue?

The problem is simple, because of the software keyboard popping up at the bottom of the screen, the Widget build() function is getting called. I knew this after just doing a few minutes of research, however had trouble finding a solution even though I knew the problem.

Various forums and sources suggested something about moving the _key outside the build() function and also adding in resizeToAvoidBottomPadding = false to the Scaffold() widget. However the source of the problem lies in that the build() function gets called multiple times and the code inside the build() function is unintentionally re-building the screen.

To resolve the issue, simply move the FutureBuilder->future: function so it is standalone, and initialise it inside the initState(). Below code example:

class _YourScreenState extends State<YourScreenState> {
Future<_TaskAddScreenState> _loadingAddForm; // declare here

  @override
  void initState() {
    // ...etc...
    _loadingAddForm = Future.delayed(Duration(milliseconds: 500));  // Only one future created to prevent reloading...
    super.initState();
  }

// etc...

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
        future: _loadingAddForm,  // recognise only reload once
        // ...etc...
    }
}