Contents
해결법코드
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: LoginPage(),
    );
  }
}
class LoginPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PostWriteBody(),
    );
  }
}
class PostWriteBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16),
      child: Column(
        children: [
          ListView(
            shrinkWrap: true,
            children: [
              Container(
                color: Colors.deepPurple[100],
                height: 400,
                width: double.infinity,
                child: Icon(CupertinoIcons.airplane),
              ),
              SizedBox(height: 10),
              TextFormField(),
              TextFormField(),
            ],
          ),
          TextButton(
            onPressed: () {},
            child: Text("글쓰기"),
          ),
        ],
      ),
    );
  }
}
구현된 화면

위 두 이미지가 있습니다.  정상적으로 구동되는 것처럼 보이지만 
키보드가 올라오게 되면 

위와 같이 화면이 깨지는 문제가 발생하게 됩니다.
원인
listView는 스크롤을 올리거나 내려도 문제가 되지 않지만
이 화면의 코드에서는 listview가 Column으로 감싸져 있고,
shrinkWrap이 true로 설정되어 있기 때문입니다.
※
이렇게 되었을 때 키보드가 올라오면 공간을 재배치하여 
Column 내부 위젯으로 인해 깨지지 않도록 보호해야 합니다.
해결법

ListView 위젯을 Flexible 위젯으로 감싸는 형태로 만들어줍니다.
flexible
해당 위젯은 ListView를 가변적으로 공간을 할당할 수 있게 되어, 화면이 작아지더라도 
Column의 크기로 인해 깨지는 일이 방지될 수 있습니다.
⇒ Column 과 함께 사용되면, 제한된 공간에서도 다른 위젯들과 유연하게 공간을 나눌 수 있습니다.
좌 → 우
화면이 깨지지 않고 유지되는 모습을 볼 수 있습니다.
Share article


