Contents
완성된 화면 이미지클릭하면 전체 코드를 확인할 수 있습니다.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: LoginPage(),
);
}
}
class LoginPage extends StatelessWidget {
const LoginPage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: true,
body: Column(
children: [
Flexible(
child: ListView(
shrinkWrap: true,
children: [
Container(
height: 400,
color: Colors.redAccent,
),
TextFormField(),
TextFormField(),
TextFormField(),
],
),
),
ElevatedButton(onPressed: () {}, child: Text("로그인"))
],
),
);
}
}1. resizeToAvoidBottomInset: true
- 설명: 이 속성은 Flutter에서
Scaffold위젯의 속성으로, 키보드가 나타날 때 화면이 자동으로 리사이즈되도록 제어합니다.
- 용도: 키보드가 올라왔을 때 화면의 내용이 키보드에 가려지지 않도록 하여 사용자 경험을 향상시킵니다.
true로 설정하면 키보드가 나타날 때 화면이 자동으로 리사이즈되어 키보드 위에 표시됩니다.
2. Flexible
- 설명:
Flexible위젯은Row,Column또는Flex위젯 내부에서 자식 위젯이 남은 공간을 차지하도록 합니다.flex속성을 통해 공간을 어떻게 분배할지 설정할 수 있습니다.
- 용도: 유연하게 레이아웃을 구성하고, 화면 크기나 방향에 따라 위젯의 크기를 조절할 때 사용됩니다.
자식요소의 사이즈가 정해져 있어야 정상적으로 동작합니다.
3. shrinkWrap: true
- 설명:
shrinkWrap속성은ListView나GridView와 같은 스크롤 가능한 위젯에서 사용됩니다.true로 설정하면 스크롤 가능한 콘텐츠의 크기만큼 위젯의 크기를 축소합니다.
- 용도: 부모 위젯의 크기에 따라 자식 위젯의 크기를 조절하고, 화면에서 사용하지 않는 공간을 줄일 때 유용합니다.
4. TextFormField
- 설명:
TextFormField는 Flutter에서 텍스트 입력 필드를 제공하는 위젯으로, 폼(Form)과 함께 사용됩니다.TextFormField는 검증(validation)과 저장(submit) 기능을 지원합니다.
- 용도: 사용자로부터 텍스트 입력을 받을 때 사용되며, 폼 검증과 같은 기능을 제공하여 데이터의 유효성을 검사할 수 있습니다.
완성된 화면 이미지
기능 구현 없이 그림만 그린 예제입니다.
Share article