[Flutter] Textfield를 futurebuilder로 감싸면?

오늘 플러터를 공부하던 중 매우 흥미로운 사실을 발견하였다. 

"Textfield 클릭시 키보드가 나타났다가 다시 사라진다!"

이걸 다른 말로 하자면, Textfield를 futurebuilder로 감싸게 된다면, Textfield를 탭하고 focus가 된 즉시 다시 unfocus가 되어 나타났던 키보드가 바로 사라지는 현상이 발견이 된다. 잠시 예제문을 하나 만들어보자.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FutureBuilder with TextField',
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  Future<String> _futureString;

  @override
  void initState() {
    super.initState();
    _futureString = Future.delayed(Duration(seconds: 2), () => 'Hello, World!');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('FutureBuilder with TextField'),
      ),
      body: FutureBuilder<String>(
        future: _futureString,
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            return TextField(
              controller: TextEditingController(text: snapshot.data),
            );
          } else if (snapshot.hasError) {
            return Text(snapshot.error.toString());
          } else {
            return CircularProgressIndicator();
          }
        },
      ),
    );
  }
}

해당 구문은 future가 완료가 되었을때, Textfield가 표시하는 형태이다.

 

하지만, future가 즉시 만들어지면서 FutureBuilder 위젯이 발동하는 조건에서는 FutureBuilder의 parent가 계속해서 rebuilt되면서 '키보드가 나타났다가 사라지는'현상이 계속해서 반복될 수 있다. 화면이 계속해서 만들어지는데 키보드가 그 자리에 가만히 있을 수 는 없지 않은가. 좀 더 쉽게 말하면 "Textfield를 선택했을때, 웹페이지가 혹은 해당 페이지가 계속해서 새로고침하게 되어 나타나는 현상"이다.

 

해결법은? 

FutureBuilder가 아닌 일반 Builder 혹은 다른 것으로 감싸면 된다.

 

그럼 문제는 간단하게 해결된다. 너무 싱겁지만, 각각의 위젯에 대한 성격을 모른다면 발생할 수 있는 문제이기 때문에, 스스로 복습할겸 그리고 모두와 공유할 겸 적어보았다.

 

해당 해결법에 참고가 되었던 stackoverflow는 다음과 같다.

https://stackoverflow.com/questions/67679119/flutter-textfield-not-responding-inside-futurebuilder

Flutter TextField not responding inside FutureBuilder

 

그럼 굿밤!