実践 Overlay

Overlayを使ってみる

実践 Overlay

Overlayを使ってみる

誰?

Kurogoma4D

Cross-platform Mobile App Engineer on CBcloud株式会社
- We are hiring!!
Twitter: @Krgm4D
https://scrapbox.io/kurogoma4d-lab/

あんまり役に立たない開発が好きです

Overlay

package:in_app_notification

Fleet風エディタ

Overlayって何なんだ

要するに

WidgetsApp で普段操作するUIの手前側にWidgetを表示する仕組み

使い方

class _ContentsState extends State<Contents> {
  OverlayEntry? entry;
  final random = math.Random();

  void tapped() {
    final percentage = random.nextInt(100);
    entry?.remove();
    entry = OverlayEntry(
      builder: (context) => Positioned(
        top: 32,
        left: MediaQuery.of(context).size.width * percentage / 100,
        child: Material(child: Text('$percentage')),
      ),
    );
    Navigator.of(context).overlay?.insert(entry!);
  }

  @override
  Widget build(BuildContext context) {
    // ボタンをタップして `tapped()` を呼び出すコード
  }
}
class _ContentsState extends State<Contents> {
  OverlayEntry? entry;
  final random = math.Random();

  void tapped() {
    final percentage = random.nextInt(100);
    entry?.remove();
    entry = OverlayEntry(
      builder: (context) => Positioned(
        top: 32,
        left: MediaQuery.of(context).size.width * percentage / 100,
        child: Material(child: Text('$percentage')),
      ),
    );
    Navigator.of(context).overlay?.insert(entry!);
  }

  @override
  Widget build(BuildContext context) {
    // ボタンをタップして `tapped()` を呼び出すコード
  }
}

外から状態を変更する

class _ContentsState extends State<Contents> {
  OverlayEntry? entry;
  Offset mouse = Offset.zero;

  // ...

  @override
  Widget build(BuildContext context) {
    return MouseRegion(
      onHover: (event) {
        setState(() => mouse = event.localPosition);
        entry?.markNeedsBuild();
      },
      child: Scaffold(
        // ...
      ),
    );
  }
}
class _ContentsState extends State<Contents> {
  OverlayEntry? entry;
  Offset mouse = Offset.zero;

  // ...

  @override
  Widget build(BuildContext context) {
    return MouseRegion(
      onHover: (event) {
        setState(() => mouse = event.localPosition);
        entry?.markNeedsBuild();
      },
      child: Scaffold(
        // ...
      ),
    );
  }
}

まとめ

Overlayを使うには、OverlayEntry を生成して Navigator 経由で表示する
OverlayEntry の builder 直下には Positioned を置くことができる
- 位置やサイズの調整が可能
削除するには remove() メソッドを呼び出す
Overlayの外から状態を更新するには、markNeedsBuild() メソッドを呼び出す

ちなみに

https://pub.dev/packages/flutter_portal

Provider/Riverpodで有名なRemi氏のパッケージ

Overlayを宣言的に扱うことができる

Positioned を挟むことができなかったので MouseRegion の例は再現できず😢

class _ContentsState extends State<Contents> {
  final random = math.Random();
  int percentage = 0;
  bool showingOverlay = false;

  void tapped() => setState(() {
        percentage = random.nextInt(100);
        showingOverlay = true;
      });

  @override
  Widget build(BuildContext context) {
    return PortalEntry(
      visible: showingOverlay,
      childAnchor: Alignment.topCenter,
      portalAnchor: Alignment.topCenter,
      portal: Material(child: Text('$percentage')),
      child: Scaffold(
        body: // ...
      ),
    );
  }
}
class _ContentsState extends State<Contents> {
  final random = math.Random();
  int percentage = 0;
  bool showingOverlay = false;

  void tapped() => setState(() {
        percentage = random.nextInt(100);
        showingOverlay = true;
      });

  @override
  Widget build(BuildContext context) {
    return PortalEntry(
      visible: showingOverlay,
      childAnchor: Alignment.topCenter,
      portalAnchor: Alignment.topCenter,
      portal: Material(child: Text('$percentage')),
      child: Scaffold(
        body: // ...
      ),
    );
  }
}