[flutter] 스택드 위젯을 사용하여 채팅 앱 화면 구성하기

15 Dec 2023

flutter

Flutter는 다양한 위젯을 사용하여 사용자 인터페이스를 구성하는 데 매우 유연한 방법을 제공합니다. 여기서는 스택드(Stacked) 위젯을 사용하여 간단한 채팅 앱 화면을 구성하는 방법에 대해 알아보겠습니다.

1. 스택드(Stacked) 위젯 소개

스택드(Stacked) 위젯은 다른 위젯들을 겹쳐서 배치할 수 있는 유용한 위젯입니다. 이를 통해 화면을 레이어(layer)처럼 쌓을 수 있으며, 여러 위젯을 겹쳐서 사용자 정의 도면을 만들 수 있습니다.

2. 채팅 앱 화면 구성하기

아래는 간단한 채팅 앱 화면을 구성하기 위한 스택드 위젯의 활용 예시입니다.

import 'package:flutter/material.dart';

class ChatScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('채팅 앱'),
      ),
      body: Stack(
        children: <Widget>[
          // 하단 채팅 입력창
          Positioned(
            bottom: 0,
            left: 0,
            right: 0,
            child: Container(
              padding: EdgeInsets.all(8.0),
              color: Colors.white,
              child: Row(
                children: <Widget>[
                  Expanded(
                    child: TextFormField(
                      decoration: InputDecoration(
                        hintText: '메시지 입력...',
                      ),
                    ),
                  ),
                  IconButton(
                    icon: Icon(Icons.send),
                    onPressed: () {
                      // 메시지 전송 로직
                    },
                  ),
                ],
              ),
            ),
          ),
          // 상단 채팅 내용 리스트
          ListView.builder(
            padding: EdgeInsets.only(bottom: 60), // 하단 채팅 입력창 공간 확보
            itemCount: 20,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text('채팅 내용 $index'),
              );
            },
          ),
        ],
      ),
    );
  }
}

위 예시 코드는 Stack 위젯을 사용하여 화면을 채팅 입력창과 채팅 내용 리스트로 구분하였습니다. 입력창은 화면 하단에 고정되어 있고, 채팅 내용 리스트는 입력창 위에 쌓이도록 설정되어 있습니다.

이제 스택드(Stacked) 위젯을 사용하여 채팅 앱 화면을 구성하는 기본적인 방법을 배워보았습니다. 보다 복잡한 채팅 앱 화면을 구성하기 위해서는 다양한 다른 위젯과 기능들을 추가할 수 있습니다.

참고 자료: