[Flutter] 입력 폼이 포함된 화면 자연스럽게 구성하기

✍ 입력 폼이 포함된 화면

입력 폼(TextField, TextFormField 등)이 포함된 화면은 키보드가 올라와 화면을 가리면서 overflowed 가 날 수 있다. 

 

 

이럴 경우 SingleChildScrollView 를 최상단에 위젯 상단에 배치하면 키보드가 올라와도 스크롤이 가능하기 때문에 overflowed 문제가 생기지 않는다.

 

😶 예시)

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(home: ScrollControlView()));

class ScrollControlView extends StatelessWidget {
  const ScrollControlView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Image.asset(
                "asset/img/middle_image.png",
                height: MediaQuery.of(context).size.height / 2,
              ),
              const SizedBox(height: 16.0),
              TextField(),
              TextField(),
              const SizedBox(height: 16.0),
              Text("스크롤 테스트 화면"),
            ],
          ),
        ),
      ),
    );
  }
}