Overlay .of での 使用 Flutter: ガイドと例

Overlay.of は、最も近い祖先ウィジェット Flutter を取得するために使用される 静的メソッドです 。 OverlayState Overlay

ウィジェット Overlay は、アプリケーション内の他のウィジェットの上に表示できるウィジェットのスタックを作成するために使用されます Flutter。 このメソッドを使用すると、 特定の に関連付けられた Overlay.of にアクセスできます 。 OverlayState BuildContext

Overlay.of にアクセスするために 使用する方法の例を次に示します OverlayState。

import 'package:flutter/material.dart';  
  
void main() {  
  runApp(MyApp());  
}  
  
class MyApp extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return MaterialApp(  
      home: MyHomePage(),  
   );  
  }  
}  
  
class MyHomePage extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return Scaffold(  
      appBar: AppBar(  
        title: Text('Overlay.of Example'),  
     ),  
      body: Center(  
        child: ElevatedButton(  
          onPressed:() {  
            OverlayState overlayState = Overlay.of(context);  
            OverlayEntry overlayEntry = OverlayEntry(  
              builder:(BuildContext context) {  
                return Positioned(  
                  top: 100,  
                  left: 50,  
                  child: Container(  
                    width: 100,  
                    height: 100,  
                    color: Colors.blue,  
                 ),  
               );  
              },  
           );  
            overlayState.insert(overlayEntry);  
          },  
          child: Text('Show Overlay'),  
       ),  
     ),  
   );  
  }  
}  

この例では、ボタンが押されると、 Overlay.of メソッドを使用して OverlayState 現在の に関連付けられたを取得します BuildContext。 次に、が作成され、 のメソッドを 使用して OverlayEntry に追加されます 。 これにより、他のウィジェットの上の特定の位置に青いコンテナが表示されます。 overlay insert OverlayState

使用するには慎重な管理が必要であり、メモリ リークを避けるために、エントリが不要になった場合は overlay 通常、エントリを削除する必要があることに 注意してください。 overlay

Overlay.of 前回の更新後に 関連する更新や変更があった場合は、 Flutter ドキュメントで最新情報を確認することをお勧めします。