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
