Flexible 사용 이유

ListView 위젯 사용법

Dec 29, 2024

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 과 함께 사용되면, 제한된 공간에서도 다른 위젯들과 유연하게 공간을 나눌 수 있습니다.

좌 → 우

화면이 깨지지 않고 유지되는 모습을 볼 수 있습니다.

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("글쓰기"), ), ], ), ); } }