Overlay

`Overlay`와 `OverlayEntry` 위젯을 사용하여 페이지 위에 떠있는 UI를 구현할 수 있습니다. 이 위젯들을 사용하면 페이지 이동과 상관없이 떠있는 UI를 구현할 수 있습니다.

`Overlay`는 앱 내에서 페이지 위에 떠있는 여러 개의 위젯들을 관리하는 컨테이너 역할을 합니다. `OverlayEntry`는 `Overlay` 위젯 내부에 추가될 위젯을 의미합니다. `OverlayEntry`는 빌드되는 위젯을 지정하고, `Overlay` 위젯에 추가하면 해당 위젯이 떠있는 UI로 나타나게 됩니다.

아래는 `Overlay`와 `OverlayEntry`를 사용하여 페이지 위에 떠있는 버튼을 구현한 예시입니다.

import 'package:flutter/material.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: OverlayExample(),
    );
  }
}

class OverlayExample extends StatefulWidget {
  @override
  _OverlayExampleState createState() => _OverlayExampleState();
}

class _OverlayExampleState extends State<OverlayExample> {
  OverlayEntry _overlayEntry;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Overlay Example'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Show Overlay'),
          onPressed: () {
            // Create overlay entry
            _overlayEntry = OverlayEntry(
              builder: (context) => Positioned(
                top: 100.0,
                right: 20.0,
                child: ElevatedButton(
                  child: Text('Close'),
                  onPressed: () {
                    // Remove overlay entry
                    _overlayEntry.remove();
                  },
                ),
              ),
            );

            // Add overlay entry to overlay
            Overlay.of(context).insert(_overlayEntry);
          },
        ),
      ),
    );
  }
}

위 코드에서는 버튼을 누르면 페이지 위에 떠있는 닫기 버튼이 나타나게 됩니다. 버튼을 누르면 `OverlayEntry`를 제거하여 닫기 버튼을 사라지게 합니다. `Overlay`와 `OverlayEntry` 위젯은 매우 유용하며, 다양한 방법으로 사용할 수 있습니다.

 

나중에 읽어보기

https://devmemory.tistory.com/70

Flutter - Easy Overlay (feat. toast)