Stack으로 겹치는 화면 만들기

Q) 플러터에서 page 전환이 아니라 댓글창처럼 화면 위에 걸치는 UI를 구현하려면 뭘 써야돼?

Flutter에서 화면 위에 걸치는 UI를 구현하는 방법은 여러 가지가 있습니다. 일반적으로는 `Overlay` 위젯을 사용하여 구현합니다. 

다음은 `Overlay` 위젯을 사용하여 댓글창과 같은 화면 위에 걸치는 UI를 구현하는 예제입니다.

import 'package:flutter/material.dart';

class OverlayWidget extends StatefulWidget {
  @override
  _OverlayWidgetState createState() => _OverlayWidgetState();
}

class _OverlayWidgetState extends State<OverlayWidget> {
  bool _showOverlay = false;

  void _toggleOverlay() {
    setState(() {
      _showOverlay = !_showOverlay;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Overlay Widget'),
      ),
      body: Stack(
        children: <Widget>[
          Center(
            child: Text('This is the main content'),
          ),
          if (_showOverlay)
            Positioned(
              top: 0,
              left: 0,
              right: 0,
              child: Container(
                height: 200,
                color: Colors.white,
                child: Center(
                  child: Text('This is the overlay content'),
                ),
              ),
            ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _toggleOverlay,
        tooltip: 'Toggle Overlay',
        child: Icon(Icons.add),
      ),
    );
  }
}

위 예제에서는 `Stack` 위젯을 사용하여 두 개의 위젯을 겹쳐 놓았습니다. `Center` 위젯은 메인 콘텐츠를 표시하고, `Positioned` 위젯은 화면 위에 걸치는 댓글창과 같은 오버레이 콘텐츠를 표시합니다. `Overlay` 위젯을 사용하면 더욱 다양한 오버레이 UI를 구현할 수 있습니다.