flutter AppBar에 검색 입력창 보여주기

안녕하세요.
이번 포스팅에서는 Flutter AppBar에 검색 입력창을 보여주는 방법에 대해서 알아보겠습니다.

이전에 작성한 iOS와 안드로이드 appBar의 title 정렬하는 거의 확장된 개념이라고 보시면 될거 같습니다.

방법은 간단하게 appBar의 title에 전체 너비의 Container와 TextFiled, Button을 추가해주면 됩니다.

...
    return Scaffold(
      appBar: AppBar(
        title: Container(
          child: TextField(),
        ),
        actions: [
          TextButton(
            onPressed: () {},
            child: Text('검색'),
          ),
        ],
      ),
      body: Text(
        '바디',
      ),
    );
...

위의 코드를 작성을 하고 실행을 해보면 아래와 같이 보입니다.

분명 TextFiled와 Button을 추가했는데 보이지가 않습니다.
자세히 보면 헤더의 색과 동일하게 들어간 것을 볼수 있습니다. 헤더 부분에 터치를 하고 입력을 하면 아래와 같이 입력이 되는 것을 볼수 있습니다.

이제 검색 입력과 버튼이 잘 보이도록 수정을 해보겠습니다.

...
      appBar: AppBar(
        backgroundColor: Colors.white,
        title: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          mainAxisSize: MainAxisSize.max,
          children: [
            Icon(
              Icons.search,
              color: Colors.black12,
            ),
            SizedBox(
              width: 8,
            ),
            Flexible(
              flex: 1,
              child: TextField(
                decoration: InputDecoration(
                  contentPadding: EdgeInsets.symmetric(
                    vertical: 8,
                    horizontal: 16,
                  ),
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.all(
                      Radius.circular(8),
                    ),
                  ),
                  hintText: '검색 키워드를 입력해주세요',
                ),
              ),
            ),
            SizedBox(
              width: 8,
            ),
            TextButton(
              onPressed: () {},
              child: Text('검색'),
            ),
          ],
        ),
      ),
...

위와 같이 코드를 작성을 하고 확인을 하면 아래와 같이 보이게 됩니다.

여기까지 부족한 글 읽어주셔서 감사합니다.
제가 잘못 작성한 내용이나 부족한 부분이 있다면 알려주시면 보완 수정하겠습니다.

감사합니다💛