[Flutter 심화] 1. 키보드가 올라올 때 버튼이 가려지는 문제

상황

resizeToAvoidBottomInset

• Scaffold의 속성

• true일 때
• 키보드가 올라오면 body 영역이 키보드 높이 만큼 줄어듦

• false일 때
• 키보드가 올라와도 body 영역 유지
• 키보드에 가려질 수 있음

Flexible

• 자식 위젯이 가능한 만큼만 커지게 허용

• cf) Expanded
• 자식 위젯을 무조건 남은 공간만큼 꽉 채우도록 확장
• 자식 위젯이 스스로 크기를 정할 수 없음

• 현재 내 크기만큼 잡음

ScrollController

• 스크롤 동작 제어 및 관찰해주는 클래스

• 스크롤 위치 제어
• jumpTo() : 지정한 위치로 즉시 스크롤 이동
• animateTo() : 부드럽게 지정 위치로 스크롤 애니메이션

• 스크롤 위치 확인
• position.pixels : 현재 스크롤 위치(픽셀 단위)
• position.maxScrollExtent : 스크롤 가능한 최대 범위(=스크롤 가능한 가장 아래쪽 위치의 값)

• 스크롤 이벤트 감지
• addListener() : 스크롤이 변경될 때마다 콜백 실행

• 스크롤 끝 감지 (무한 스크롤 구현 시 사용)
• 현재 위치와 position.maxScrollExtent 비교해서 끝에 도달했는지 판단

핵심 포인트

1. resizeToAvoidBottomInset: true

• 키보드가 올라올 때 Scaffold가 바디를 위로 밀어 올려서 가림/오버플로우를 방지.

2. 스크롤 가능한 영역 + 컨트롤러(ScrollController)

• 입력 포커스가 하단일 때도 스크롤로 뷰를 따라가게 함.

3. 레이아웃 분리: “스크롤 영역” vs “고정 버튼”

• 입력 폼은 Flexible/Expanded + ListView(또는 SingleChildScrollView)

• 제출 버튼은 스크롤 밖에 두고 SafeArea로 하단 안전영역 보장.

4. 포커스 이동 시 스크롤 보정

• Scrollable.ensureVisible(context, alignment: …) 또는 controller.animateTo(...)로 포커스 필드를 가리지 않게 이동.

5. 키보드 높이만큼 패딩 보정(선택)

• 스크롤 영역 또는 바텀 버튼에 AnimatedPadding(padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom)) 적용하면 부드럽게 피함.

import 'package:flutter/material.dart';

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

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

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

class _HomePageState extends State<HomePage> {
  final username = TextEditingController();
  final password = TextEditingController();
  final scroll = ScrollController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: true,
      body: Column(
        children: [
          Flexible(
            child: ListView(
              controller: scroll,
              shrinkWrap: true,
              children: [
                Container(
                  color: Colors.yellow,
                  height: 500,
                ),
                TextFormField(
                  onTap: () async {
                    await Future.delayed(Duration(milliseconds: 600));
                    scroll.jumpTo(scroll.position.maxScrollExtent);
                  },
                  controller: username,
                ),
                TextFormField(
                  onTap: () async {},
                  controller: password,
                ),
              ],
            ),
          ),
          SizedBox(
            width: double.infinity,
            child: ElevatedButton(onPressed: () {}, child: Text("로그인")),
          ),
        ],
      ),
    );
  }
}